Attribute syntax in HTML and CSS

A student asked the following question…

“I understand what we’re doing, but I’m worried about memorizing all of the coding. It might help if I understood the reasons behind all of it. For example, why do font changes need semicolons on them and not just a closing quotation mark like other things?”

Great question and I believe what you are referring to is the difference between an attribute in a HTML tag and a property declaration in CSS. In HTML, an attribute modifies or embellishes a tag. Attributes follow the following syntax:

<tagName attribute=”value”> Some content </tagName>

The value is always surrounded by quotation marks. For some attributes like href for example, it is easy to see.

<a href=”some URL”> link text </a>

Specifying the type of font I want to display is a bit different since we no longer use the <font> tag in xHTML. Cascading Style Sheet, CSS, declarations are used to specify font presentation as outlined in the W3C recommendations1. Properties in CSS are defined using the following syntax

property: value;

If I want to change the font family for a specific paragraph using an inline Cascading Style Sheet declaration, I need to use a CSS declaration within the context of a HTML tag. An attribute was created to accomplish that, the style attribute. The basic syntax of that code would look like…

<tagName style=”CSS declaration”> some content</tagName>

So, for example, lets say I have a <h1> heading element. I would like the heading to be in a Verdana font. If a Verdana font is not available on the viewers computers, I’d settle for an Arial font. If neither is available, I at least want a sans-serif font used. In CSS syntax that would look like the following”

font-family: Verdana, Arial, sans-serif;

Now, let’s place that CSS declaration into a HTML attribute

<h1 style=”font-family: Verdana, Arial, sans-serif;”> Some content </h1>

That is why the punctuation of colons, commas, and semi-colons all have to be included between the quotation marks. It is because the CSS syntax has to fit within the HTML syntax.

References

Lie, HÃ¥kon Wium and Bos, Bert (April 2008). Basic concepts. Cascading Style Sheets, level 1 W3C Recommendation. http://www.w3.org/TR/REC-CSS1/#basic-concepts