03. Inline Styles

Inline Styles

Preview the page index.html in your web browser.

You should notice the text ‘dynamic web pages’ appears red.

This is because it is enclosed in the following:

<span style="color:#ff0000;">dynamic web pages</span>

The use of the style attribute is known as an inline style. In this case the style is used to apply a red foreground colour to the text.

The color value is a CSS property used to set the hexadecimal colour code.

Although this technique works we’ll see two other ways of adding styles, namely document level stylesheets and then external stylesheet.

In both techniques, instead of using the style attribute, we work with something called rules.