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

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.

Written by Jonathan "JD" Danylko • Last Updated: December 8th, 2014 • Design •
Who is showing style? 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:

  • Inline - Probably the easiest way to add. It uses the style attributes in HTML to add style an individual element. This type of CSS will ALWAYS override the other two types.
    • PRO: If you want to change something on a page for testing purposes, this will always change the element or elements to use that CSS you write.
    • CON: You won't know if your other CSS types are implemented.

  • Internal - These styles are always located at the top of the HTML document in the head element. They can also be located inside the body of the page either (which isn't a great way to use your styles). They usually start with a <style> tag.
    • PRO: You can immediately start writing a style anywhere near an HTML element using the <style> tags (usually not recommended).
    • CON: They can be thrown all over the place and hard to track down in an HTML file or files.

  • External (Recommended) - Identified by the <link> tag in the <head> pointing to a CSS file.
    • PRO: Easily have one central location for your styles.
    • CON: If you don't have them sectioned out (layout, structure, images, etc.), the one file can get messy really quick.

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:

  • To apply a set of styles to elements
    <img src="myfile.jpg" alt="my file" class="border no-margin-top" />

    Your CSS would look like this:

    .border { border: 1px solid #CCC }
.no-margin-top { margin-top: 0 }
  • To attach state to an element. jQuery sometimes use the class selector to notify jQuery of an event or state changes. For example:
    <ul>
    <li class="active old">Layout</li>
    <li>Menus</li>
    <li>Settings</li>
    <li>Exit</li>
</ul>

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:

  • Chrome Dev Tools - Used by pressing F12 in the Google Chrome Browser)
  • Firefox/FireBug (optional) - The Firefox browser uses an extension called FireBug that also debugs CSS. Install Firefox first, then install the FireBug extension.

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

ASP.NET 8 Best Practices on Amazon

ASP.NET 8 Best Practices by Jonathan Danylko

Reviewed as a "comprehensive guide" and a "roadmap to excellence" with over 120 Best Practices for ASP.NET Core 8, Jonathan's first book by Packt Publishing explores proven techniques for every phase of the SDLC.

Learn industry-standard concepts to improve your coding, debugging, and deployment of ASP.NET Core websites.

Order now on Amazon.com button

Picture of Jonathan "JD" Danylko

Jonathan "JD" Danylko is an author, web architect, and entrepreneur who's been programming for over 30 years. He's developed websites for small, medium, and Fortune 500 companies since 1996.

He currently works at Insight Enterprises as an Architect.

When asked what he likes to do in his spare time, he replies, "I like to write and I like to code. I also like to write about code."

comments powered by Disqus