Subscribe now

What is CSS [05.13.2016]

Cascading Style Sheets (CSS) are the best way to get your web pages looking the way you want them to. It's a language used to describe the presentation and styling of an html document. Picking up the basics of CSS is really easy, so lets hop right in.

Our first CSS file

We'll pick up with a slightly modified version of where we left off with our hello_world.html file. First lets add a stylesheet link tag to the header, like this:

<head>
  ...
  <link rel="stylesheet" href="style.css" type="text/css">
  ...
</head>

While we are doing that, lets take a look at the pieces that go into this link tag. A link tag specifies a relationship between the current document and an external resource. In this case we give it a relationship with the rel attribute, specify a uri with the href attribute, and tell it the MIME type of the file, again in this case a css file written in text.

Parts of CSS rules

Lets look at a really simple rule first:

h1, h2 {
  color: green;
  border-bottom: 1px solid green;
  margin-bottom: 1em;
}

Breaking down this rule, there are several parts:

The h1, h2 is the selector. It tells the browser where to apply the rule, in this case to all h1 and h2 elements in the document.

The part inside the braces {...} are called a Declaration Block. This is where the actual rules that should be applied to the proper html elements live.

Finally there are the rules. These are made up of two pieces: the property comes before the colon, and the values come after it. Some property directives accept or even require multiple values to be passed.

So what does this Declaration Block tell the browser to do?

First, it uses the color property to set the text the color green. Second, it places a border on the bottom of the element. This border is 1px in height, a solid line, and is also the color green.

Finally, we put a small margin under the heading element.

Color in CSS

Color can get complicated in CSS, and I'll spend a good amount of time on it soon. For now I'll stick to using color keywords like black, green, or red. If want to see a chart of the available colors, check out the MDN Color Values.

Selectors

Selectors are one of my favorite parts of CSS. Figuring out how to address just the right elements in the most efficient way possible can be a fun exercise. Let's look at a handful of different ways of using selectors:

h1, h2 { /* Line 1 */
  ...
}

p em { /* Line 11 */
  ...
}

If you compare the structure of the selectors on lines 1 and 11, you'll notice just a comma that is different. This creates a big difference in how the selectors are parsed though! Line 1 with its comma means it applies to each of those elements. Compare that with line 11 with the paragraph and emphasis tag means it only applies to emphasis tags that are a descendant of a paragraph.

I use the world descendant very specifically here, because that's different from any child. The child selector works like this:

p > strong { /* Line 15 */
  color: red;
}
<p>
  We've created our <span><strong>first</strong>webpage</span>,
  wasn't that <em>easy</em>?
</p>

This means that only strong tags that are a direct child of a paragraph tag will get the red color. Lets try deleting the > symbol and refreshing the page, and we'll see that now we have changed it to be a descendant selector and the text is red.

Another interesting selector is the first child selector:

li:first-child { /* Line 19 */
  color: red;
}

This block will take the first child of an element that is a list item, and change it to be red.

You can also do a sibling selection and stack these rules, like this:

li:first-child + li { /* Line 23 */
  color: orange;
}

It's worth taking a moment to study this one, as its doing a couple different things. This selects just the second list item in a list. It does it by first finding the initial list item, then finding its first list item sibling. It then changes that second LI orange.

There is also a wildcard element of asterisk *. This will let you select any element that fills the slot.

ul > * { /* Line 27 */
  text-decoration: underline;
}

Here we are finding all children of the unordered list, and underlining them.

Divs & Spans

You may have noticed a couple new elements in our html this time, a div and span element. These are both generic container elements, that carry no semantic value. They are super useful for grouping elements together for styling purposes, when you don't want to add a semantic element to the page. They function identically save one major difference. The div element is a block level element while the span element is rendered inline with no carriage return following it.

You can see I've used the span element in the paragraph without creating a line break. Also I've used the div element to group the heading and list so I could do some basic styling around them.

Summary

We covered a lot today! We created our first CSS file, analyzed what and how a CSS rule works, looked at a handful of selectors, and looked at non semantic elements. I know this seems like a lot, but try playing with the styles a bit. A good exercise is to change the color of the grey box and write a rule that bolds the first emphasis tag. There isn't that much to it. See you next time!

Resources