How to Get Started With CSS

External Styling and Selectors

Advanced users of CSS rarely add their styling to an individual page. Instead, veteran users deploy CSS through an external .css file that each page refers to as needed.

I can't show you a direct example of this trick right now (for some reason, PCWorld's IT staff doesn't want a random editor mucking about with the code that runs the whole site), but I can show you the .css file we already use. Warning: Extremely boring link. That CSS file may not look like much, but every article generated on PCWorld refers to it to determine the default PCWorld page styles.

If we suddenly decided that we wanted every single PCWorld article to start showing its text as bright green (because we'd all lost our minds), applying that new hue to every article on the site would merely require us to change the text color of the body tag to green in that .css file.

Of course, the problem with handling all your styling through one top-level document is that styling individual sections of a specific page can become tricky. For example, let's say you want to change how your headings look on one page but not on another. How would you accomplish that using CSS?

Well, CSS offers two options. The simpler but less flexible way is to add some CSS to that single page. By default, CSS code on an individual page overrides the CSS in an external .css file. So if your style.css says the default font size is 12px but the page itself indicates 24px text, the page in question will take that 24px as gospel.

That's great for making one individual change, but you have other ways to subvert your master .css file if you want to make changes to specific kinds of headlines that appear on, say, one in ten pages on your site. As your site grows, managing each individual page becomes more and more annoying. That's why we have classes and IDs. You can add a class and ID tag to almost any HTML element on a page to further specify its identity to your style sheet. Generally they look something like the following:

Your classes and IDs can't have spaces, but otherwise you can name them whatever you want. It may seem like a waste of time, but you want to bother adding these specifying tags because CSS can recognize them and use them to target only the tags that have them. If you want to make some of your headlines larger and red, for instance, you can give them all the class "BigRed" and then apply a style only to that class.

To understand how, you have to keep in mind that the formatting of CSS in a separate style sheet is slightly different than it is as an inline property. Since any given style you write isn't attached to a specific HTML tag, it needs a selector to identify the page elements to which you're attaching that style. CSS in a style sheet looks like this:

selector {attribute: value; attribute: value; attribute: value;}

So if we wanted to make all the text in the body of a Web page red, for instance, we would write body {color: red;} in our CSS stylesheet. That statement indicates that all the text inside of the body tag on our Web pages should be colored red. The red attribute works because red happens to be one of the colors you can identify by name in CSS, but you can also use the hex value of a color (#ff0000) or the RGB value (255,0,0) to be more specific in your color choices.

You can use the selector attribute to edit the styling of any HTML tag on your page, and then get even more granular by adding in a class or ID. When you're programming with CSS, you identify a class by using a period. If you want to select all elements with the class BigRed, for instance, you would write .BigRed as the selector. Meanwhile, you select an ID by using the pound symbol. For example, you would use #BigTitle for an element with the ID BigTitle.

In addition, you can chain together selectors to achieve even more specificity. If you wanted to select only paragraph tags with the class BigRed, excluding any headings or other HTML elements that have that class, you would write p.BigRed as your selector.

Let's say we wanted to add our border to any paragraph that has the class BigRed. We'd throw the following line into our style sheet.

p.BigRed {border: solid 5px red;}

And now any paragraph with that class specified on any page linked to that style sheet would have the border added to it.

Since more-specific selectors take precedence over more-general ones, our selector using a class overwrites the styling for paragraphs in general. IDs are even more specific than classes (you can have only a single element on a page with any given ID). Say that we wrote the following line:

p#MostSpecific {border: solid 6px red;}

With this line in place, any paragraph with the ID MostSpecific would have a 6-pixel border rather than a 5-pixel border, even if it had the BigRed class.

Great Artists Steal

Of course, the easiest way to learn CSS is to start playing around with the code yourself. Although this simple explainer might be confusing without prior coding experience, it makes a lot of sense in context. For further help, I recommend that you check out a few of the great online resources for learning CSS. I'm a fan of the video tutorials on Don't Fear the Internet and the previously mentioned glossary of CSS tags on Dochub for general reference.

Use your browser's developer tools to look at the code (CSS, HTML, JavaScript) that forms your favorite websites.

The best way to learn how to write great CSS, however, is to look at how other coders do it. Luckily, that's a simple exercise in practically any modern browser. Both Chrome and Safari come with built-in developer tools that let you quickly and easily look at the CSS, HTML, and JavaScript on any page. Firefox and Internet Explorer users have access to similar tools through the free extension Firebug. These tools make it easy to see the code that creates your favorite websites, even highlighting on the page whichever element you are currently mousing over in the page's source code, and vice versa.

The next time you see a layout or formatting trick that you really like on a website, you can feel confident firing up your browser's developer tools to take a look and maybe try it out for yourself. With a little curiosity and practice, you'll soon be able to understand and replicate tricks from even the most beautiful sites on the Web.

Subscribe to the Daily Downloads Newsletter

Comments