Monday, November 21, 2005
The CSS Command
The CSS Command
Most *basic* CSS commands are made up of 3 parts:
1. Selector e.g. HTML elements like <p>, <h1>, <body> etc but without the “<” and “>”
2. Property e.g. color, font-family
3. Value e.g. green, “Times New Roman” - if there is white space in the value, the whole value must be quoted.
2&3 are jointly called declarations and are enclosed within squiggly brackets and separated by a colon, after the value there is a semi-colon:
Selector { property : value ; }
e.g. body { color : red ; }
Note: spaces are not necessary but used here for ease of reading.
[Later on, we will talk about Classes which are written differently.]
The end semi-colon is not compulsory, but “desirable“ especially as you change or add onto your CSS.
Many declarations for a single selector can be enclosed within the brackets, which must be separated by semi-colons.
e.g. body { color : red ; background : yellow; }
Some people find putting each pair on a separate line helpful for readability and later amendment e.g.
body {
color : red ;
background : yellow;
}
Comments can be added to explain your code or remind you at a later date of your intentions, comments are placed between: /* and */
Selectors can be grouped to have a common declaration, separated with commas e.g
h1, p {color: red;} /* means headings 1 and <p> are red in color.*/
<h1>red heading</h1>
<p>red coloured content …. </p>
<h2>not a red sub heading</h2>
<p>red coloured content …. </p>
If on the same SS the following is declared:
h1 {font-size: 2em;} /* 1em is a font size equal to the current size of “m” in browser */
NOW <h1> will now be red and 2em in height.
Semantic Markup
Always use appropriate selectors and assign them appropriate CSS coding for their type e.g. use ‘h’ for headings and also make <h1> bigger than <h2> etc, for 2 reasons:
1. So that if CSS is turned off or if an older browser is used the page still renders well; and
2. For SEO <h1> headings carry more weight than <h2> headings and so on, in determining SE indexing.
So, use:
* h1 though h6 for headings instead of b or font.
* ul for lists and li for list items, for navigation and other link lists instead of br or td. Don’t worry they won’t appear like bulleted lists once your have played around with them in CSS (later on)
* q and blockquote for quotes rather than adding quote characters directly.
CSS is SO powerful that it is possible to define any element like another e.g. a <p> like a <h1> thus (an exaggerated example):
p {font-size: 3em; color: red; text-align: center; text-decoration: underline; text-transform: capitalize; letter-spacing: 6px; font-weight: bolder; }
BUT DON’T this for the above two reasons.
