I'm new to CSS and need some help understanding it

[eaglepi]

I am trying my hardest to learn CSS, I use Topstyle 3.0 and have read and read but the one thing I can't seem to understand is when I look at a website and it's source code how can I tell what the classe and elements. I understand how Topstyle works somewhat but when looking at a website or a template that I want to add CSS to I have no clue how to tell what is what...

can anyone either direct me to a dummies site or explain in very basic terms.

[stever]

then I look at a website and it's source code how can I tell what the classe and elements

A class will look like this:

<div class="lookatme">something</div>

That means it belongs to a class of objects having those properties. In the CSS the class might look like this:

.lookatme {
color: #f00;
}

while an ID will look like this

<div id="lookatme">something</div>

That means there is one thing on the page called "lookatme". In the CSS it would look like this:

#lookatme {
color: #f00;
}

Finally, all divs on the page (or site) could be given the same properties by doing this:

div {
background-color: #fafafa;
}

when looking at a website or a template that I want to add CSS to I have no clue how to tell what is what...

The easiest way to learn is to do what I just did above on a fresh page and look at the different changes. Add a div with text to a blank html page and then try changing the properties in Topstyle. Now add another div with an ID and one with a class and see if you can make them look different from the first one...

Have a look in the CSS Library here - there is a lot of good information.

[eaglepi]

Thank you very much, I think I understand it now.....

[jetboy_70]

Download Mozilla Firefox, and add on the Web Developer plug-in which can also be found on the Mozilla site.

Once you've got that running, go to a live site of your choice, open the CSS menu on the Web Developer toolbar, and select Edit CSS. This will open all the CSS code for that page in a sidebar.

Now you can edit the CSS and see your changes applied live to the site in your browser! If you mess it up beyond repair you can just reload the original styles and start again.

If I was learning to use CSS from scratch, this is the approach I'd take.