01: CSS and HTML

In this module you will learn the Cascading Style Sheet system named "CSS". You can't build nice websites without knowing CSS, but you don't need to know too much CSS to get started. This module's purpose is to teach you just enough CSS to create basic websites that aren't totally ugly. This will help you understand what we do in later modules when we start to use JavaScript to make your websites interactive.

What is CSS

When you created documents in HTML you may have noticed that the display of everything is very bland, but also that it's in a straight boring line. If you place an h1 tag at the top, then some text under it, then that's at the top and the text is under it. All of the tags are displayed in the order they appear in the document and that's it. They also have boring fonts, boring white backgrounds, and use the button styles of your chosen operating system.

CSS is the tool that lets you remove all of these boring defaults and change them completely. It allows you to create a set of rules that the browser processes before rendering that part of the HTML to the screen. You can say, "This paragraph is a Helvetica font and a light gray background with a small shadow." CSS does this based on a set of "rules" you write that "selects" which HTML tags the rules apply to.

The rules for CSS look like this:

h1 {
  color: blue;
}

In this rule I am saying:

1. Select h1 tags.
2. Change their text color to "blue".

The h1 part of this CSS is the "selector". It simply selects which HTML the rule alters. The { } characters act as boundaries around the attributes you want to change. In this case, I'm picking the HTML attribute "color" (almost, there is a slight problem with this we'll cover later). Then I simply set that attribute to "blue". A simplified translation of this is we're telling the CSS to change our HTML from:

<h1>I Am a Heading</h1>

To this:

<h1 color="blue">I Am a Heading</h1>

CSS is more complicated than this, but this is a good start to understanding what CSS is doing. You can think of it as a way to set many different attributes on your HTML that change its appearance.

Multiple Rules

Imagine you have two rules like this:

.blue-words {
  color: blue;
}

.big-words {
  font-size: 4em;
}

The rule .blue-words will turn text blue and the rule .big-words will increase the font size of the text. The rules are applied to any tags that have class="blue-words" or class="big-words" but how would you apply both rules to a tag? Let's use this HTML to see how it's done:

<p>Normal Heading</p>
<p class="big-words">Big Text</p>
<p class="blue-words">Blue Text</p>
<p class="blue-words big-words">Big Blue Text</p>

The way to apply both rules is in the last line <p class="blue-words big-words"> and the result is:

This is how you combine multiple classes, but if you have rules of two different types, then they are applied according to order and specificity.

Order of Rules Matters

CSS is combining the rules, and mostly doing them in order, with later rules taking precedence over earlier rules. It gets more complicated later, but we can demonstrate this in action with this new CSS and HTML:

<style>
.blue-words {
  color: blue;
}

.big-words {
  font-size: 2em;
}

.green-words {
  color: green;
}
</style>

<p class="big-words blue-words green-words">Big Blue Text</p>

Here's the above in action:

Notice that even though I have class="big-words blue-words green-words" the .green-words rule is applied, canceling out the .blue-words rules. You could reorder this to be class="blue-words green-words big-words" or any order you want and CSS will ignore you. CSS is more interested in the order of the CSS code, not where you put it in the class. That means, if you want the blue-words rule to be more important you place it after the green-words rule:

<style>
.green-words {
  color: green
}

.big-words {
  font-size: 2em;
}

.blue-words {
  color: blue;
}
</style>

<p class="big-words blue-words green-words">Big Blue Text</p>

Now you can see the text is blue:

Play with this as much as you can by crafting rules and then shuffling them around to see how the order of the CSS code is what determines which rule wins when they're the same kind of rule.

Simple Specificity

Wait, what was that? That's right, CSS doesn't only use the order of rules but also decides that different types of rules are more "important" than other types of rules. This is called specificity in CSS. Most descriptions of specificity are overly complicated for practical use, but they deal with the type of selector for each rule:

• tag selectors just use the name of the tag like h1 or p.
• class selectors use the .class-name and are identified by class="class-name" on the tag.
• id selectors use the #id-name and are identified by the id="id-name" on the tag.

There are more kinds of rules, but these are the ones you'll mostly see in this course, with a few odd ones popping up like [data-*] rules.

CSS then gives a certain "weight" to each rule so that a tag selector is less important than a class selector, and both of those are less important than a id selector. The other way to say that is "class beats tags and id beats both." Yet another way to say that is "tag < class < id" or "tag is less than class is less than id."

This description of specificity is simple, but it covers about 95% of the cases you'll run into. The other aspect of specificity to deal with is how the browser has its own default stylesheet that you're competing with, but most of the time your rules beat the browser's styles so you only need to deal with this when it's causing you a problem.

How to Learn CSS (or Anything Visual)

One very important concept I learned from years of learning to paint is that it is difficult to learn visual tasks from verbal descriptions. You can do it, but it is far easier to watch videos and attempt copies of visual work. HTML is very much a verbal medium, but CSS is verbal and visual. This means the best way I've found to learn CSS is to copy other people's websites.

In this module you'll spend a lot of time copying my copies of other popular websites and components. You don't have to copy my copies, but if you do then you can look at my simpler code to see how you did compared to my attempt. You should also be trying to copy many other user interfaces to build your confidence in the CSS/HTML medium.