How to Apply CSS to an Element, Class or id

A CSS style can be applied to an HTML element, a class or an id. To do this, a CSS selector is used in the stylesheet to identify the desired entity. It can be hard to remember the exact syntax to use, so we've written this little guide.

Apply CSS to an HTML Element

For example, you want to apply a CSS style to the paragraph tag. Some sample HTML would be:

<p>This is my paragraph text.</p>

In the CSS stylesheet, you just write the name of the HTML element and put your styles in curly brackets, like this:

p {
color: blue;
}

So, the CSS selector for an HTML element is just the HTML element name.

Apply CSS to a Class

For example, we might have a class called TxtColoured applied to a paragraph tag, the HTML being:

<p class="TxtColoured">This is my paragraph text.</p>

To apply styling to the class, we write the class name in the stylesheet with a fullstop in front, like this:

.TxtColoured {
color: blue;
}

So, the CSS selector for a class is the class name with a fullstop in front.

Apply CSS to an id

The id selector is used to identify a specific element on the page, e.g. a specific paragraph. Example HTML would be:

<p id="ThirdParagraph">This is my third paragraph.</p>

To apply styling to an id, we write in the stylesheet the id name with a hash character in front as follows:

#ThirdParagraph {
color: blue;
}

So, the CSS selector for an id is the id name with a hash character in front.

Back to CSS How To Guides | See also: CSS Web Design

Visit LowPrices.co.uk for Your UK Shopping