How To Change Website Colors with CSS Class and ID Selectors

This page shows examples of how to color text and background colors on a website. The examples use the color name Black for the text font color and White for the background color. Any color name or hex color code can be used.

Class and ID Selectors

It's often handy to define HTML Elements such a div, p, h1, ul, table, tr, td etc with a unique class or id selector. This way you can have different style rules for the same HTML Elements on your website.

Class Selectors

Each classname (class="classname") can be used multiple times within a HTML document. Class names cannot begin with an UPPER CASE letter or a number. Put the CSS into your Stylesheet and put the HTML into your HTML Document.

CSS Example

.classname {
color: Black;
background: White;
}

HTML Example 1

<h3 class="classname">Your Heading</h3>

HTML Example 2

<p class="classname">Your Text</p>

HTML Example 3

<div class="classname"><p>Your Text</p></div>

ID Selectors

Each unique idname (id="idname") can only be used once within a HTML document. ID names cannot begin with an UPPER CASE letter or a number. Put the CSS into your Stylesheet and put the HTML into your HTML Document.

CSS Example

#idname {
color: Black;
background: White;
}

HTML Example

<div id="idname"><p>Your Text</p></div>

Return to article index.