13 Text Color

Inline CSS can be used to update the color of text on a webpage. Take this HTML code for example:

It renders on a live page in basic black.

What if you want a little pizzazz in your H1? You could use CSS to change the color of the title. This will be inline CSS; we’ll code it right into our HTML code.

Inside the opening <h1> tag, we’ll add a property and value to denote color to the header. Let’s make the header brown, since this is a website about pasta:

For this inline CSS, the “style” portion is our selector, then “color” is our property and “brown” is our value. Note how the code is structured. Inline CSS must always be written this way to work. The basic structure is selector=”property: value;” and any deviation will likely cause your code to fail.

Now, our webpage shows the title in brown, rather than the default black:

Remember, this is basic CSS. We’re just using a text color, in this case “brown,” to tell the browser to display what it thinks is brown. Advanced CSS uses hex codes to denote specific shades of color. This site does a good job of explaining the process, and there are numerous sites that you can use to get hex codes for different shades.

Next, let’s do some embedded CSS to play with the fonts on the page.