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