The Style Attribute and CSS Declarations
|
| ||||
| ||||
|
|
Remember Acme's front page? When I introduced it in the first tutorial I mentioned it was ugly as heck, and unlikely to attract anyone's attention. Let's have a look at it one more time:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>Acme Computer Corp.: Who We Are</TITLE> </HEAD> <BODY> <H1>Acme Computer Corp.</H1> <P>Acme Computer Corporation is a technology-based company that seeks to offer its customers the latest in technological innovation. Our products are created using the latest breakthroughs in computers and are designed by a team of top-notch experts.</P> <P>We are based in Acmetown, USA, and have offices in most major cities around the world. Our goal is to have a global approach to the future of computing. Have a look at our product catalog for some examples of our innovative approach.</P> </BODY> </HTML>
We have a heading and two paragraphs. Hmm. Let's see how our browser would render this. Have a look here. If you're using Netscape Navigator, Internet Explorer or any browser that has similar behavior, you will see a solid background that is probably gray or something equally disgusting and black text, probably something like Times or Garamond. The heading is probably in large, bold letters. Not much variety here.
Now try this: Replace the heading with the following.
<H1 STYLE="text-align: center; color: red; font: bold italic 150% sans-serif">Acme Computer Corp.</H1>
Now hold your horses. Before you take a look at what this did to your document, let's explain what's going on.
You just used the STYLE attribute for the first time (congratulations!). The STYLE attribute is a bit different from the other attributes we have seen so far since it can be used on practically every element that can be rendered. This means, more or less, the BODY element and everything it contains. As you might have guessed, the STYLE attribute specifies the preferred rendering style of the element when rendered on visual media. In English, that means you say what you want it to look like.
The value of the style attribute should be pretty self- explanatory. The example above can be broken into three parts:
text-align: centercolor: redfont: bold italic 150% sans-serif
Each of these consists of a word, a colon (:) and some
more stuff. The three parts are themselves separated by
semicolons.
These three things are called CSS declarations. They are the basic foundation of CSS syntax. The part before the colon is called a CSS property. CSS properties are a lot like HTML attributes. Each property, such as "text-align", accepts a specific type of values. These values are the stuff after the colon in each declaration.
So what does it mean? Well, it should be pretty simple to figure out! What you're telling the computer is to center the element's text, display it in red, and use a bold italic sans-serif font at 150% of the default size.
And what will happen? Well, it depends. It depends, mostly, on your browser. You see, CSS is pretty new stuff, and just when we were getting the HTML specification down pat and starting to get browsers to adopt it, out came CSS and ruined the whole thing by starting the joke all over again.
