CSS syntax question

[ThePunisher1]

body 
{
  font-size:16pt;
  font-family:times new roman;
  color:white;
  line-height:30pt;
  margin-left:20px;
  margin-right:20px;
  background-color:black;
}

Ok, my main question is about the selector attribute (body). I wanted to ask what are you able to write there, I understand you can do things like div, id, class, etc, but am still somewhat confused as to what can actually be wrote there, and how it would then be used in a HTML document? (eg, changing body in the CSS file to cheesecake, would putting the tag <cheesecake></cheesecake> work in the HTML file if it is referencing from the CSS file?)

Thanks again.

[turb_]

Look into CSS selectors.

Basically if you type a bareword, it selects a tag, eg.

a

selects any <a> tags

Barewords prefixed with dots select classes:

.foobar

Selects <a class="foobar" href="lol">, <div class="foobar">, but NOT <p class="fizzboo">

Prefixing with hashes selects an ID.

There's way more to it than that, but that should set you up with the basics.

[KmartSqrl]

The other main useful thing is that if you chain selectors with a space as the separator you can make things a bit more specific and keep your HTML cleaner.

For example (much easier to show this than to try to explain it), say I've got a sidebar area where I want my h2 tags to look different than I want them to look on the rest of the site. I can just do this:

#sidebar h2
{
     font-size:whatever;
}

Which will target any h2 tag that is found within a tag (most likely a div) that has the id attribute set to "sidebar".

You can also separate selectors with a comma to apply the same rules to multiple selectors, so I could do this if I wanted all the h# tags on a page to be a specific font that was different from the body font:

h1, h2, h3, h4, h5, h6
{
     font-family:whatever;
}

[snake logan]

For tags with attributes you have a bunch of things you can do.

This covers all inputs:

input
{
     height:10px;
}

This covers all text inputs:

input[type=text]
{
     height:10px;
}

This covers all submit inputs, only when the mouse is over them:

input[type=submit]:focus
{
     height:10px;
}

There are a bunch more but my mind is blank at the moment.

[Almost Dawn]

This covers all <a> that you hover over that are children of <li>s that are the first child in their <ul> and a direct descendant, so it doesn't cover <ul><li><ul><li> only <ul><li>.

ul > li:first-child a:hover{
    color:#931111;
}

[mdakin]

What does > in css do?

[turb_]

Child selector

[andersonmat]

Technically it doesn't matter, you can do:

.parent .child .grandchild{

}

or

.parent > .child > .grandchild{

}

[Skorpy]

It does matter actually.
Child selector selects only the children, not the grandchildren.

[wutanggrenad]

[QUOTE=Skorpy;22061191]It does matter actually.
Child selector selects only the children, not the grandchildren.[/QUOTE]

This is that little bit of information that most people don't realize is possible until 50 projects in, listen to this man