- Doing Before Learning
- The Tag Soup
- Adding CSS Spices to the Tag Soup
- CSS Classes
- Specificity and Scalability
- Summary
Adding CSS Spices to the Tag Soup
As I was forced to use CSS to implement some of the customer’s requirements, I took the easy route: use Google to find web sources with various qualities, look for CSS attributes that would solve my problems, and use them directly in the HTML code. Eventually, I’ve accumulated enough attributes to address all the requirements. However, attribute-oriented search did not help me appreciate the structure of CSS, so I’ve simply appended the CSS attributes to individual cells (while at the same time getting rid of the FONT element in the table cells).
You can view the awful HTML markup produced by this technique on my web site (and see a bit of it in Listing 2).
Listing 2 Formatting directives for a single table cell
<td align="left" style="font-size: 10pt; font-family: Verdana; padding-top: 2 pt; padding-bottom: 2 pt; border-left-width:1px; border-right-style:solid; border-right-width:1px; border-top-width:1px; border-bottom-width:1px; padding-left:8px; padding-right:8px"> Row #1, Col#1 ... ...</td>
Apart from being totally unreadable, the markup has several other critical shortcomings:
- The formatting directives represent the majority of the page, with the actual content being less than 10 percent of the page size. The users viewing such a page over a slow dial-up connection tend to be annoyed by the slow download times.
- If you have multiple pages using the same layout, you have to change each of them manually as the layout changes.
Lesson #2: Do not include CSS formatting directives inside HTML tags (or at least use them sparingly). Use CSS classes.