To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Classes, IDs and tag selection

CSS has three different ways of styling specific elements. Rules can select either elements with a class or an ID or without either (tag selection).

In CSS, these are accessed through a selector.

This article will take a look at how the HTML works and then how the CSS is applied to that for each of these three ways of styling.

CSS rule structure

Tag selection

Tag selection refers to all elements of a type. It is the widest level CSS group.

A tag CSS selection refers to an element such as the img element and applying CSS to every one of it's type - regardless of IDs and classes.

Both the html and body tags must be styled through tag based selection.

Here is a HTML example followed by how to style it using CSS.

HTML
<img src=""/>
<img src=""/>
                      			

To represent tag selector, only the tag that is to be styled is required:

CSS
img{}
                      			

Classes

A class specifies a group. For instance, just as a school has classes which each have many pupils, a class of apple could be a Pink Lady.

A class defines information about such a group, for instance with the apple it could be that it tastes sweeter. The most important thing to note is that this does not affect just one apple, it affects all Pink Lady apples.

In CSS a class does precisely that - it defines properties for multiple items.

In HTML a class is defined as below:

HTML
<img class="my_image" src=""/>
                      			

To represent a class in CSS a dot or full stop is used such as .my_image.

CSS
.my_image{}
                      			

By putting some content between the curly braces the browser will style the element in the HTML.

Multiple classes

Multiple classes can be selected in a way that represents a logical and (∧).

The purpose of this is that it gives a more powerful selection tool due to the power of specificity. With a single class, an element receives just 10 points. Add a second class and it receives another 10, making 20.

Logical and can be done by combing classes using the class identifier (.) between the two classes:

CSS
.my_image.padded{}

It is important that there is absolutely no space between the class identifier and the second class.

IDs

In the aforementioned example about the Pink Lady apples, the scope of the selection is defined over all Pink Lady apples. This means that every Pink Lady apple will taste sweeter than other kinds of apples.

If it was just the one apple, the apple is given an ID. An ID is uniquely assigned to this apple, and given properties such as tasting sweeter.

CSS follows this rule too. An element can be given an ID which makes it unique to the page.

HTML
<img id="my_image" src=""/>
                      			

To represent an ID in CSS a hash is used such as #my_image.

CSS
#my_image{}
                      			

A tag or element may only have one ID.

IDs can actually be used more than once in a HTML page but the page is invalid HTML and will not validate through W3's validator.

Multiple selections

As shown in the initial diagram, CSS support multiple selections at once. This is achieved using the CSS separator which acts as a logical or (∨).

Putting a separator in between selectors means that the rule applies to one or the other and both selections.

The separator character is the comma (,):

CSS
.my_image, .padded, p, #id {}
        
Provide feedback on this page
Comments are sent via email to me.