homepage Welcome to WebmasterWorld Guest from 54.196.189.229
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Defining Classes in CSS
What's the difference?
pageoneresults




msg:1188026
 6:55 pm on Apr 17, 2002 (gmt 0)

When defining the classes for CSS, what is the difference between defining them like this...

.p13px

or like this...

p.p13px

Also, is there an order that the properties need to be in for the CSS to be Perfect? Meaning, does it matter if the properties are in alphabetical order? Hierarchal order? Etc...

P.S. I also found that your classes cannot start with a number. They must start with an alpha character or the W3C CSS validator shows errors. For example...

This is wrong: .13px (returns errors)

This is right: .p13px (validates)

 

papabaer




msg:1188027
 7:02 pm on Apr 17, 2002 (gmt 0)

.p13px is a simple "general" class statement, while p.p13px is a class contained to the <p> element.

Other than "hover" for anchor psuedo-classes, I don't think order really matters.

Just from personal personal preference, I like to work the "DOM" on down... Define body and other page elements first, then create general classes and final address unique #id's.

The only caution is to take care to not overide a previous style.

(edited by: papabaer at 7:08 pm (utc) on April 17, 2002)

pageoneresults




msg:1188028
 7:06 pm on Apr 17, 2002 (gmt 0)

Thanks papabaer! Can you show me an example of how you would use the general class statement as opposed to <span> or p.?

mivox




msg:1188029
 7:11 pm on Apr 17, 2002 (gmt 0)

...and while you're at it, what's the major functional difference between a .class and an #id? (looking to turn this thread into a "flagger" too... ;) )

papabaer




msg:1188030
 7:17 pm on Apr 17, 2002 (gmt 0)

.xg could represent a class that defines text-size, weight and color, that could be applied anywhere...

.xg{
font:10px sans-serif bold;
color:#600;
background:#ffc;
}

Could be applied: <p class="xg">styled paragraph</> <td class="xg">styled table cell</td>, <ul class="xg">styled list</ul> and so on...

Of course, if ALL of your paragraphs, table cells and unordered lists were to use the same "styles" without exception, then you could declare the following:

p,td,ul{
font:10px sans-serif bold;
color:#600;
background:#ffc;
}

With the above example, the listed elements are effectively "styled" without the need for a "class" statement with each occurrence:<p>already defined style</p>, <td>yep, you guessed it, already defined style</td> and <ul>Ditto - again!</ul>. This is helpful if you are attempting a uniform "style theme".

If only "select" paragraphs, table cells, and un-ordered lists were to share a common "style," then this might serve:

p,td,ul.img{
font:10px sans-serif bold;
color:#600;
background:#ffc;
padding:0 5px;
}

Obviously, the MOST efficient is the former, "general" class statement.

Defining .class by element would be most useful where you use descriptive nomenclature:

p,td.red{
color:#600;
background:#ffc;
padding:0 5px;
}

h1,h2.red{
color:#fff;
background:#600;
padding:3px;
margin-bottom:0;
}

ol,ul.red{
margin-right:0;
color:red;
background:#ccc;
border:3px solid red;
}

Then apply your "element defined" classes accordingly:

<td class="red">like it says!</td>

<ul class="red">same... but different!</ul>

<h2 class="red">Ditto on that!</h2>

Spread the Love! ;)

(edited by: papabaer at 9:08 pm (utc) on April 17, 2002)

papabaer




msg:1188031
 7:19 pm on Apr 17, 2002 (gmt 0)

A class... can be applied anywhere. A CSS #id is a unique, one of a kind, don't even THINK about usin' me anywhere else (on THIS page!), "style statement."

The #id & CSS can be used to create predefined "templates" for use throughout your site.

For instance:

#header{
position:absolute;
top:0;
left:0;
width:468px;
height:60px;
}

can be used to define a div for use on EACH page desired...

