Cascading Style Sheets (CSS)

CSS stands for Cascading Style Sheets, and it's what lets us change the look of our webpage.

Yesterday, we compared building a webpage to building a house. We said that HTML is like the framework and general structure of our house. It lets us group our content together.

You can think of CSS like the paint, furniture and decorations of your house.

How Do We Write CSS?

When we write CSS we have to follow a few key steps:

  1. What element(s) do we want to style? (using a selector)

  2. What property do we want to change? (like color, font-family)

  3. What value do we want to change it to? (green, Verdana)

Here's an Example:

Text is usually black, but in this case, we want it to be blue.

So we select the <p> tags, and change their colour to blue:

They might seem like very small details, but as you write your CSS, pay attention to make sure your semi-colons and colons are in the right spots!

Tags & Nested Tags

A nested tag, like section ul li means that you are only selecting the <li> tags that are within a <ul> tag that is also within a <section> tag. This means that if you have <li> tags within a <div> or <main> they will not be targeted!

Can You Spot the Difference?

        <li></li>    <-- will be targeted
        <li></li>    <-- will be targeted
    </ul>
</section>

<ul>
    <li></li>    <-- won't be targeted
    <li></li>    <-- won't be targeted
</ul>

results matching ""

    No results matching ""