Showing posts with label Advanced. Show all posts
Showing posts with label Advanced. Show all posts

Friday, August 26, 2011

Advanced CSS3 1: Grouping Selectors

In CSS you can group selectors together to save time and become more efficient.
For example, before you would have to type out all this:
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

But when you group selectors it becomes this:
h1,h2,p
{
color:green;
}
As you can see this is far more efficent and easier to read.

It is also possible to apply a style for a selector within a selector.
In the following example, One style is specified for all p elements, a second style is specified for all elements with class="marked", and a third is specified for p elements with class="marked":
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}