New messages Members Forum rules Search
  • Page 1 of 1
  • 1
Forum moderator: kostova, Brazen  
uCoz Support Forum by uCozers » Coding » CSS » CSS Selectors & Hierarchy: Advanced Tutorial (sml[tutorial]A tutorial describing in depth css techniques.)
CSS Selectors & Hierarchy: Advanced Tutorial
Was this tutorial good?
1.Yes[ 5 ][100.00%]
2.No[ 0 ][0.00%]
3.I don't know xhtml/css, so it didn't help me.[ 0 ][0.00%]
Answers total: 5
kostovaDate: Thursday, 2009 September 24, 6:26 AM | Message # 1
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
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.

 
YoshoDate: Friday, 2009 September 25, 5:59 AM | Message # 2
Font size: A | A |
Sergeant
Group: User
Message: 39
[ ]
Offline
this tutorial definitly gave me better understanding of css so thank you!
 
Miss_StephxxDate: Friday, 2009 September 25, 11:55 PM | Message # 3
Font size: A | A |
Lieutenant
Group: uCozer
Message: 56
[ ]
Offline
nice tut.

 
AltricDate: Saturday, 2009 September 26, 5:09 PM | Message # 4
Font size: A | A |
Major
Group: uCozer
Message: 81
[ ]
Offline
This is a very nice tutorial kostova, just next time make sure you do not have a poll in it. Users can offer there input in the forums by posting. Polls are not allowed in Tutorials.

"When you get frustrated, just ignore it and keep on enjoying life."
 
BrazenDate: Saturday, 2009 September 26, 10:01 PM | Message # 5
Font size: A | A |
Colonel
Group: Administrator
Message: 304
[ ]
Offline
Altric, I think from now on we will be requiring to include polls in the tutorials since jackass started this idea.

LOL With Us! l Game Blog l 3D Autos

"knowledge without wisdom is curse" Alex Seb

 
jackassDate: Saturday, 2009 September 26, 10:14 PM | Message # 6
Font size: A | A |
Major general
Group: Administrator
Message: 433
[ ]
Offline
Yes, I think it's useful, because then we can see if this tutorial was useful for other users smile

 
uCoz Support Forum by uCozers » Coding » CSS » CSS Selectors & Hierarchy: Advanced Tutorial (sml[tutorial]A tutorial describing in depth css techniques.)
  • Page 1 of 1
  • 1
Search:


Copyrights uCozers 2009 - 2024 To TOP
Refresh Smileys Manager