Getting to Know CSS - Learn to Code HTML and CSS: Develop and Style Websites - page 34

Lesson 3. Getting to Know CSS
CSS is a complex language that packs quite a bit of power. It allows us to add layout and
design to our pages, and it allows us to share those styles from element to element and page
to page. Before we can unlock all of its features, though, there are a few aspects of the lan-
guage we must fully understand.
First, it's crucial to know exactly how styles are rendered. Specifically, we'll need to know
how different types of selectors work and how the order of those selectors can affect how
our styles are rendered. We'll also want to understand a few common property values that
continually appear within CSS, particularly those that deal with color and length.
Let's look under the hood of CSS to see exactly what is going on.
The Cascade
We'll begin breaking down exactly how styles are rendered by looking at what is known as
the cascade and studying a few examples of the cascade in action. Within CSS, all styles
cascade from the top of a style sheet to the bottom, allowing different styles to be added or
overwritten as the style sheet progresses.
For example, say we select all paragraph elements at the top of our style sheet and set their
background color to orange and their font size to 24 pixels. Then towards the bottom of
our style sheet, we select all paragraph elements again and set their background color to
green , as seen here.
1. p {
2. background: orange;
3. font-size: 24px;
4. }
5. p {
6. background: green;
7. }
Because the paragraph selector that sets the background color to green comes after the
paragraph selector that sets the background color to orange , it will take precedence in the
cascade. All of the paragraphs will appear with a green background. The font size will re-
main 24 pixels because the second paragraph selector didn't identify a new font size.