If you really want to get efficient (at NN4's loss) try this for "file conservation":

#header{
position:absolute;
top:0;
left:0;
width:468px;
height:60px;
background-image:url (images/my-banner-logo.gif) no-repeat;
}

Then...
<body>
<div id="header></div>
</body>

Try using THAT on 100plus pages and eliminating <div><img src="images/my-banner-logo.gif" width="468" height="60" alt="my universal banner that I stick at the top of every bloomin' page!" /></div>

Make that puppy give ya all it's got! ;)

You CAN define as a class also:

.header{
position:absolute;
top:0;
left:0;
width:468px;
height:60px;
background-image:url (images/my-banner-logo.gif) no-repeat;
}

It's just that using a #id has the advantage of being "unique" allowing for additional "scripting" (javascript/dhtml) and "construction-clarafication" i.e., once you've used it on a page... you can move on to new territory! :)

(edited by: papabaer at 8:52 pm (utc) on April 17, 2002)

DrDoc




msg:1188032
 7:20 pm on Apr 17, 2002 (gmt 0)

General class statement

.p13px { font: 13px Verdana; }

Can be used for any tag.
<a class="p13px">
<p class="p13px">
<div class="p13px">
<td class="p13px">

<P> specific CSS

p { font: 13px Verdana; }

Applies to all <P> tags.

<P> specific class

p.p13px { font: 13px Verdana; }

Applies to <P> tags with p13px class defined.

<p class="p13px">

mivox




msg:1188033
 8:00 pm on Apr 17, 2002 (gmt 0)

A class... can be applied anywhere. A CSS #id is a unique

Cool! That totally fixes a layout problem I was having last night. Any day now, I'll be able to sort through my thread flags, and post a full WebmasterWorld CSS Primer thread list. :)

I've found tag-specific classes to be very handy defining link & headline styles, but never really got a grip on the difference between an #id and a general class.

papabaer




msg:1188034
 8:03 pm on Apr 17, 2002 (gmt 0)

I've "added to"/edited some of my previous posts... a little more info. :)

zenwunien




msg:1188035
 1:15 pm on Apr 18, 2002 (gmt 0)

You can also use the 'style' prop, the same effect as a local clas, as in:

<div style="position:absolute; left:10px; top:10px">texthere</div>

which is the same with:

<head>
<style>
#bla {position:absolute; left:10px; top:10px}
</style>
</head>

and in body
div id="bla">texthere</div>

Now why and when to use a way or another? It is up to the purpose. For instance, if you have 30 DIVs, and each CSS propriety is common except, say, x position, it looks normal to use a single class like:

#bla {position:absolute; color:blue; font:8px top:10px}

than specify the color inside the DIV tag as:

<DIV id="bla" style="left:5px">text1</div>
<DIV id="bla" style="left:10">text2</div>
..
..
..
<DIV id="bla" style="left:300px">text30</div>

otherwise you should have declare 30 diferent classes in the head of the page, which coul be a wasting of time and space. Yet, if you intend to change often the DIVs' proprieties, maybe it is a good ideea to keep them as classes in the HEAD of the page.

Notice that even you define the xpostion in the #class, the browser take in consideration the xpos written in tag, and ttat is the order browser "understands" CSS styles :-)

papabaer




msg:1188036
 1:44 pm on Apr 18, 2002 (gmt 0)

Hello Zenwunien! Welcome to Webmasterworld.

Inline styles certainly serve their purpose where other options would not be suitable. Remember though, only one unique "#id" to a page, use .class for multiple instances.

I try to keep all of my CSS out of the actual BODY code and placed in external stylesheets. I do use CSS in the HEAD content at times for "page only" declarations, depending on the situation.

There are times where using #ids MAY be beneficial in other areas:

<div id="new-digital-camera">Our newest digital camera!</div>

<div id="digital-camera-prices">Latest digital camera prices</div>

Just as I prefer to name my images using "descriptive" filenames, I often name my #ids following the same convention. There are times where id="csst" will suffice, but other times where id="css-tutorials" may be a better choice. ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved