Intro to CSS

In-line Styles

In the previous demo, we used in-line styles for each of our tags. Here's an example:

<p style="background:#333;color:#FFF;padding:10px;border-radius:5px;">
Figure 1: An example of in-line styles being applied to a paragraph tag.

These in-line styles make our paragraph element look cool. However, this implementation method is in direct violation of the theory of separating content from design and behavior. Remember, the "content" is the HTML, and the "design" is the styles.

And think about it: in-line styles aren't very practical. If you have 200 different tags on your page, you'd have to go through and add in-line styles to each of them. The problem of course multiplies as you begin adding more and more pages to your site. If you ever wanted to change the style of your entire website, you'd have to slog through ALL of the site's content (HTML) to do so. Trust me, this is NOT something you want to experience.

CSS Rules

Don't fret, for we have a solution: Cascading Style Sheets (or CSS)! The best practice is to write CSS in an external file (eg. main.css). However, for this example I have written my CSS in this HTML code in a <style> tag.

CSS is comprised of rules. Here's a rule to achieve the same results as figure 1:

<style>
    p {
        background:#333;
        color:#FFF;
        padding:10px;
        border-radius:5px;
    }
</style>
Figure 2: Our first CSS rule.

The styles between the curly braces are applied to ALL <p> tags. The "p" before the opening curly brace is called the CSS selector. Each CSS rule must have a selector; it indicates which elements to apply the style to.

If the selector is a word, then the CSS rule is applied to all tags with the same name. If the selector is two words, then the CSS rule is applied to tags that are nested inside of other tags.

<style>
    a {
        /* This rule applies to all <a> tags */
    }
    
    p a {
        /* This rule applies to all <a> tags that are descendants of <p> tags */
    }
    
    article p a {
        /* This rule applies to all <a> tags that are descendants of <p> tags
         * that are descendants of <article> tags */
    }
</style>
Figure 3: More specific selectors. Notice that /* */ are used for comments in CSS.

Using id Selectors

If we want to apply a CSS rule to one specific element, we can give that element an id and reference the id in the CSS rule. Here's an example:

<style>
    #my-sweet-banner {
        /* This rule applies to a tag with an id of "my-sweet-banner".
         * # symbols in CSS selectors indicate ids.
         * Only one element in the DOM should have any given id. */
    }
</style>
<section id="my-sweet-banner">
Figure 4: Applying a CSS rule to 1 element.

Using class Selectors

If we want to assign a CSS rule to multiple, unrelated tags we can use something called a "class". A class is simply a way of tagging our HTML elements. Let's say we want to create a CSS rule that rounds the corners of whatever element it's applied to. We could create a class called "rounded" and add that to all kinds of tags in our document.

<style>
    .rounded {
        /* This rule applies to any tags with a class of "rounded".
         * . symbols in CSS selectors indicate classes.
         * Multiple elements can share the same class. */
        border-radius:5px;
    }
    .shadow {
        box-shadow:1px 1px 5px rgba(0,0,0,.5);
    }
</style>
<section id="my-sweet-banner" class="rounded shadow">
    <p class="rounded">
    </p>
</section>
Figure 5: Class-based CSS rules. Notice that any number of elements can share a class, AND any element can have multiple classes.

Combining Selectors

Now that we have ids and classes, we can start to get even more sophisticated with our CSS selectors by combining ids, classes, and tag names. Consider the following HTML site menu:

<nav id="menu_main">
    <ul>
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Food</a></li>
        <li><a href="#">Drinks</a></li>
        <li><a href="#" class="disabled">Events</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
Figure 6: A simple site menu.

Here's a snippet of what the corresponding CSS might look like:


#menu_main ul {
    /* applies to any <ul> elements that are descendants of the
     * element with id="menu_main" */
    list-style:none;
    padding:0;
    margin:0;
}
#menu_main li a {
    /* applies to any <a> elements that are descendants of
     * <li> elements that are descendants of the element with
     * id="menu_main" */
    color:#AAF;
    text-decoration:none;
}
#menu_main li a.disabled {
    /* applies to any <a> elements that have a the "disabled" class
     * that are descendants of <li> elements that are descendants of
     * the element with id="menu_main" */
    display:none;
}
Figure 7: CSS selectors that combine classes, ids, and tag names.

Pseudo Class Selectors

To style a specific state of an anchor tag or input tags, we can use pseudo class selectors. They start with a colon (:).

a {
    color:#0000FF; /* BLUE */
}
a:hover {
    color:#FF0000; /* RED */
}