How to Use 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.

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”.

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.

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

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

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:

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

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

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

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

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:

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

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

{codecitation css}a {
text-decoration: underline;
}{/codecitation}

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:

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

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:

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