What does the following code do in CSS?

Question

I know nothing of CSS but am trying to figure out the meaning of this syntax:

body {
    margin: 0;
    font-family: "Trebuchet MS", Helvetica;
    background: #FFFFFF;
    color: #FE6600;
    overflow-x: hidden;
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 45px;
    width: 100%;
    min-height: 372px;
}

body > *:not(.toolbar) {
    /*display: block;*/
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 45px;
    width: 100%;
    min-height: 372px;
}

Answer 1

No quick answer can tell you what CSS are all about....

That's quite a vast subject !!

have a look at :

http://www.w3.org/Style/CSS/learning

Just a remark : returns are allowed and even recommended after semicolons, everything will then read much better...

Answer 2

Are you talking about the :not pseudo-selector? It does what it sounds like it's going to select all elements from the current set which do not match this selector.

It's CSS3 though and not widely enough supported I should say.

Good article here.

---

edit, your specific example body > *:not(.toolbar) matches all (*) the direct children (>) of body which are not instances of the toolbar class (:not(.toolbar))

Answer 3

I'll assume you mean this portion:

body > :not(.toolbar)

This uses both the :not selector and the > child selector.

As far as I can tell, this would apply the following css to the body's children except for the ".toolbar" item

Answer 4

 body > *:not(.toolbar)

Applies the given styles to "all direct children of the body element that do not have the class name 'toolbar'"

As of now, IE6/7 will not render these styles correctly.

Answer 5

I'm not sure it does anything, really.

The first style sets the default body rules (top-left position, hide any overflow, take up the whole width, min height 372px, Trebuchet font, black b/g, orange f/g, etc) (although "margin: 0" is repeated, for some reason).

The second rule seems to be trying to set an exception that applies to all child tags of the body element except those with a class of "toolbar". The trouble is that all of its attributes are duplicates of the body tag's attributes, so I'm not sure it'll have any effect. It looks like there's a mangled comment in there as well.

Answer 6

CSS is a part of DHTML.

I also recommended siukurnin advice.

It's better to start CSS with

http://www.w3schools.com/

Answer 7

Well, my fellow users have answered your question from the point of view of what each CSS instruction does, but i'm not sure what the author of that code is trying to accomplish.

It seems to do nothing special in a really twisted kind of way. Not the most canonical piece of code i've seen, and I wouldn't recommend it to anyone :)

Answer 8

margin: 0;

This line means that the amount of space reserved as a margin around the body will be zero (in any units). So adjacent boxes will be only the distance away as their own margin settings, if any.

I'll leave the other lines to other answers.