Getting Started with CSS (and techniques on how to debug it)

December 8th, 2014

As a web developer, you have no doubt worked with CSS. Most developers can't stand it. In this post, I'll show you the basics of CSS, CSS terminology, and various techniques on how to use...and debug...CSS.

It's all about the style, isn't it?

If you're a web designer, CSS (Cascading Style Sheets) is probably the best thing since the inception of the web. It provides you with the flexibility of slapping a new face on the structure of a web page without completely changing the "underlying" HTML.

If you're a web developer, it is the bane of your existence. I've had a couple developers come to me and say that they absolutely hate CSS. Not too many of them like it.

If you do have problems with CSS, I'm hoping to change your mind. My first experience with CSS was a web site called CSS Zen Garden. The idea of this site is that every single page on the site uses the exact same HTML as you move from page to page. The only "code" difference on the page is the CSS applied to it. This is an indicator as to the power of CSS.

If you've worked with CSS before and know the basics, skip ahead to the CSS tools where we have better ways of taming the beast.

CSS Basics

For those just getting started, want to know what is CSS, or don't want to touch the stuff, this section is basically a crash course of how to use CSS and what is css.

I'm not going to go into too much with CSS. There are entire books on this topic, so I'll just lay the foundations of CSS.

3 Ways to Use CSS

When designing your CSS, you have three options for attaching CSS to your HTML. Each one has pros and cons:

The best thing to do is to experiment with a single web page and try out these various ways of adding styles.

CSS Terminology

Id Selector (#)

If you are just going to use an element once in an HTML document, use an Id. The Id is identified by a hash tag (#) in a CSS file. Examples of areas where you would use them are in headers (<div id="header"></div>), footers, and consistent elements on a page (<div id="menu">).

The general rule is that they can only be used once.

Class Selector (.)

The class selector is signified with a period before the name. Unlike the Id Selector, you can apply numerous styles to a class selector.

In your HTML, it will be used with the class attribute and the period is not needed.

It can used in two ways:

Child Combinator (>)

The Child Combinator will only apply styles to a first level of elements (direct children) designated by the tag following the child selector. For example:

<ul>
    <li>
        Item 1
        <ol>
            <li>Project 1</li>
            <li>Project 2</li>
            <li>Project 3</li>
        </ol>
    </li>
    <li>
        Item 2
        <ol>
            <li>Project 1</li>
            <li>Project 2</li>
            <li>Project 3</li>
        </ol>
    </li>
</ul>

The best way to demonstrate this is through a nested menu of some kind.

If your style was:

ul li { font-size: 25px }

it would affect ALL of the unordered list items (LI) including the ordered list items. But if it was:

ul > li { font-size: 25px }

it would only affect the children direct related to the unordered list (UL), NOT the ordered list items (OL).

Adjacent Combinator (+)

When you want a style to look a certain way if it's by another style/tag, use the Adjacent Combinator.

Let's say you want two DIVs that are close to each other to have a top margin of 10px. Here is how that would look.

div + div { margin-top: 10px }

Universal Selector (*)

If you want a certain style applied to all elements under a tag, you would use the Unversal Selector. It's identified by the asterisk (*) and can be used as shown below:

div > * { font-size: 10px }

This will apply a font size of 10 pixels to every single element under a DIV tag.

Now, since you have the basics, let's get on with how to debug your CSS.

(If you are looking for a more detailed list of CSS selectors, I recommend the Resources at the bottom of the post)

CSS Tools

For writing your CSS, I would recommend either an online or offline IDE.

For online:

For offline:

Now that you have your editors handy, there are two more things you need before debugging your CSS:

Getting Started

Now that all of that is out of the way, let's create our sample HTML file.

Start up your editor (online or offline) and copy and paste this into your editor.

<html>
    <head>
        <title>My CSS Page</title>
        <style>
            body {font-size: 10px}
            #mymenu { font-size: 14px }
            #mymenu > li { margin-top: 5px }
        </style>
    </head>
    <body>
        <p>Here is my first CSS Page</p>
        <ul id="mymenu">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </body>
</html>

For this example, we are using the Internal method of declaring CSS. Notice we have a body tag. This defines the whole page to have a font size of 10 pixels just to set the page for a default size.

We changed our menu to have a font size of 14 pixels and allowed our list items to have enough space between them with a top margin of 5 pixels.

CSS Techniques

Now that you are on your way to becoming a Web Designer (Hey, who knows, right?), I want to leave you with some advice on how to debug your CSS when you are in the thick of things. Just stay calm and take a deep breath. :-)

When you can't get CSS on a page to work right, there are a number of ways to debug it. Here are five tips to use when designing with CSS:

  1. Simplify your CSS

    There are times when I have so many styles that I can't see what my objective was when I started creating the web page in the first place. Instead of adding more CSS to the pile, start removing CSS, copy it to Notepad as a holding place while you dissect what is making it work that way, and start making it as simplistic as possible. THEN, start adding your styles one at a time until you have your desired result.

  2. Add borders to show your elements "reach"

    When you add columns to a number of DIV elements, you may not know why a certain DIV is so wide. Insert an inline style onto the element making a border around it to see how far it goes (style="border: 1px solid #CCC").

  3. Use a CSS Framework

    If you've worked with CSS, developers know how much frameworks are considered the lifesavers in our field. I know it may be tough, but for a particular framework, RTFM (Read The Freakin' Manual). It will make your life a whole lot easier if you know what your CSS framework can and can't do.

  4. Use LESS or SASS

    Once you dig into CSS and work with colors, you will immediately wonder why you can't use variables in CSS. This is why LESS and SASS was created: to simplify the repetitiveness of CSS.

    Instead of using #C8C8C8 all over the place, LESS and SASS let you define a variable and assign it, then use it everywhere in your CSS.

    Snazzy, huh?

  5. Keep your CSS Structured

    Over the years, a lot of developers (including me) have placed all of their CSS into one file making it hard to find selectors. One site I would recommend all designers (and developers) look at is SitePoint. They have a great section on CSS Architectures and how to use CSS with an architecture perspective.

    I've also seen designers layer their style sheets in different files such as layout.css, typography.css (fonts), structure.css, and misc.css.

Conclusion

I have been using CSS since 1998 and it DOES keep getting better and better (trust me). Once you've designed enough web pages with CSS, you start seeing better ways to "code." All it takes is a first step.

Resources