CSS for Beginners

If you want control and flexibility over your site, you have to practice do-it-yourself blog design. And if you want to practice do-it-yourself blog design, you have to know how to style the elements on your blog using a style sheet language known as CSS.

If you watched my video post on designing a minimalist blog, you might have gotten a bit confused about exactly how I was making the changes I made with the CSS. Well, in this post, you’ll find out what I was doing by learning the basics of CSS and how to apply it to your blog. So, let’s dig in, shall we?

What is CSS?

CSS stands for Cascading Style Sheets. A stylesheet contains all the aesthetic information a web browser needs to know to put your blog together, like what colors to use, what fonts should appear in which places, where certain elements should show up, how those elements should respond to user interaction and on and on.

Every web page, be it a blog or any other kind of site, is made up of at least two basic components: HTML and CSS. HTML defines a structure for the site and CSS defines the design. A simple way to look at it is to think of HTML as being a house and CSS being the paint and landscaping. HTML is the foundation of the site and CSS gives it curb appeal.

How does CSS work for bloggers?

For bloggers using WordPress (and if you aren’t using WordPress, you really should be), a CSS file is contained within every theme you use. Want to take a look? Go to your WordPress dashboard and then in the sidebar head to Appearance -> Editor. The first file that opens will, in most cases, be called style.css. This is the file you’ll edit when you want to change your blog’s appearance.

If you’re like me and you use the Headway theme (affiliate link), you have a much nicer way of editing the CSS. Open the Visual Editor by going to your WordPress dashboard and choosing Headway -> Visual Editor in the sidebar. Once it opens up, you can go to Tools -> Live CSS Editor in the top menu bar and a box will pop up that allows you to directly edit the CSS. Even better, you’ll be able to see the results of those changes immediately on the page. That’s a huge time saver when working with CSS.

So, wherever your stylesheet happens to be, your theme will link to it. In the <head> information of your blog, you’ll find a piece of code that looks something like this:

<link rel=“stylesheet” type=“text/css” media=“all” href=“http://example.com/wp-content/themes/twentyten/style.css” />

This line let’s a visitor’s web browser know where to find the style information for your blog so it can put it together the way you want it to.

Defining the Elements

To use CSS, you need to know a little bit about how HTML works. Everything on your blog can be targeted in CSS by one of three things: its HTML element, its class, or its ID.

Let’s take a look at what this means using an HTML link:

<a href=“http://example.com” class=“navigation” id=“current_page”>

In the example above, the HTML element is a, the class is navigation and the id is current_page. The HTML element is the way an item on your page is defined in the HTML code. Some examples of HTML elements are:

<p> — paragraphs
<a> — links
<h1> to <h6> — headings
<div> — generic containers

Those are without a doubt the top elements you’ll be styling. You can be more specific by assigning each element a class or id in the HTML. You use a class if you want to style a group of elements a certain way and an id if you want to style a single element a certain way.

For the example link above, let’s say all of the links on our blog are red, but we want all the links in the navigation area to be white. Since you have more than one link in the navigation area, you want to use a class attribute on all the navigation links. That’s why it says class=“navigation”. It would say that on each link in the navigation area.

Then let’s say we want to let our blog’s visitors know which page in the navigation they are currently on by making the font of that navigation link bigger. Since a visitor can only be on one page at a time, we can use the id attribute to define that link as id=“current_page”.

This is just to explain how classes and ids work in HTML/CSS. Classes are meant to change many elements while IDs are meant to change only one element. Unless you are creating your own theme from scratch, you probably won’t be defining the classes and IDs yourself. Instead, you’ll be looking at the classes and IDs that are already in use.

You can do that by taking a look at the page source in your web browser by right-clicking on your blog and choosing “View Page Source”. You’ll be able to see the exact code your theme is using. For example, if I view the source on the Blog Design Guy homepage, I can see that Headway defines items in my navigation bar as class=“menu-item”. If I want to change how they look then I can target that class in the stylesheet.

If you are using Google Chrome, you don’t have to sift through the page source to find what id or class an element is using. Instead, you can simply right-click that element and choose “Inspect Element” from the drop down menu. Chrome will automatically open the page source to that element.

