Only one file to change? Help I'm confusted

[ebaobao]

Hello,
I'm trying to learn CSS at the same time while I'm changing the layout and colors of my website. I've already downloaded the developers tool for firefox and it helps. My question is, can all the changes for size and font color be done using that single css file /includes/templates/MYCUSTOM/css/stylesheet.css? or are there are other places that can also affect the change.

I get confused because some classes in the CSS file will overwrite some other ones and I'm not sure which class to change. For exaple, if I put the font size in

.sideBoxContent class

it will change the category font size, which is what I want. But then when I change the

.leftBoxContainer class

it will also change the size

So how do we know which one to change?

One final questions which attributes should we look at to do the change. When I use the developers tool it shows in the following order from top to bottom:

Attributes, Position, Other, Ancestors, Children so which one are we suppose to look at to do the changes?

Thanks for the help to try to understand this.

[afo]

Yes, there's only one file to change, but you can have multiple stylesheets if you like.

What class to change depends on what you want to do. If I remember correctly, .leftBoxContainer is above .sideBoxContent, so if you change leftBoxContainer, more items may be effected than if you change .sideBoxContent.

Have you checked out http://www.w3schools.com/default.asp for info on working with CSS?

[clydejones]

CSS means cascading style sheet

so the structure for the side boxes would look like this:

#navColumnOne
#navColumnOneWrapper
.leftBoxContainer
.leftBoxHeading
.sideBoxContent

#navColumnTwo
#navColumnTwoWrapper
.rightBoxContainer
.rightBoxHeading
.sideBoxContent

This structure means that if you set the font-size at the
#navColumnOne, #navColumnTwo

That setting will cascade throughout the column (i.e. if the font-size is set at 10px in #navColumnOne, #navColumnTwo, then the entire column will have a font-size of 10px

You can change the cascade effect by changing the font-size at any point in the structure.

If as you indicate you want to change the font-size for only the content of one of the sideboxes then you need to add and extra definition to the structure,
for example to change the font-size for the categories sidebox, you would add a new declaration to the stylesheet #categoriesContent and change the font-size only for this declaration.

As AFO pointed out W3Schools is a great resource to use.

SitePoint also has a very good CSS reference section.