CSS Introduction

You’ve probably been looking at your HTML thinking, "This is flat and boring. Nothing like the crazy diversity I see out on the web." This, as you may know, is because straight HTML focuses only on the content of a document. To work with document presentation we need to introduce Cascading Style Sheets or CSS for short. This seperation of content and presentation was intentional by the W3C and allows for a lot of flexibility. The content can be consumed or used in another way without the extra markup of the presentation polluting it. Further, the presentation can be altered without worrying about changing the content. A great illustration of this is the CSS Zen Garden. They have a collection of styles that people have done on top of the same bit of HTML. In other words, on each of these pages ( 1, 2, 3 ) the exact same HTML document is used, the only difference between them is the CSS. Click through a few of the designs, the visual differences that just a set of CSS instructions can provide is pretty amazing.

The Basics

At its core CSS uses proporties with a given value that tells the browser how to "paint" or render given element. In this simple example

background-color: red;

background-color is the property and red is the value. Its really as simple as that. Occasionally you may see something that appears to break this convention, but usually it is just a shorthand for the simple property: value; syntax. For example

margin: 10px 0 9px 20px;

is a shorthand for

margin-top: 10px;
margin-right: 0;
margin-bottom: 9px;
margin-left: 20px;

Both will achieve the same thing, but if you don’t have to type as much if you know the shorthand. You will get more comfortable with some of the CSS shortcuts as we go along. Your editors auto complete, or reading the property description should fill in any any questions about strange shorthand values.

So we need some way of attaching these property/value render instructions to an element. In other words "What thing on the page should have a red background or crazy margins?"

Inline stlyes

The simplest way of doing this is inline on the element itself using the style keyword. As an example, say we want to make the text of one of our <h2> elements blue.

<h2 style="color: blue;">BEEP BOOP!</h2>

Oh this is easy, right?! Well, yes and no… Perhaps we want our <h2> to have a yellow background, a padding of 2px, a font size of 15px, and center the text. Well okay:

<h2 style="color:blue; background-color: yellow; padding: 2px; font-size: 15px; text-align: center;">BEEP BOOP!</h2>

Things are getting crowded, but not too horrible I guess. However, consider that inline styles only apply to the specific element they are present on. In other words, our styling will only be visible on that single <h2>. If we wanted to reuse those styles on other <h2> elements in the document we will have to copy all of our styling to each individual element. As you can imagine this will be a lot of extra work for us, the HTML will become nearly illegible, and making changes to the styles will be nightmareish at best. What happened to all that preaching about seperating presentation and content? We are clearly violating that, right? There is a better way. As simple and as tempting as they may be at times, inline styles should be a last resort.

Selectors, Decleration Blocks, and Internal Stylesheets

Rather than adressing individual elements one by one, we can use selectors to adress entire groups of elements. The styles to be applied to elements that match the selector are laid out in a decleration block wrapped by curly braces. For example if we wanted all h2 elements in our document to have the styles from our last exapmle we would write:

h2 {
  color: blue;
  background-color: yellow;
  padding: 2px;
  font-size: 15px;
  text-align: center;
}

Ahh much easier to read, but where should this decleration block go? We can lean on the <style> element to allow for this. We can technically put this element anywhere in the document, but typically it is placed within the <head> section.

<head>
  <title>My Sweet Webpage</title>
  <style type="text/css">
    h2 {
      color: blue;
      background-color: yellow;
      padding: 2px;
      font-size: 15px;
      text-align: center;
    }

    p {
      padding-left: 20px;
      line-height: 15px;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <h2>BEEP BOOP</h2>
  <p>Some random text</p>
  <p>More great text</p>
</body>

Things are looking much better now. Clear sections for presentation, and content. Now if we need to adjust the styles for all h2 elements, we know just where to look.

After you get going styling with this method a need will quickly arise to be more specific about applying a style. Perhaps you wish to make a certain paragraph really "pop." We want to be able to adjust the color of these paragraphs text, but not the color of all paragraphs. What to do? Falling back to and inline style may be tempting, but resist! We can use the class or id attributes of html elements to help us out.

We can add a new decleration block to house our desired style

p.pop {
  color: red;
}

Now any paragraph with the pop class will have red text.

<p class="pop">Maaaaaaan look at this text pop!</p>

In CSS classes are designated with a . and ids with an #. Ids are given higher precidence in CSS, and are intended to be used as unique identifiers of content, whereas classes tend to be liberally reused.

External Stylesheets

Though we have achieved a nice seperation of presentation and content in our HTML document, once again things can become unruly as our styles become more complex. Imagine having dozens or even hundreds of style declarations in the head of an HTML document, again things will quickly become unmanigable. A simple solution to this is to simply keep all of your css in a completely different file. This can be done using the <link> element to point at the file containing the CSS.

<html>
  <head>
    <title>My Sweet Webpage</title>
    <link rel="stylesheet" type="text/css" href="style.css">
...

In this example the HTML tells the browser to look for a file called style.css in the same folder as the HTML file. style.css is a conventional name for the main stylesheet. Now all of the CSS placed in the style.css file will be loaded with the page. You can of course link as many CSS files as you would like, and CSS is very often seperated into multiple files for the sake of organization and ease of use.

Going forward we will only be using external stylesheets. It is considered best practice to do so (aside from rare special cases.) I mention internal stylesheets and inline styles so you will not be surprised when you run across them in the wild (you will.) However, they should really try to be avoided.

Cascading, Inheritance, and Specificity

Consider the following HTML and CSS:

<p class="wowzah">So then I said <strong>"What is this a hotel or something?"</strong></p>
<p>What?!</p>

p {
  color: blue;
  text-align: center;
}

p.wowzah {
 text-decoration: underline;
}

p {
  text-align: right;
}

strong {
 color: red;
}

p strong {
 color: yellow;
}

How do you think this will be rendered? Try this out locally and see if you can figure out the behavior. We’ll run through the explination on the next post.

Going Forward

As I mentioned, we will be using almost exclusively external stylsheets. Go ahead and add a style.css file to your basic-html project. Play around with styling some of the elements using this file. See if you can sort out the questions from the last section.

Beginning with the next post I will be shifting to a series of challenges. Hopefully this will help give you some practice with some of the git stuff we have covered, and it will serve as a tool for further instruction in CSS. Styling really isn’t going to make a lot of sense until you jump in and do it. So get ready, you’ll soon have some work to do!