Incorporating CSS Ideally
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
A good Web page can go bad quickly if the designer doesn't know the basic techniques of applying CSS. Listings 1 and 2 show two ways of applying CSS to a Web page. Both are perfectly valid ways of marking up content for the Web; however, they both hinder you in the long run.
Listing 1 Too Many Breaks
<div class="bodycopy"> The glorious WhizBang Battle Bat allows kids to play baseball with an edge not seen since the 1940s when everything was in black and white. You couldn't see the color of blood in those days. It was all just chocolate milk. The kind of chocolate milk that tastes good after a day on the baseball diamond, slugging home runs after home runs with your lucky WhizBang Battle Bat. <br> <br> <br> "Without this Battle Bat, I wouldn't have had the amazing pleasure of being picked first," said high school nerd, Brian Smith. "You have no idea how much therapy I've needed to get past the fact that I'm unpopular in a lot of areas of school interaction. The kids say it's mostly hygiene, but I think it's that I'm a rebel in that I write everything in lowercase letters—even the note I forged from 'my mom' to get out of gym class." <br> <br> <br> However, all that changed with the birthday gift of Battle Bat. Now, Young Mr. Smith is being picked first for sports with his peers and appreciating life on a whole new level. You can, too, for the low, low price of one cent. </div>
Listing 2 Too Many Non-Breaking Spaces ( )
<div class="bodycopy"> The glorious WhizBang Battle Bat allows kids to play baseball with an edge not seen since the 1940s when everything was in black and white. You couldn't see the color of blood in those days. It was all just chocolate milk. The kind of chocolate milk that tastes good after a day on the baseball diamond, slugging home runs after home runs with your lucky WhizBang Battle Bat. </div> <div class="bodycopy"> "Without this Battle Bat I wouldn't have the amazing pleasure of being picked first," said high school nerd, Brian Smith. "You have no idea how much therapy I've needed to get past the fact that I'm unpopular in a lot of areas of school interaction. The kids say it's mostly hygiene, but I think it's that I'm a rebel in that I write everything in lowercase letters—even the note I forged from 'my mom' to get out of gym class." </div> <div class="bodycopy"> However, that all changed with the birthday gift of Battle Bat. Now, Young Mr. Smith is being picked first for sports with his peers and appreciating life on a whole new level. You can, too, for the low, low price of one cent. </div>
In Listing 1, a class called "bodycopy" was applied to a div element that encased three paragraphs worth of content. The paragraphs were then broken apart by a few br tags.
In Listing 2, several divs were wrapped around the paragraphs. Also, there were several non-breaking space entities; was used to cause an indent in each of the paragraphs.
These approaches are both valid technically; however, the Web developer who created the markup has placed restrictions on the content to be reformatted and how it can be presented to other media.
The ideal approach when marking up content is to use markup that carries with it inherent presentational meaning and then apply CSS rules to those HTML tags. In doing this, you redefine the presentation of the CSS, unleashing the power of the technology, but ensuring that your content will be able to be revisited, redesigned, and redelivered with minimal or no effort.
This is the ideal method for approaching markup and then applying CSS rules. First take a look at the markup in Listing 3.
Listing 3 An Ideal Version of Approaching Content Markup
<p> The glorious WhizBang Battle Bat allows kids to play baseball with an edge not seen since the 1940s when everything was in black and white. You couldn't see the color of blood in those days. It was all just chocolate milk. The kind of chocolate milk that tastes good after a day on the baseball diamond, slugging home runs after home runs with your lucky WhizBang Battle Bat. </p> <p> "Without this Battle Bat, I wouldn't have had the amazing pleasure of being picked first," said high school nerd, Brian Smith. "You have no idea how much therapy I've needed to get past the fact that I'm unpopular in a lot of areas of school interaction. The kids say it's mostly hygiene, but I think it's that I'm a rebel in that I write everything in lowercase letters—even the note I forged from 'my mom' to get out of gym class." </p> <p> However, all that changed with the birthday gift of Battle Bat. Now, Young Mr. Smith is being picked first for sports with his peers and appreciating life on a whole new level. You can, too, for the low, low price of one cent. </p>
Now take a look at the CSS rules. In Listing 1, several brs were used to create padding between the paragraph chunks. This CSS rule would achieve the same or a similar result:
p {
margin-bottom: 3em;
}
In Listing 2, several non-breaking spaces were used to create indents in the first line of each paragraph. We can achieve that effect with the following bit of CSS:
p {
text-indent: 5em;
}
However, let's say that we have coded our content as in Listing 1, but we want to put an indent in the first line in each of our paragraph chunks. Looking at how the markup is produced, the easiest method is to do what the Listing 2 did and insert several non-breaking spaces in front of the first sentence of the paragraph chunk.
That's acceptable if we have only one page of content to work on. However, imagine a client Web site with several pages. Now think of sites with hundreds or thousands of pages. The task of making all those updates by hand suddenly becomes less appealing.
However, if we mark up the content with inherent-presentational markup, such as the p tag, we can readily go into a style sheet that is associated through an external method and add the new CSS rule. Instead of modifying the Web site at several points in a multitude of Web pages, we update one file only once.
Making changes to a style sheet and having the design changes applied instantly across a Web site is one benefit of marking up your content in this ideal method. Another benefit is making different style sheets for delivery to other media.
For instance, you can create a different style sheet to handle how your Web pages look when they are sent to a printer. With the traditional method of marking up your content, your pages will display exactly like you have them marked up for display in the browser. Sure, the colors might be translated to greyscale because you have a black-ink only printer. But the br won't go away, and the indents will always be there on the paper. In essence, you won't take full advantage of the other media because your content is trapped in markup destined for a Web browser that is geared toward visual presentation.