Style Attributes - HTML Tutorial

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

So far, we’ve covered two key components of web pages: elements, which define the structure of a page, and styling, which determines how that page looks. In “Colors”, we saw a simple example:

<p>
  The grandmother lived out in the wood, half a league from the village,
  and just as Little Red-Cap entered the wood, a wolf met 
  her. Red-Cap did not know what a wicked creature he was, and was not 
  at all afraid of him.
</p>
<p style="color: red">
  'Good day, Little Red-Cap,' said he.
</p>
<p>
  'Thank you kindly, wolf.'
</p>

It’s great that we can make a single paragraph red, but what if we wanted all paragraphs to be red, or wanted to apply more complex styling across multiple elements?

Back in the early 1990s, the only way to control text color, size, or font was the font element. This led to HTML like this:

<B><I><FONT Size="+2">
<FONT FACE="Palatino, Arial, Helvetica">
<FONT color="#ff0000">
Kneel Before the Power of the Font Element!
</FONT>
</FONT></FONT></I></B>

<p><FONT Size="-1">
<FONT FACE="Arial, Helvetica, sans-serif">
<FONT color="#123456">
Ow! The bad HTML code! It burns us, burns us, precious!
</FONT></FONT></FONT></p>

This approach was cumbersome and inefficient. You had to repeat long, nested markup for every piece of styled text, and any change to fonts, sizes, or colors meant rewriting large portions of your HTML.

Using the style attribute is somewhat better than the old font element, but it still has the same major drawback: it’s not reusable. You don’t want to repeat inline styles for every element on a page. Modern best practices recommend never using the font element, and using the style attribute sparingly, if at all.

In the next section, we’ll explore a much better way to apply styling consistently and efficiently across your website: CSS Style Sheets.