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.