Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials CSS Primer
Your Ad Here

CSS Primer

Browse Pages: << < 1  2  3  4  > >>

<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:



Author's URL: Rob Derby
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: << < 1  2  3  4  > >>
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "CSS Primer"

Only registered users can write comment

No comments yet...