CSS Primer (Part 2)
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY { background: red; color: black }
H3 { font-family:Lucida;
font-style:normal; color:green }
-->
</STYLE>
</HEAD>
<BODY>
<H3><FONT COLOR="Blue">
This is not a love song!</FONT>
</H3>
</BODY>
The answer: Blue. That's
because the font color instructions are closer to the affected text than the
CSS-controlled H3. Proximity to the affected content always wins.
Bend the rules
The rules of priority and inheritance make good sense, but there are bound to
be times when you want to override them and make a parent or warring style win.
To do that, just add ! important to the end of the style, and it'll whip any
competition:
H1 {color: teal ! important; }
Distinguishing DIV from SPAN
As you dig into style sheets, you'll notice these two unfamiliar tags appear
frequently. SPAN was invented solely so CSS users would have a nondestructive
place to hang their attributes; DIV has existed for a while. It's used to
demarcate the presence of any kind of new object on a page. The biggest
difference between them is that DIV is a block-level element and implies a line
break, whereas SPAN does not affect the flow of the page.
Turn off underlining
Most HTML authors have at some point wondered how to turn off hyperlink
underlining. Until now, that's been impossible. With style sheets, it's as easy
as attaching "text-decoration: none" to an Anchor style, like this:
A:link { color: cornsilk;
text-decoration: none}
The thin blue line
To add a touch of design to an otherwise text-heavy page, surround a few
paragraphs with a thin, color border to set them off. To add this to all your
paragraphs, create a style in your document header (see example below) and then
just use your normal <P> tags.
P { border-style:solid;
border-width:thin;
border-color:blue; }
Nail it down
In HTML, the position of any object--text, graphic, or multimedia component--is
relative to the rest of the page's structure. If you add a paragraph to your
intro, your prize graphic could end up below the fold--out of eyesight on the
first page view. CSS changes all that, not just by letting you state every
object's exact location (in pixels, inches, or points), but also by letting you
hammer it into place for good. Give an object an absolute position, and it will
be there, no matter what other text or graphics are competing for that spot.
Here's how to do this:
.OurLogo { position:absolute;
left:30px;
top:10px;
width:40px;
height:30px;
color:red;
font-size:12pt;
background: black;
border:1pt red dotted; }
So if you can nail down objects, what happens
when you try and put two objects in one place on the screen? Objects simply
stack up on top of one another quite gracefully. The default stacking order
says that the first item laid down will land on the bottom of the pile, and the
last will be on top. But you can change the stacking order by altering the
"z-index" attribute as follows:
<DIV CLASS="pile" ID="image1" STYLE="z-index: 3">
<DIV CLASS="heap" ID="image2" STYLE="z-index: 2">
In this example, image1 is
on the bottom and image2 is on the top. You can use any integer (positive or
negative) for your z-index, but the highest number will always come out on the
bottom and the lowest on top. Try letting a few objects overlap just slightly
for some fascinating design effects.
Let your light shine through
Stacked objects can look great, if you plan properly, because your objects'
native transparencies are respected. Letters can be seen through transparent
.GIFs and vice versa. If that's not exactly what you had in mind, don't forget
you also have control over the background properties for every rule. These
backgrounds are all valid:
H1 { background-color: #000080; }
.OurLogo { background-color: transparent; }
BODY { background-image: url(/images/foo.gif); }
Magic static backgrounds
When a page scrolls, everything on that page scrolls with it, right? Not
necessarily. With CSS, you simply tag the fixed argument to an object to make
that object hold its position on the page, even as text and images scroll past
or over it. Here's how:
BODY { background : cyan url(dali.jpg) fixed }
NOTE: This feature is available in IE 4 and later only.
It's the "fixed" part that nails things down. This, of course,
will work with anything that takes a background.
Don't break older browsers
CSS was designed to integrate seamlessly with existing HTML, so it won't break
old browsers. Still, it's possible to create CSS pages that look terrible in
older browsers. The trick to is to build your pages in straight HTML using a
3.0 or earlier browser. Then apply your styles to that document and fine-tune
it. Older browsers will ignore new tags they don't understand, and the CSS
syntax will override the existing HTML, as long as you apply your styles in the
right order.
<< Previous Beginners Article |
Next Beginners Article >>
Beginners Main Menu 1 to 7 |
Beginners Main Menu 8 to 14 |
Beginners Main Menu 15 to 21
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
