Can Someone please get real basic with me

[eaglepi]

I know very little about CSS I have read and read until I am blue in the face but it seems I can't quite understand parts of it. People have tried to help but as happens so many time in new groups many try to help but talk way over our heads. Here is my problem.

Lets say I have a website that has 1 page, it has a header,footer and body it also has left and right sides where I have text in sections some are menus and others are just text,maybe like a new update or something like that.

How can I pick any one of these text areas and in CSS define what font,size,color etc it will be without affecting anything else.

If I was to build my CSS from the start I think I know the answer so I'll ask a second question, when I read a CSS alread done is there a easy way to identify what code belongs to what parts of the web site.

[Robin_reala]

Classes and IDs are the best way to target something specific in your page. For example, take your menu. On the container element in the HTML you would specify a new attribute of say id="menu". It doesn't matter what you call it, but 'menu' is simple and to the point. In your CSS you could target just that section of page:

#menu {
 color: red;
}

Which would turn all the text inside your #menu element red. Of course, you can target subelements as well:

#menu div {
 border: 1px solid blue;
}

which will give any 'div' elements inside your element with id="menu" a 1 pixel wide solid blue border.

IDs can only be defined once in a page. Say you had a few elements scattered over the page that you want to style in the same way (for example, a link to an external page). In your HTML you'd add in a class attribute on each of these elements (class="external"). In your CSS you'd then have something like:

a.external {
 font-weight: bold;
}

The '.' indicates class. You could leave off the 'a' part of the selector, but you could for example have class="external" on an image. This would target specifically 'a' elements with class="external".

Hope this helps...

[eaglepi]

Thanks Robin,

It's starting to make sence now, Thanks for the walk thru it really did help...

[createErrorMsg]

when I read a CSS alread done is there a easy way to identify what code belongs to what parts of the web site

What Robin just told you applies to this question (in most cases), as well.

If you look in the HTML source code, most pages that use CSS for styling will have HTML elements with ID and CLASS names in them like the elements in this small snippet...

<div id="content">
<p class="maintext">Lorem ipsum dolor sit amet.</p>
<p class="update">Update: Lorem ipsum fugit alwa.</p>
</div>

To see what styles apply to these elements you would look in the stylesheet for occurances of those ID and CLASS names (content, maintext, and update). In the case of the ID=content, you would look for a hash-mark followed by "content"...

#content {
PROPERTY:VALUE;
}

In the case of the CLASSes on the <p>aragraph tags, you would look for dots followed by the names...

.maintext{
PROPERTY:VALUE;
}
.update{
PROPERTY:VALUE;
}

When you find those style declarations, you've found the CSS that applies to those elements.

Things can get slightly more complicated than this, of course. For instance, say I was writing a stylesheet where I wanted all of the <p>aragraphs in the above div (id="content") to display at a font size 12px, but I want the text in the "maintext" paragraph to be blue, and text in the "update" paragraph to be red and bold. Rather than add the 12px font size to the CSS for each class name, I might do something like this...

#content p {
font-size: 12px;
}

#content p.maintext {
color: blue;
}

#content p.update {
color:red;
font-weight:bold;
}

The first rule declaration says that all <p>aragraphs in the "content" element (here, a div) will have a 12px font, so this applies to both <p>aragraphs, even though they have different classes. The second and third rule decarations are the specifics for each CLASSed <p>aragraph. Note that I could have gotten the same effect with this...

.maintext{
color:blue;
}
.update{
color:red;
font-weight:bold;
}

The extra stuff in the first example shows the full and specific context of the element I am styling. I showed both here so you would know several different things to look out for when studying your stylesheet.

cEM