How to Use CSS Selectors to Customize Your Site's Design

| Coding Tutorials
CSS Selectors to Customize Your Site's Design

Many OSTraining members want to update elements of their site's design and need to use custom CSS.

The key is the CSS selector, which allows you to target specific elements such as a link, an image or a div.

In this tutorial, I'm going to show you which type of selectors to use, and how to find them with Firebug.

What is a CSS selector?

In CSS, a selector is a pattern to target specific elements from the HTML. Once we have defined a specific element, we can than add CSS properties such as color, font-family, height and width.

In short, CSS selectors allow us to define the design for every HTML element on a website.

I'm going explain how to customize your website using these:

  • class
  • id
  • tag name
  • compound

Learn how to use Firebug or Web Developer

It will really help you if you learn how to use the Firebug addon for Firefox, or another similar tool such as Web Developer. These are invaluable tools for debugging CSS issues.

We have a tutorial to help you get started with Firebug. We also have a complete videos class on the Web Developer browser add-on.

UPDATE: Firebug is not supported anymore. Please try Dev Tools in Firefox, or Developer Tools Chrome instead.

Use a class as selector to customize an element

Class selectors uses a dot (.) at the beginning: .some-class-name

Let's show you a use case. In the example below, I want to change the font-size and line spacing for this text. This is a Joomla site, but the techniques I'll show you will work on WordPress, Drupal or another software.

css selectors firebug

With Firebug, I look into the HTML to find out which classes are used for this text. In my example I find more than one class added. I will use one of them: "uk-heading-large".

css selectors firebug

On the right side, I can experiment with the CSS properties. I can change font-size and line-height to make the text smaller and reduce the spacing between lines.

css selectors firebug

… and this is how the element would change on the screen:

css selectors firebug

.uk-heading-large {
    font-size: 28px;
    line-height: 30px;
}

I upload the code above into one of my site's CSS files to make the changes live.

Remember that playing with Firebug give us only a preview of our customizations; it doesn't actually save those changes.

Use an id as selector to customize an element

Id selectors uses a hashtag (#) at the beginning, as in this example: #some-id-name

In the image below, I want to change the background image of the cute couple, and replace it with a solid color:

css selectors firebug

I look into the HTML to find out which ID the container is using. In my example, the ID is "slideshow-home".

css selectors firebug

I play with the CSS properties through Firebug to set my custom background:

css selectors firebug

… and this is how the element would look after that:

css selectors firebug

#slideshow-home {
    background: #ed8034 none repeat scroll 0 0;
}

I upload the code above into one of my site's CSS files to make the changes live.

Note, I only added the CSS property that I customized, which is background. I did not include height.

Use a tag as selector to customize an element

Tag selectors can be any HTML tag, such as body, a, p, div, section or span.

In this example, I need to underline all the blue links:

css selectors firebug

I play with the CSS properties to define the text-decoration property for the a tag, which is in charge of links.

css selectors firebug

… and this is how the element would look after that change:

css selectors firebug

a {
    text-decoration: underline;
}

I upload the code into one of my site's CSS files.

Note, I only added the CSS property I customized and I skipped the rest.

Use a compound selector to customize an element

A compound selector can mix the previous 3 types using more than one class, ID and/or tag. What’s the advantage of it? This type of selector has a higher priority than the other methods.

A few examples:

  • #some-id .some-class has higher priority over .some-class
  • #some-id .some-class div has higher priority over .some-class div

I want to set a different spacing and background for a block of content, without messing with the others that have a similar structure:

css selectors firebug

Build the compound selector by checking the HTML structure that wraps the element you want to customize:

css selectors firebug

In the image above, you can see I point to two classes: "tm-block-black" and "block-one". I want to customize the element that owns "block-one".

This is my compound selector:

.tm-block-black .block-one

Adding "tm-block-black" to the selector will increase the changes to override the design due it's more specific than just using "block-one" class.

This is how the element would look after the change:

css selectors firebug

.tm-block-black .block-one {
    padding: 20px;
    background: rgba(0,0,0,0.3);
}


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.