CSS Selectors

By now you should understand that all CSS should be written in files separated from your HTML. There's almost no place in web design/development for the use of inline styles and inline stylesheets, and potential employers could likely skip over you for using them in your code.

While inline styles do make it easy to understand exactly what you're styling (the element you wrote the style on in the HTML!), you'll need to become good at selecting the HTML elements you want to style from your separated CSS stylesheet. To do this, you'll need to understand CSS selectors. We've already covered the most basic forms of selecting in the Intro to CSS post, so if you're completely new to this, reading though that post first will give you a head start.

Basic Selectors

CSS has tons of different ways to select things from your HTML. We'll just be covering the most common ones, and then sending you to some additional resources for learning the rest, if you're still interested.

All Elements

Styles every single element on the page the same way. Good to use for doing things like changing a background color (on every page) or changing your whole site's font style or color. Typically only use an element selector for broad, sweeping changes to your site's styles.

p {
    color: #333333;
    font-family: "Georgia";
}

It can be tempting when you're first starting out with CSS to use a lot of element selectors, but you'll find yourself stuck in a corner having to re-write a lot of your CSS if you do this too much. Again, element selectors should only be used on elements you're pretty darn sure you want to all be styled the same way. Commonly you'll have a paragraph with a class, and you'll style all paragraphs with very generic styles (line-height, font-family, etc.), and also give a style to the class, which only styles that one (or a few) paragraphs in a more specific way. (text-decoration, color, etc.);

Classes

Classes are the most common way to style your HTML using CSS. They allow for a lot of flexibility in terms of styling exactly what you want to style on your web page. Classes can be reused across as many elements as you want, making it a perfect tool for changing your mind about a style in the future. You add the class to the elements you want, and define the style in one place on your stylesheet. If you change your mind later, you only have to change it in the one place on the stylesheet. If you're familiar at all with Adobe's InDesign, classes are akin to creating a "paragraph style" or a "character style."

Classes are added to your HTML with the class property:

<p class="callout">This is a paragraph with a class</p>

And selected using a dot (.) preceding the class name:

.callout {
    font-size: 20px;
}

IDs

Typically, there's not really a good reason to use IDs as a CSS selector. They're much more useful in JavaScript than CSS, so unless you run into a very unique problem to solve, stick to using a class.

Combining

Comma separation

This one actually doesn't make things more specific, it actually makes them more broad. You can use commas to apply your styles to multiple selectors at once. For example, you may want to style ALL the headers on your page with a certain font. Rather than specifying each header individually, just use comma separation!

h1, h2, h3, h4, h5, h6 {
    font-family: Helvetica;
    text-decoration: underline;
}

Getting Specific w/ combinators

You can make any combination of the above three selector types to get very specific about what you're trying to style. Combining selectors is a great way to add extra styling to only some of the things on your page, where a single selector alone would paint a broad stroke across everything.

Spaces

Use a space between selectors to get more specific about the elements/classes you want to select. A space signifies that you want to select all the b items that are nested inside the a items:

<body>
    <div>
        <span class="highlight">Stuff</span>
    </div>
    <span class="highlight">More stuff</span>
</body>

div .highlight {
    background-color: yellow;
}

The above CSS says "select all elements with a class of highlight that are nested inside a <div> tag. If they're not nested in a div tag, they won't be selected and styled.

You don't have to chain these in the order of element (space) class either. If you did .highlight p you would be saying "select all paragraphs nested inside of any elements with a highlight class." This is particularly useful for things like <li> tags. Instead of copying/pasting the class name across many elements:

<ul>
    <li class="listItem"></li>
    <li class="listItem"></li>
    <li class="listItem"></li>
    <li class="listItem"></li>
</ul>

you could instead give the <ul> the class and use a space selector instead:

<ul class="items">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

.items li {
    ...
}

No space

You can combine an element selector with a class selector by chaining them together as such:

h1.highlight {
    background-color: yellow;
}

Whereas having a space between the two (h1 .highlight) would look for any elements with the class highlight that are nested inside an h1 element, chaining the two together (h1.highlight) says "select all h1 elements that also have a class of highlight."

Direct child selector (`>`)

This combinator will select only elements that are direct children of the first selector. If you think of a nested HTML tag as being a child to a parent, this combinator will stop the selector from selecting everything nested inside the first selector ("grandchildren", "great-grandchildren", etc.) and only select the direct descendant (1st-level of nesting).

<div class="parent">
    <p>First child paragraph</p>
    <p>Second child paragraph</p>
    <div>
        <p>Grandchild paragraph</p>
    </div>
    <p>Third child paragraph</p>
</div>

.parent > p {
    color: red;
}

Conclusion

Selectors play a key role in your ability to successfully design your web page well. Most of your skill in CSS will come from experience, so don't worry if you haven't memorized it all yet. Learning how to do something specific in CSS is one of the easier things you can search for online, so turn to Google as your first resource for information.

For further study, check out some of these awesome resources: