Web Programming with html5, css, and JavaScript

Keep Content and Presentation Separate
1. Use HTML elements for content and CSS for presentation.
2. Since the 
b
, 
i
, and 
u
elements implement presentational semantics, do not use them. 
Instead, use other elements that properly describe the text or use the following CSS 
property-value pairs:
font-weight: bold
font-style: italic
text-decoration: underline
640
Appendix A 
HTML5 and CSS Coding-Style Conventions

---

Cascading Style Sheets
1. In a 
style
element and also in a 
link
element to an external style sheet, do not include 
a 
type
attribute with a value of 
"text/css"
. Instead, you should rely on the browser 
engine supplying 
"text/css"
as the default. Here are two separate examples that show 
the right way to do it:


2. Comments:
• You should supply comments within your CSS code for any rules that are nonintuitive.
• If the comment is short, insert it at the right of the rule that the comment applies to.
• If the comment is long, insert it immediately above the rule(s) that the comment applies to. 
To give the comment more prominence, insert a blank line above the comment.
• For external CSS files, you should provide your name as a comment at the top. For 
example:
/* John Dean */
3. Surround logical groups of rules with blank lines.
4. Short rules:
• If you have just one property-value pair, or you have just a few property-value pairs and 
none of the values are 
font-family
lists, then you may put them on one line, with a 
space following each interior semicolon, like this:
.opening-statement {font-style: italic; color: blue;}
.closing-statement {font-family: "Times New Roman", Times, serif;}
• With one-line rules, insert a blank space before the opening brace. There should be no 
blank space at the right of the opening brace and at the left of the closing brace.
5. Long rules:
• If you have a rule with a long heading and/or lots of property-value pairs, use block 
notation. For example:
body {
background-color: white;
color: black;
a:visited: green;
a:link: red;
font-family: "Arial Black", Helvetica, sans-serif;
}
• With block notation, place the opening brace on the same line as the selector, separated 
from the selector by one space.
641
Cascading Style Sheets

---

6. Provide a blank space after a CSS property’s colon. There should be no blank space before 
the colon.
7. For a font family list, provide a space after each comma.
8. Use hyphens to separate multiword 
class
values and multiword 
id
values (blank spaces 
are not allowed within a 
class
value or within an 
id
value).
9. Provide a semicolon after the last property-value pair.
Although CSS standards allow you to omit the semicolon after the last property-value 
pair, you should include it. That way, if another rule is added later on, there will be less 
likelihood of accidentally forgetting the semicolon to separate the prior property-value 
pair from the new one.
10. Unless there’s a special reason, do not use the 
blink
value for the 
text-decoration
property.
11. Only use a type selector if you’re sure that type selector’s rule should always be applied to 
all instances of that element type. For example, the following rule would be appropriate if 
you (or your company’s webmaster) have determined that all figure captions should use 
12-point font:
figcaption {font-size: 12pt;}
However, 
div
is supposed to be generic, and it would be inappropriate to use the 
following rule to force 
div
to always be a layout table:
div {display: table;}
12. Google’s Style Guide says if you have a zero value for a CSS property, you should omit 
the unit in order to make the code more compact. You should follow that rule with one 
exception. The CSS validation service confirms that for color percentage values, you must 
include the % unit even when the value is 0%.