Lesson 11
How CSS Works
What is CSS?
I hope you’ve been having fun learning about HTML! It’s an important language to know when you’re building websites. Remember, HTML is like the building blocks of a website, and CSS is like the decorations. CSS takes a boring-looking HTML element and adds different rules to it to make it exciting and unique.
How do CSS rules work?
CSS works differently than HTML. When you use CSS, you use selectors to grab different HTML elements, then you create a rule saying how you want it to look. It’s like going to an ice cream parlor. You start by selecting the flavor of ice cream you want, then you create your own rules for how you want to customize it, like adding sprinkles or whipped cream.
What do CSS rules look like?
A CSS rule starts with a selector, followed by a declaration that’s inside of curly brackets. Inside the brackets are a property and value. The property tells you what part of the element you want to change, and the value says how to change it. CSS rules can have as many properties and values and you want, as long as you separate each set with a semi-colon.
Are you ready to learn?
Time to get your toes wet in CSS. There is a CSS rule below that needs some help. Right now the HTML is looking boring
- Add a SELECTOR to the CSS code below that will select the DIV tag
- Make the color WHITE
- Make the background-color your favorite color from the chart below.
| Red | Orange | Green | Teal | Navy | Purple | Black |
| Pink | Gold | LightGreen | LightBlue | SkyBlue | Violet | White |