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;
}

10 comments:

  1. best part is he does most of the coding for me, i just have to edit it slightly and i never have to worry about fixing any of the lines

    ReplyDelete
  2. Nice on, another neat tutorial, which is great and easy to follow :D

    ReplyDelete
  3. Awesome, saves time, and makes it simpler.

    ReplyDelete
  4. mmm now I get it, I used to get a bunch of troubles coding this stuff

    ReplyDelete
  5. Coding is a pain. Thanks for the help.

    ReplyDelete
  6. cheers murder, learning a bit at a time is ace :D

    ReplyDelete
  7. I use this when modifying userstyles to suit my taste.

    ReplyDelete
  8. I'm checking in again to see if you've updated

    ReplyDelete