CSS Resource Help

HenryWard

Hey guys,

So, I'm trying to edit some CSS and I'm in a bit over my head, so I'm hoping you could tell me where to look to find the instruction I need. I have a basic understanding of what CSS is and how it does, but I'm being thrown a bunch of stuff with the tag #xg; things like

#xg, .xg_headerbg {
background-repeat: repeat-x;
}

I just haven't seen this before, and some web searches have failed to turn up where to look to deal with it. Someone help a noob out?

If you know any general lists/libraries of css selectors, ideally with their possible properties and values, that would also be invaluable.

Thanks,

-Henry

flatlinegraphics

#whatever is for an element named whatever. .something is a class name.
ex:
<div id="whatever" class="something">
commas separate ids and classes that have the same property.
#whatever, .something {color:red}
will make the text color of any element with id "whatever" or class "something" red.
functionally, id's and classes are very similar, tho you can only use an id on a single element on a page.

past that, start here:
http://www.w3schools.com/

get firefox and the webdev toolbar
https://addons.mozilla.org/en-US/firefox/addon/60
which will allow you to edit css live on a page.

Heir

# denotes an id.
. denotes a class.

In the case that you provided, background-repeat: repeat-x means that any background image would only be repeated width-wise.

Afty

HenryWard wrote: »

Hey guys,

So, I'm trying to edit some CSS and I'm in a bit over my head, so I'm hoping you could tell me where to look to find the instruction I need. I have a basic understanding of what CSS is and how it does, but I'm being thrown a bunch of stuff with the tag #xg; things like

#xg, .xg_headerbg {
background-repeat: repeat-x;
}

I just haven't seen this before, and some web searches have failed to turn up where to look to deal with it. Someone help a noob out?

If you know any general lists/libraries of css selectors, ideally with their possible properties and values, that would also be invaluable.

Thanks,

-Henry

#xg, .xg_headerbg {
background-repeat: repeat-x;
}

This refers to an element with a class of "xg_headerbg" that is inside of an element with an ID of "xg"

This elements can be anything but are most likely <div>.

they could have written

div#xg div.xg_headerbg{
background-repeat: repeat-x;
}

SeñorAmor

Afty wrote: »

#xg, .xg_headerbg {
background-repeat: repeat-x;
}

This refers to an element with a class of "xg_headerbg" that is inside of an element with an ID of "xg"

This elements can be anything but are most likely <div>.

they could have written

div#xg div.xg_headerbg{
background-repeat: repeat-x;
}

Incorrect. The inclusion of the comma in the first CSS declaration means the style applies to both elements. The omission of the comma in your version refers only to an element with a class of "xg_headerbg" that is within an element with an id of "xg".

Afty

SeñorAmor wrote: »

Afty wrote: »

#xg, .xg_headerbg {
background-repeat: repeat-x;
}

This refers to an element with a class of "xg_headerbg" that is inside of an element with an ID of "xg"

This elements can be anything but are most likely <div>.

they could have written

div#xg div.xg_headerbg{
background-repeat: repeat-x;
}

Incorrect. The inclusion of the comma in the first CSS declaration means the style applies to both elements. The omission of the comma in your version refers only to an element with a class of "xg_headerbg" that is within an element with an id of "xg".

Whoops !

I misread it initially.

I usually stack my declarations as following and overlooked it.

#xg,
.xg_blahblah {

}

eyao

if you're working with CSS, you'll eventually need to go to this page - curse you IE!!:

http://www.positioniseverything.net/explorer.html

Also, the firebug tool for Firefox I found useful for CSS as well (as well as js)

https://addons.mozilla.org/en-US/firefox/addon/1843