If you are using Firefox, you can do something similar with Firebug.

The Anatomy of CSS

Now let’s see how you can actually write that CSS using our examples above. We wanted our navigation links to be white instead of red and we wanted our current page to have a larger font than the other navigation links. This is the code we would use to achieve that:

a.navigation { color: #ffffff; }
a#current_page { font-size: 24px; }

Let’s break this down. First, you’ll notice that our navigation class is prefixed with a dot (.) and our current_page id is prefixed with a hash (#). This is CSS’s syntax for selecting classes and ids. Classes will always start with dots and ids always start with hashes.

You’ll also notice that I’ve started each selection with its HTML element, a. I could have just as easily put .navigation or #current_page. Including the element is just a way to be more specific about it. You might read it like, “For any link with a class of navigation, do this.” “For a link with an id of current_page, do this.”

After I choose which element/class/id I want to target, I then put the rules inside braces ({}). This, again, is just CSS’s syntax for doing it. You can see that the aspect I want to change about the element ends with a colon (:) and the change I want made ends in a semicolon (;).

In case you’re curious, CSS uses hex color codes to represent colors. It’s a bit like mixing paint. The first two characters tell the browser how much red to include, the middle two how much green and the last two how much blue. #ffffff is the hex equivalent of white. Some colors have predefined names and white happens to be one of them, so I could have just as easily written color: white;, but using the hex color codes allows you to be more specific about which colors you want.

Now let’s say we also have some links in the footer area of our blog that should be white, too. They aren’t navigation links so they don’t have a class of navigation. Well, good news for us! We can define the rules for multiple elements at the same time. All we have to do is this:

a.navigation, div#footer a { color: #ffffff; }

We just need to add a comma and put our other element. In this case, our links (the a element) are in a div with an id of footer. You can think of divs as generic boxes that just hold content.

So, the rules we’ve defined can be read like this:

For any link with a class of navigation and any link in the div with the id of footer, make the color white. For the link with the id of current_page, make the font 24 pixels.

To recap, when you want to edit the style of a WordPress theme, you:

Go to Appearance -> Editor in the dashboard or Tools -> CSS Live Editor of the Visual Editor if you’re using Headway.
Open your blog’s page source in another tab so you can find the appropriate elements, classes and ids to use.
Follow the basic CSS syntax to define your style rules (classes prefixed with a dot, ids prefixed with a hash, rules within braces, etc.)

Now, if you want to be really good at CSS, you need to memorize at least the most common attributes you’ll want to change.

Common CSS Attributes and Basic Uses

Color
Changes the text color.
Example — color: #ffffff;
Result — Text displays in white.
Font Size
Makes the font display at larger or smaller sizes.
Example — font-size: 12px;
Result — Font displays at 12 pixels.
Background
Changes the background color, background image, background repetition and background position.
Example — background: #000000 url(‘images/background.jpg’) top center no-repeat;
Result — Background displays as black with a non-repeated image at the top center of the page.
Margin (Left, Right, Top, Bottom)
Adjusts the space outside of an element.
Example — margin-top: 10px;
Result — Adds 10px of space at the top, outside of the element.
Padding (Left, Right, Top, Bottom)
Adjusts the space inside of an element.
Example — padding-bottom: 10px;
Result — Adds 10px of space at the bottom, inside of the element.
Text Transform
Forces text to display in certain forms.
Example — text-transform: uppercase;
Result — Forces all text to display in capital letters.
Text Decoration
Gives text a particular decoration, such as an underline, line through, etc.
Example — text-decoration: underline;
Result — Text appears with a line underneath it.

What Now?

This post was just a short primer on CSS. Hopefully now you have begun to understand the basics of how CSS works and how you can use it on your blog. Keep furthering your education by subscribing to blogs like CSS-Tricks or getting a copy of a book such as XHTML, HTML & CSS (affiliate link), which will give you a more in depth view of how it all comes together.

If you have any problems or questions, feel free to leave a comment or contact me directly through the Blog Design Guy contact page. If you haven’t already, be sure to subscribe to Blog Design Guy and follow me on Twitter or Facebook.