# Getting to know CSS

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 language we must fully understand.



```markup
<style> 
.step-one { color: red } 
.step-two { color: green; 
font-size: 60px; 
font-weight: normal; 
text-decoration: underline; 
text-transform: uppercase; 
border: 3px solid pink; } 
</style>
```

&#x20;Adding HTML elements on a page. Using our building analogy, this is like we have all the materials now in a pile in front of us. However a pile of different materials does not build. We're going to start reasoning about how to put together these things, how to create our blueprints, our plans. CSS is really powerful and can accomplish a wide variety of things: colours, sizes, order, positioning, hiding, showing, animation, etc. We'll scratch the surface here, but know you can do a lot with just CSS. It's a deep subject and a powerful tool.

Like HTML, CSS is not a programming language. It's a list of rules that you give the browser. You'll provide rules to the browser like "all `h1`s will be coloured red." We'll explore why this is different than JavaScript later, but know that's the gist.

### Style

We'll first explore the most apparent way to use CSS: to effect visual changes on your HTML. Imagine an `h1` like this:

```markup
<h1>This is an h1.</h1>
```

What if we wanted to instead make the h1 be red instead? Like this

## This is an h1.

We're going to write a CSS rule that makes the case. That would look like:

```css
h1 {
  color: red;
}
```

There's your first CSS. Let's dissect each piece of this rule:

* `h1` — This is what we'd call the **selector**. Anything that matches this selector is going to have everything inside the `{ }` applied to it. These selectors can be a wide variety of things but for now we're just selecting _every_ `h1` on the page. That's important to keep in mind too: it'll apply the changes to everything that matches that selector.
* `color:` – This is called the **property**. There are about [\~350 properties](https://meiert.com/en/indices/css-properties/) that you can use but to be honest you'll never use all of them. Maybe fifty to a hundred are used frequently and the rest are a long tail that are rarely used. The `color` property affects the color of the font (as well as some other things, but for now just assume it means font color.)
* `red` – This is the **value**. This identifies what the value of the property is going to be. In this case, we're telling the color to be red. There are variety of ways to define color in CSS. This is called using "named color", of which there are about [150 different colors](https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/) that CSS understands. CSS also understands hex values like `#ff0000`, rgb values like `rgb(255, 0, 0)`, and hsl values like `hsl(0, 100%, 50%)`. All those values I gave in the previous sentence are the same color as `red`. You don't actually need to understand how these values work to understand web programming or CSS and I would assert most web developers don't. If you need to understand, here's a great article on it from [CSS Tricks](https://css-tricks.com/nerds-guide-color-web/).
* `;` – Every property-value pair will end in a semicolon. Think of it like a period/full-stop to end of a sentence. This is how the computer knows you're done with that property and moving on.

So let's go a step further. Let's make our h1 even more different! Let's make it green, bigger, not bold (`h1`s are by-default bold), underlined, uppercased, and have pink border!

```css
h1 {
  color: green;
  font-size: 60px;
  font-weight: normal;
  text-decoration: underline;
  text-transform: uppercase;
  border: 3px solid pink;
}
```

## This is an h1

Notice the HTML we're using for this is still: `<h1>This is an h1</h1>`. Nothing has changed there! This is all just using a CSS rule the affect how it looks. Pretty cool, right? Also notice that one selector can have multiple properties and that one property can have multiple values! Let's dissect that.

* **`color: green;`** – We used this before, but now we're using the color `limegreen`!
* `font-size: 60px;` – **`font-size`** is how we make text bigger or smaller. Since we wanted to make it bigger, we made it 60 pixels tall which is quite large. The `px` represent the unit of measurement here. Just as it's different to say something is five feet long, five inches long, or five meters long, so too is it different to say something is `60px` or `60em`. CSS has a bunch of different measurements, but _most_ things are measured in `px`, `em`, or `rem`. [See this CSS Tricks article](https://css-tricks.com/the-lengths-of-css/) if you want see more about the various measurements of CSS.
* **`font-weight: normal;`** Actually `h1` paragraphs are bold by default. This is how you tell the browser to keep the text's weight to normal. There are more things you _can_ do here, but typically you're only telling it be bold or normal.
* `text-decoration: underline;` – This is how you tell it underline the text. Mostly text-decoration is used for that but you'll also see `line-through` for strikethrough or `overline` for … overlining purposes? Yeah, I'm not sure. But you can do it!
* `text-transform: uppercase;` – This can be a bit confusing because we're not changing the text inside the HTML tag but we're making everything upprecase. This is what `text-transform` can do for you. It will also do `lowercase` or `capitalize` (the latter being capitalize the first letter of each word.) Be careful with this since if your website supports other languages, changing the cases of letters will modify the meaning.
* `border: 3px solid pink;` – This is how you make borders around items. First, notice the border goes all the way to the edge of the page. That's because `h1`s take the whole line even though they don't necessarily have text to fill that. We'll address this later when we talk about the block model but it's good to know that now. So notice we have three values there for the one property: `3px`, `solid`, and `pink`. These are all separate and could be put in any order (ie you could say `border: solid pink 3px;` and it's the same.) The `3px` represents the thickness of the border, the `solid` represents that it's a solid line (it could be `dotted`, `dashed`, `double`, or a few others) and `pink` represents the color of the border. This actually an example of a combined CSS property, a shortcut. You could separate this out as `border-style: solid;`, `border-color: pink;`, and `border-width: 3px;`. You'll see a lot of these in CSS.

### Parents and Children

You'll notice that if I have HTML like this:

```markup
<div>
  <h1>An h1</h1>
</div>
```

And I have CSS that looks like this:

```css
div {
  color: blue;
}
```

The `h1` will be coloured blue. This is because it has a parent (or ancestor) tag that is a `div` which means that CSS will still affect it. This even works will large degrees of separation.&#x20;

If I have `<body><div><div><div><div><div><h1>my h1</h1></div></div></div></div></div></body>` and my CSS selector is `body { color: orange }` that will affect the `h1` in the middle.

&#x20; The key with CSS is experimentation. As you may imagine, all the various properties will interact with each other, sometimes to your detriment and sometimes in really cool and interesting ways.&#x20;
