Working with Universal Selectors
You might wonder if you can affect everything in a Web site — not just certain tags, but all tags? You bet. You can use a * to create a universal selector that has a global effect. Perhaps one day your boss comes in — your boss who has absolutely no taste or sense of design — and says: “Look. I think we should make our Web site stand out from the crowd, so let’s make the whole thing boldface! How about that?” “You mean all the headlines?” “No, I mean everything from the little captions to the text to the biggest headlines. Everything! What a great idea.”
Using Multiple Declarations
However, omitting the final semicolon not a great idea. You should simply always be in the habit of concluding each declaration with a semicolon. Leaving semicolons out of declaration lists is a very common cause of browser confusion and errors.
Using Attributes as Selectors
CSS2 defines some new selectors, including attribute selectors. Alas, this kind of selector is not supported by Internet Explorer (IE), but I’ll cover it. Being familiar with some CSS technologies that IE doesn’t support is still a good idea in case IE ever does support them.
The Simplest Attribute Selector
Attribute selectors come in several varieties. The simplest version merely looks for an attribute match and ignores the specifics of the attribute. In other words, in the following code, if a
tag has a class — any class at all — a match occurs. If you want any paragraph with the attribute class = in its tag to be rendered italic,
Building Your First Style Sheet
You’ve experimented with small examples — defining a single selector and then trying it out on an element or two in HTML code. Now it’s time to try a somewhat larger example to get a more accurate idea of the power of CSS. In this example, you create an HTML page, and then modify it via a CSS file. Finally, you apply two CSS files to the HTML, to see cascading, and specificity, in action.
Transforming a Word document into a Web page
Now you should have a simple Word document with a few paragraphs — one of which is italicized. You also have a couple of first-level heads and a couple of second-level heads. You now want to save this file as MyFirst.htm.
Creating an External Cascading Style Sheet
Now you build an external CSS file, reference it from within the Word. HTM file you just built, and use them! Important command to override the embedded styles with your external styles in the CSS file.
The importance of! Important
Try removing the! Important command from the. CSS file in Notepad. Press Alt+F+S to save the change to this file. Then use Alt+Tab to switch to IE, and then press F5 to refresh the browser (reloading the HTML to update what you see to the latest version). As you see, blue and centering took effect, but the serif Times New Roman font didn’t change to Arial as your external style specified. Why did some of your CSS files’ styles get applied, but not others? The answer is in the .HTM code for this page. In the embedded styles, locate the properties selector.
The importance of being closest
Recall the “closeness” rule in cascading styles: An embedded style takes precedence over an external style. The only way to override the embedded Times New Roman font is to employ the! Important command. Two other important points to remember about! Important. You must not precede it with a semicolon and you must use it for every property (a “property” in a CSS style has an effect on an “attribute” in the HTML code)
Everything must be important
Also, the following example turns the text blue, centers it (blue and centered don’t conflict with other styles), and increases the size to 18 points because of the! Important command — but fails to turn the font into Arial
Finally Comment
Load MyFirst.htm into IE to see which of these two external selectors’ dominates. The text turns maroon. Why? Because the for the second .CSS file is closer to the affected
Elements in the HTML code. The second .CSS file link appears lower in the header, therefore closer to the body of the document where the
Elements reside. If you switch the order of the elements in the header, the text turns blue.
