# Solved: the html <style> tag, syntax and semantics of CSS classes



## andynic (May 25, 2007)

Hi,

Once again, newbie here.

I'm having trouble with classes -- about finding information concerning the proper way to code and use them. Perhaps someone can lead me to a good source, preferably on the web. Up till now, I've been relying on www.w3.org, but the examples are sketchy.

I may well have the wrong impression of what a "class" is meant to be in html. I thought it would be possible to make a sort of "library" of classes in the part of an html file like this:

Geof_pt6.html

Then having done that, in various places in the of the file I could refer to a class without having to explicitly code it using class="className". What I mean is doing things like the following:




.
.
.

Sometimes it works, sometimes the browser ignores the directive.
I'm certain I must have a misconception about both the correct syntax and the intended semantics of classes. Can someone please shed some light for me? What I need is to understand the intended purpose of classes from a programmer's viewppoint and a tutorial about using the <style> tag, coding a class, and using the class="className" attibute.

Thanks for your help,
Andy Nicastro


----------



## JohnWill (Oct 19, 2002)

I'll move you over to *web development*, you'll probably get better response there.


----------



## amanxman (Mar 28, 2006)

Hey,

Basically a class is a way of assocating an element on the page (in the html) to a style (in the css), so yes, you are on the right lines.

*SOME REAL BASICS:*

*Define specific element*
*In your HTML:*









*And then in your CSS document:*

img.header
{
border: 1px solid #000;
margin: 10px;
}

So what we are doing is applying the style of the border and margin to any image element classed 'header'. For example.

*Define Area*
You could then use it to define an area, and then any element WITHIN that area takes on the styles:

*HTML*

<img src...>

*CSS*
div.header
{
border: 1px solid white
}

div.header img
{
border: 1px solid red;
margin: 10px;
}

Here we end up with the whole div box having the wrhite border, and then any image inside that div box having a red border.

*Repeating*
A class (such as ) can repeat on the same page... i.e. you can have many blaa boxes on the same html page.

A id (such as ) cannot be repeated on the same page (well, they can, but it's not valid css). I.e. you use these to define main layout areas.

*Correct Referencing*
You'll find that if browsers are ignoring them sometimes, it'll be that they aren't correctly referenced - the way in which they are defined in the CSS is important, for example:


```
img.header
{
}
```
will give style to <img class="header" src...>

but wont give style to

```
<div class="header">
<img .....>
</div>
```
And


```
div.header img
```
Won't give class to <img class="header" src...>

But will to

```
<div class="header">
<img .....>
</div>
```
*External Styles*
Also, I'd recommend you look at using external style sheets, rather than putting your styles into the head of your html. It's a much more efficient and user friendly method...

*Where next*
This, and classes, and ids and attributes is all on this great website www.w3schools.com - they have some great tutorials...

This is the start to the css one:

http://www.w3schools.com/css/default.asp

Work through that and it'll answer all your queries!

Also if you have a specific bit of code that isn't working/you want to do something with, post that and where it's not working, and we can help out too...

Hope that helps somehow!


----------



## andynic (May 25, 2007)

Hi John,
Many thanks for your reply -- very helpful.
Will look into the w3 link and follow the tutorials.
Andy


----------



## brandmantra (Dec 1, 2008)

w3school is very helpful. You can check the google with "html tutorials".


----------



## andynic (May 25, 2007)

Hi Brandmatra,
Thanks very much. I have found the w3school tutorial on style sheets. Very helpful.
Thanks,
Andy


----------

