Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS for beginners – Step 2/3

Saturday, August 2nd, 2014 by Servage

CSS selectors

In part 1 of this series we introduced the syntax of CSS and its components like selectors, declarations, and comments. In this second part we will look at the various types of selectors in more depth, along with some code samples. This helps in understanding the practical use of CSS selectors.

The most fundamental selector is the type selector. As discussed in part 1, it names the HTML tags, which are desiring an applied style. In order to assign a style, you need to first write the name of the appropriate HTML tag. For instance, if you wish to change the color of a heading (h3) from default black to yellow, plus change a paragraph (p) to green, you would write the code as:

h3 {

color : yellow ;

}

p {

color : green ;

}

If you want to keep both elements the same color (green), you need not write separate lines. Instead it is assigned as:

P, h3 {

color : green ;

}

CSS Class Selectors

When you designate classes in your HTML document, you can then assign them as CSS selectors and apply desired styles. You can use class attributes, providing additional info about the HTML element. For example, if wanting to set a left margin of 20px for the page content (paragraphs or sections) you can do so in following ways:

<p class=”margin”>

Or

<div class=”margin”>

Once you’ve defined the class in your HTML document (above), you can use them as a CSS selector. To do this on a CSS sheet, you use a period just before the class name:

.margin {

margin : 20px left side;

}

You need to remember that you can only set the class selector for a specific element that is consisting of that particular class. The practical method to set a class selector is to place the type selector just before the period of the class selector without leaving any space. See the example below:

p.margin {

margin : 20px left side;

}

Multiple Classes

You can set multiple classes for a single element. You need to use a space as a separator between the attributes like:

<p class=”margin bordered left”>

Thus, we have three different classes and their class selectors would be:

.margin { margin : 20px left side; }

.bordered { border : 1px solid black ;}

p.left { … }

Multiple classes offer great opportunity to apply various special effects to elements without having to create a completely new style set. Yet, increasing intricacy in the document is one of the disadvantages of multiple classes and their CSS class selectors, especially for the beginner. A seasoned web developer will overcome such disadvantages by way of comprehensive and appropriate CSS commenting.

At this point, I am concluding remarks on CSS class selectors, but in part 3, I’ll briefly cover the rest of the CSS selector types.

 

References & More Reading

CSS Introduction
What is a CSS Selector?
How to Use Multiple CSS Classes on a Single Element

CSS for beginners - Step 2/3, 4.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.