Khan Academy Intro to CSS Notes
Now you try to add your own styles:
On the following page, make all paragraphs have red text, make only
the first heading have a yellow background.
<html>
<head>
<title>sample page</title>
<style>
</style>
</head>
<body>
<h1
>What a short page</h1>
<p
>But this page has lots of tags</p>
<h1
>This is the last part</h1>
<p
>I doubt anybody wants to visit this page</p>
</body>
</html>
Do the Project: Travel Webpage in Khan Academy
By _____________________________
CSS basics
HTML is lacking style. Colors, fonts and sizes are CSS.
Note: The exercise to evaluate the style of different web pages is on a
separate page.
CSS= ___________________ style sheets, a whole new language
We embed CSS inside of ______________.
In this video they add a style tag to the ___________ of the page.
Style rules have a _______________ which tells the browser which
part of the web page to style and ________________ which tells the
browser how to style that part.
Make sure the braces are ____________ not square or round.
If you pick a color that the browser doesn’t understand, it makes the
headings _______________________ again.
Use the RGB spectrum to pick special colors
There are 2 ways to pick a color: by name or RGB value
RGB stands for __________ , ____________, _____________
Tag based selectors allow you to make all text marked with the same
___________________ have the same style.
Everything visible on a web page is inside the ______________ tags
Change the page background to sky blue. Write the code below inside
the style tags:
<style>
</style>
Quick tips : selecting by tag name
Copy the example css style code to make all paragraphs red using the
RGB color code.
Do the Challenge: Apples and bananas classes on Khan Academy
Do the Practice Quiz: Simple CSS selectors on Khan Academy
Write in your answers below:
<Style>
p{
In CSS, how would you select all the <p> tags on a page to give them style?
}
</style>
In CSS, how would you select this image by its id?
Do the Challenge: Colorful creature on Khan Academy
In this challenge you will add an img tag to add a picture and then
choose matching colors using css to select a page background color,
paragraph color and heading color.
CSS: Selecting by ID
How to create an id attribute in an HTML tag
The First part of css is the ___________,
To create a style that selects by ID follow these steps:
1st create a ______________________________________
2nd in the style tag add a new line starting with ___________
3rd put the properties into ___________________.
What went wrong when she tried to do the rabbit info heading?
IDs are case __________________.
IDs must be ______________.
If 2 elements on the page have the same ID the results are
______________________.
Do the Challenge: Seasonal IDs on Khan Academy
CSS: Selecting by class
If you want many different tags to have the same style, create classes
because you can’t use the same __________ for multiple tags.
What punctuation is used to start a class selector? __________
<img id="mainpic" src="cat.png">
In CSS, how would you select only the paragraphs with class name "warning"?
<p class="warning">Don't do it.</p>
<p>Do it.</p>
<p class="warning">Nooo, don't do it.</p>
© Copyright 2026 Paperzz