CSS Basics – The First 5 Steps Towards Mastery

It was about four years ago when I began to study web design. I was taking a college course on the subject and it was nearing the end of the semester. A classmate and myself were partnered up to build a simple website about an imaginary company. After a bit of discussion, we decided that my classmate would handle the graphic side of the site, and I would tackle the HTML.
Later that evening I spent some time looking at different resources on the web. Almost all of them kept mentioning this CSS business. “What’s this?” I said. “Tables are bad?” It seemed to me that almost everything I had learned in class about building a website was wrong. Well, not quite wrong, just incomplete. It was like a missing detail in a story: the story as it was seemed great, but this new detail just added a surprising twist! That, my fellow web friends, is what CSS is. If HTML is the old story, then CSS is the new, exciting twist. If you will listen, I’ll tell you about the five first steps I took towards CSS mastery.

1) Understand What CSS Is
The first step in mastering anything is to understand what it is. The word CSS is an acronym that stands for Cascading Style Sheets. Let’s break that down a bit, starting at the end and working our way backwards:

• Sheets – This is where all the actual code goes. If the word “code” scares you, relax. CSS is very easy to pick up once you understand how it works, especially if you already know HTML.
• Style – Styling refers to the appearance of all the elements in a web page. If you want all of your links to be Orange, bold, and 12px large, you accomplish this through styling the anchor tag.
• Cascading – Cascading refers to how you can have several different style sheets that apply to the same web page. Each style sheet can apply styling to different elements. It is common to write multiple style sheets and apply them in a way so that one overrides the other, giving you more control over how your website looks.

So let’s tie it all together now. CSS is a styling language that is written in files called “style sheets.” One style sheet can define how an entire site looks, or multiple style sheets can be used together to further customize the website.

2) Know Why CSS is Useful
Now that we have an understanding of what CSS is, lets establish why CSS is so useful (and popular). From what you’ve read so far, you may have concluded that CSS deals with how a website looks. If so, you are correct! When you write CSS code, you are defining every aspect of how a website looks. Color, dimensions (how wide, how tall), and positions being the three big ones. So, why is this useful? Because when you use style sheets, you are separating content from design.

Let’s think about that last sentence, specifically, “separating content from design.” This is a powerful concept that has two large benefits. First, since all of the styling code has been moved into a separate file, web pages are smaller in file size. This translates into less bandwidth being used and faster load times. Second, since all of the styling is in one place, you can change the look of an entire website by editing only one file. Never again will you have to edit every page in a website just change the color of a link, for example.[ad name=”250×250″]

3) Learn How CSS Works
Ok, now that we understand what CSS is and how it is useful to us, we can take a look at some code to learn how it works. Let’s assume that we have a web page that lists four kinds of fruit. The HTML for the list would look something like this:

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Grapes</li>
    <li>Oranges</li>
</ul>

As you can see, we have two elements (tags) to deal with here: the unordered list <ul> and the list item <li>. To style these two elements, we need a couple of entries in our style sheet, one for each element. But before we start typing away, let’s decide how we want the list to look in the web page. Let’s say we decided on the following details:

• The list itself should be inset to the right so that it stands out.
• The list should have a padded area above and below it.
• The text of the listed items should be blue.

To accomplish these things, the following CSS would be written:

/*This is a comment. Enclose notes or code you wish to exclude in this way.*/
ul {
    margin-left:24px;  /*This positions the list 24 pixels from the left.*/
    padding-top:18px;  /*This adds 18 pixels of padding to the top.*/
    padding-bottom:18px;  /*This adds 18 pixels of padding to the bottom.*/
   }
ul li {
    color:#0000ff;  /*This makes the list items blue.*/
   }

As you can see, to style an element of a web page, all you have do to is type the element, an opening curly bracket, the properties (each followed by a semi-colon), and a closing curly bracket. Another important thing to note, is how to style nested elements. In the above list example, you can see that the list items are nested inside (occur before the end of) the unordered list element. That’s why the example CSS defines it as
ul li {color:#0000ff;}.

One last important thing before I move on. Before you can see your CSS efforts take effect on your web page, you have to connect the two together. You do this in the actual web page, and on each web page that you want the CSS to apply to. To connect them, place the following code in the header of your web page(s):

<link type="text/css" href="www.mysite.com/css/my_style.css" rel="stylesheet" />

Of course, you’ll have to edit that line of code to match your own configuration, specifically, the href, which tells the browser where to find the style sheet. The final result would look something like this:

• Apples
• Bananas
• Grapes
• Oranges

4) Study Good Examples of CSS
At this point, you may be wondering just how in the world you’re supposed to know all the properties of an element (how to set the color, position, etc.). That’s where your studious nature will pay off. There are a number or resources you can consult. The web is a great place to start (thanks for reading, btw), though, a book is my personal favorite source (I’ll list a couple at the end of this tutorial). There’s lots of information out there, you just need to take some time to search and study.

One of my favorite methods of learning CSS is to view the style sheets of other sites. You can do this by viewing the source of the page (View > Source, or Ctrl + U for Firefox users) and looking in the header to find the path to their css file. If you paste the path to the CSS file into your browser, you’ll be able to view the page and the styling behind it to get a feel for how they styled their websites (this is especially easy to do if your browser supports tabs).

5) Practice With A Simple Web Page
Once you’ve read a few articles and bought a book or two, you’ll probably begin to feel confident that you can style a page of your own. Hopefully you’ve discovered that most modern pages aren’t structured with tables and longer, but use div’s <div> and how to position and wrap elements with floats. If so, it’s time to make a simple page of your own.

You don’t need to have web authoring software installed on your computer. In fact, I recommend that you use Notepad for your first two or three attempts just so that you’ll have to rely on your memory and understanding. Once you’re feeling comfortable with styling and ready to do some serious work, migrate to a WYSIWYG editor (like Dreamweaver or Visual Studio). These programs are great for creating a smooth work-flow and providing a reminder now and then.

Recommended Reading (Bonus!)
In my CSS studies, I purchased a couple of books that, in my opinion, were the most helpful. I tend to learn best when I can just kick back on the couch and read a few chapters without the computer monitor staring at me. Once I think I understand the subject in theory, it’s time to give it a go at the ‘ole keyboard.

Here’s a link to each of the books I bought for myself:

• Stylin’ with CSS: A Designer’s Guide
• The Zen of CSS Design