untitled

(John Hannent) #1
* {font-weight: bold;}

An asterisk, by itself, is a universal selector. It means, “Do this to all elements
in the document.” Here you’re assigning the font-weight property a bold
value for every element. This is obviously a powerful, yet indiscriminate,
force — not unlike the boss himself.

Many people avoid universal selectors because they can have unintended
side effects involving inheritance. (You probably don’t want hyperlinks to
inherit universal font styles, for example — hyperlinks need to stand out
from surrounding text.) However, if you’ve got the nerve, go ahead and
enforce some mass-rule on your site and try to manage any side effects as
they pop up.

Using Multiple Declarations .........................................................................


Remember grouping? Where you specify more than one selector, followed by
a style that you want all those elements to share, like this:

h1, h2, h3, h4, {font-weight: bold;}

Well, you can also use multiple declarations (the property/value pairs inside
the braces):

h1 {font-weight: bold; font: 18px Courier; color: green;}

The thing to remember when using multiple declarations is to separate them
with semicolons. Spaces are simply ignored by CSS here, so you can’t count
on a space as a way of separating declarations from each other.

Many computer book authors don’t bother with the final semicolon, leaving it
off just before the closing brace (}) like this:

h1 {font-weight: bold}

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 causeof browser
confusion and errors. Here’s an example where you intend to display H1 heads
as bold, green, 28 point Arial:

<html>
<head>
<style>

Chapter 3: Up and Running with Selectors 49

Free download pdf