CSS Hierarchy - Advanced Tutorial:
* while reading this article, in order to fully understand you must have knowledge of html/xhtml and minor css This is a response to Altric's post, I'm expanding on his tutorial basically.
We begin by summarizing some key points in the basics of xhtml and css.
* you need to use all lowercases in your tags (i.e. h1 - correct; H1 - incorrect)
* elements need to be properly nested - (ex: easter egg toy - one egg has another egg in it )
* single elements such as: br - img, etc are closed within the first tag (i.e.
)
* ID's are unique, can only be used once - #
* Classes can be reused - .
Here's the basic structure we're using for stylizing an xhtml orientated document. It's using div's instead of tables; a fully functional and basic layout - including fixed width and centering.
Remember, we're going for standard compliant! Validity in all browsers.
Code
<div id="container">
__<div id="header">
____<h1><a>heysupp's tuts</a></h1>
__</div>
__<div id="foundation">
____
<h1>My First Blog.</h1> <br/>Here's my
______<a href="/" title="website!">website!</a> It's a <b>tutorial</b> site for <i>you</i> and by <span class="ucozers"><b>U</b>cozers.</span><br/>
______Enjoy!
____</p>
____<div id="footer">copywrite (c) heysupp 2009</div>
__</div>
</div>
Okay, so maybe you don't fully understand - but that's okay. At least you're reading it!
Now we’re going to explain stylizing. CSS, what you came here to read. Oh boy! Notice how some of the html in this document has id’s and classes applied to it. That’s for customization.
Code
body {font-family:arial,verdana;font-size:10px;text-align:center;}
#container {margin:0 auto;width:924px;}
#header {padding:1.5em;display:block;border-bottom:1px #333333 solid;}
h1 {margin-top:0;}
#foundation {font-size:11px;padding-left:12px;}
#footer {padding-left:10px;padding-top:8px;padding-bottom:8px;background:#333333;}
That's a little better. We can do better than this though..
It's not very specific, so let's start specifying the content we want to stand out!
We want the site logo(heysupp's tuts) to be different than the blog title(My First Blog).
Code
#header h1 {color:#ff0000;}
#header h1 a {text-decoration:underline;}
The difference here from #foundation's My First Blog
is that the #header's h1 will gain the #ff0000(color:red) attribute. Because we're targeting that h1 by using this code:
#header h1 {attribute:value;}
It will only change that specific h1 and skip all other h1's. Also notice I've added this:
#header h1 a {text-decoration:underline;}
That means the #header's link tag will inherit a text underline only, and skip #foundation's link tag. But there's still one class element we left out, .ucozers; inside the span element, also inside div#foundation.
Code
.ucozers {font-weight:bold;}
And we're done! The finished stylesheet should look like this:
Code
body {font-family:arial,verdana;font-size:10px;text-align:center;}
#container {margin:0 auto;width:924px;}
#header {padding:1.5em;display:block;border-bottom:1px #333333 solid;}
h1 {margin-top:0;}
#header h1 {color:#ff0000;}
#header h1 a {text-decoration:underline;}
#foundation {font-size:11px;padding-left:12px;}
#footer {padding-left:10px;padding-top:8px;padding-bottom:8px;background:#333333;}
.ucozers {font-weight:bold;}
I know it's not much, but I began to realize that my text limit is coming up lol. I've added tabbing ( _ ) since ucoz doesn't provide us with that. It helps direction to what goes where and what closes.
Hope you liked it.
