How To Color Code Text On Your Website Using CSS

Here is a few different ways to color code text on your website using CSS and HTML. We will begin by declaring a default text font color to the entire website.

Declaring a Default Text Color

To change the default text font color on your website, you will need to style the body tag with CSS. This can be done by using the CSS color property along with a color name or hex color code either by Inline CSS Style, or by External Stylesheet.

Inline CSS Style

To change the text font color on one page, simply declare a style rule directly into the HTML body tag. The example HTML/CSS code below will make the default text color of the page where the code is placed black.

Example Code with Color Name

<body style="color: Black;">

Example Code with Hex Color

<body style="color: #000000;">

External Stylesheet CSS

To change the default text font color for multiple pages on your website at one time, simply select the HTML body Element and declare a CSS style rule to the External Stylesheet. The example CSS code below will make the text font color of every page on your website black.

Example Code with Color Name

body {
color: Black;
}

Example Code with Hex Color

body {
background: #000000;
}

How To Color Code Text Inside Individual HTML Elements

Because the default text color defined by the body tag style rules get inherited by all other elements on the page, you will need to set a different color for those elements if the default color is not suitable.

Change Heading Element Color

How to change text color for a HTML Heading element such as h1, h2, h3, h4, h5, and h6.

Example Inline CSS Style

<h1 style="color: Black;">Your Heading</h1>

Example External Stylesheet CSS

h1 {
color: Black;
}

Change HTML Paragraph Element Text Color

How to change text color inside a HTML p element.

Example Inline CSS Style

<p style="color: Black;">Your Text</p>

Example External Stylesheet CSS

p {
color: Black;
}

Change HTML Document Division Element Text Color

How to change text color inside a HTML div element. All HTML elements inside this container such as p, h1, p, div etc, will inherit the text color value you set.

Example Inline CSS Style

<div style="color: Black;"><p>Your Text</p></div>

Example External Stylesheet CSS

div {
color: Black;
}

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 .. keep reading

Return to article index.