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

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

{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:

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

{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:

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

{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:

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

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

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Anonymous

could you explain more accurately what is the CSS-Compound?

yassine safraoui

it’s the space selector, when you use space as a selector, like div a, you see the space between the div and the a, this is the compound selector, you may ask why would I need it? it’s mentioned in the article up there that it has more priority comparing to the other selectors,

sean

Hi, 
Nice article.

I am trying to set up social sharing using “share this image” plugin, but i only want to share one specific image.

Do you know what i need to add into the selector of the app to achive this?

thanks so much 
sean

JEFF

Thanks! That was just what I was looking for.

4
0
Would love your thoughts, please comment.x
()
x