The Idea Behind CSS
If you have found your way here, you have more than likely used CSS to some degree. The syntax is easy to learn, but don’t be fooled into thinking that the concept behind it is. The idea behind CSS is a complex one.
This article will explain the idea behind CSS and how it will simplify web development and give you the freedom to design mind-blowing websites.
The Idea Behind This Article
I’ve been thinking for a while about a good topic to get this blog rolling. I went back and forth on a couple different ideas until a little incident the other day brought me to the concept I had been looking for. I’m currently taking online college courses to finish up my degree. As of the time I’m writing this, I am taking a beginning HTML class (lame, I know…). One of the features of the online college is a forum where I interact with the teacher and other students. One of the students posted a complaint that she shouldn’t have to learn about the ‘outdated’ em, strong and h1 tags. And, that there were better ways to format text and gave an example of a font tag. I replied to her explaining that those tags are far from outdated. I even quoted the W3C (World Wide Web Consortium) and felt that I had a pretty solid argument. She was quick to respond telling me that I “clearly don’t know what I’m talking about”. If possible, I would have reached through the monitor and strangled her! The instructor was quick to mediate and put an end to our argument.
Separating Presentation From Structure
Cascading Style Sheets (CSS) is a language that is used to describe the presentation of markup language such as HTML and XML. The W3C states that, “by separating the presentation style of documents from the content of documents, [CSS] simplifies Web authoring and site maintenance”. In other words, CSS is meant to separate presentation from structure and make your life as a web developer easier. I consider those those two things the laws of CSS. If your experience is ever contrary to one of those two things, you are definitely doing something wrong.
This is how I define presentation and structure
- Presentation
- This is the style of a document. It consists of the colors, fonts and even sounds that are in a web page. The idea behind good presentation is to enhance the content in a way that will make it more accessible to the user.
- Structure
- This is the markup that describes the content and semantics. A good structured document will make it more accessible to other machines or programs. The structure contains meta data and descriptive tags that will allow it to be interoperable.
To separate the two, keep your styles in an external stylesheet and out of the head or body of the document unless you have a really good reason not to. Overusing inline styles is just as bad as using the font tag and completely contradicts the idea behind CSS.
It is still common to throw structure, presentation and functionality all into one big tangled mess and call it a website. However, the advancements of web languages and standards are leaving little excuse to do so. Even browsers are starting to play fair and are more standards compliant.
<table CELLSPACING=0 CELLPADDING=3 BORDER=0 WIDTH="674" HEIGHT="100%" background="rawimages/bottombanner.jpg" STYLE="border:0px solid #FFFFFF;">
<tr>
<td VALIGN="" ALIGN="center">
<div CLASS="text">
<b>sen - si - tive. </b> <i>(adj.)</i> 6. Readily altered by the action of an agent.
</div>
</td>
</tr>
</table>
The is actual HTML that I borrowed from a website. Notice the amount of markup compared to actual content. All of this was made to write a definition.
<dl>
<dt>sen - si - tive. <i>(adj.)</i> </dt>
<dd>6. Readily altered by the action of an agent.</dd>
</dl>
Again, compare the amount of markup and content. This will accomplish the same as the above but is much lighter, has semantic markup and will make your life a lot easier to write and update.
Good CSS Requires Good HTML
Before you can go busting out fancy schmancy websites with your amazing CSS skillz, you need to know the ins and outs of HTML. Not one line of CSS should be written before your structure is solid. You need to use the appropriate tags that describe the content. Put your titles in header tags, navigation in lists, tabular data in tables and so forth. Your document should be neat and clean even without any kind of styling involved. After you have done this, add a few div’s and start adding presentation to your website. Go around to some of your favorite sites and try to read through them with the stylesheet disabled. You will quickly notice who has and hasn’t mastered this concept.
The ability to do this is sometimes impeded by the site’s design. I have worked with designers who have no web experience and lay out a website that is impossible to build bending a few rules and using hacks to get IE 6 to cooperate. Not all designs will allow you to develop a standards compliant website. That’s why it is important for the designer to not only be familiar with HTML and CSS, but to have a vision of how the website will bend and fold under different conditions.
Nicely written HTML also allows you to take advantage of the cascading part of stylesheets. This is one of the most important features and shouldn’t be ignored. Instead of adding a class or id to every single element, use just one id that has been added to the parent container. Consider this example.
<div id="beverages">
<h1>Preffered Beverages</h1>
<ul>
<li><strong>Caffeinated</strong>
<ul>
<li>Rockstar</li>
<li>Mountain Dew</li>
<li>Pepsi</li>
</ul>
</li>
<li><strong>Non-Caffeinated</strong>
<ul>
<li>Hot Chocolate</li>
<li>Orange Juice</li>
</ul>
</li>
</ul>
</div>
With one id I can easily style all of the elements inside of the div. This leaves the markup clean and easy to maintain.
#beverages {
border: solid 1px #333;
padding: 10px;
}
#beverages h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 2em;
color: #CCC;
}
#beverages ul li {
font-size: 1em;
color: #666;
}
#beverages ul ul li {
font-size: .6em;
color: #999;
}
#beverages ul li strong {
font-weight: bold;
text-decoration: underline;
Here is an example of how I would use the cascading attribute of CSS to style the contents of the #beverages container
Tables Vs. CSS
HTML was originally developed as a means of formatting plain text and inserting images into documents. Creative minds quickly matured past the visual capabilities of HTML and began to hack the markup in order to accomplish the design they envisioned. This is where table based layouts came from. Tables were never intended to be used for a site’s layout. They are and always have been intended to, “…arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells” (W3C).
I have seen both extremes of table use in website. Those who use tables for every aspect of a site’s presentation and those who refuse to use them even for their intended use. The latter is even worse in my opinion because it fills the document full of div’s and can be sloppier than the former. The overuse of divtags has been referred to as DIVitis. Tables are excellent when used for their intended purposes. Table attributes like the summary as well as the table head, body and foot allow you to better describe the elements inside the table.
Breaking Out Of The Box
Molly E. Holzschlag wrote an awesome article on A List Apart about breaking out of the generic grid design and taking full advantage of a CSS layout. In the article, she contrasts urban planning in two different cities. One has planned city blocks that make up a perfect grid and the other is a giant mess of winding roads and irregular city blocks. She compares this to web design.
The web is maturing, our approaches to it changing, our opportunities for innovation and creativity more apparent than ever before. We’re not limited to a planned city; we can create unique designs and have them work well. As a combined force, the empowered veteran and today’s spontaneous youth inspire a provocative notion that the way the web looks today is nothing like the way it’s going to look tomorrow. And for the most part, I’m sure you’ll agree that’s a very good thing.
Grid based design has its place and shouldn’t be considered a bad thing. The point lies in the fact that CSS gives us the freedom to break out of the box and leave limits of table based layouts behind. As far as web design goes, we are just getting started.