Previous Site Layout


Current Status

Obsession

Watching
You're Beautiful
Liar Game 2
Autumn's Concerto

Playing
World of Warcraft

WOW Character
Nick: Wishix
Lv: 80
Race: Blood Elf
Class: Priest
Guild: Intoxicated
Server: Thaurissan

Nick:Wishie
Lv: 80
Race: Undead
Class: Dark Knight
Guild: Singabombz
Server: Thaurissan


Affiliates
-- Evirruka
-- Pandalene

Apply?

Links





:: CSS INTERMEDIATE TUTORIAL ::



Grouping and Nesting

Grouping

You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.

For example, if you have something like: 
h2 {
	color: red;
}

.thisOtherClass {
	color: red;
}

.yetAnotherClass {
	color: red;
}
You could make it: 
h2, .thisOtherClass, .yetAnotherClass {
	color: red;
}

Nesting

If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example: 
#top {
	background-color: #ccc;
	padding: 1em
}

#top h1 {
	color: #ff0;
}

#top p {
	color: red;
	font-weight: bold;
}
Removes the need for classes or ID's if it is applied to HTML that looks something like this: 
<div id="top">

	<h1>Chocolate curry</h1>

	<p>This is my recipe for making curry purely with
 chocolate</p>

	<p>Mmm mm mmmmm</p>

</div>


This is because, by separating selectors with spaces, we are saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.

This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.