Please use CSS Efficiently

[jag5311]

I just wanted to post something on my mind.

For those of you who are new to CSS, its very common to think its a great method of styling text. I have stumbled across several sites that have every <p> element with a class or ID.

I have even come across sites that style the <font> tags. Isn't that weird? There is nothing more annoying than having to clean up a site and seeing

<font class="blah"> or <font style="blah: 0px;">

I know these are newbie mistakes, but learn as much as you can and try to cut down on the amount of markup you will need. If you know your paragraphs in a particular page / site are going to look / act the same, then by all means, style just the <p> element in your stylesheet to save yourself the time and energy of styling every tag.

body p {
Font-Face value: value ;
font-size: value ;
margin: value ;
padding: value ;
}

You honestly only need to apply classes or ID's on elements that require special attention.

For any css experts, correct me if I am wrong or chime in if you want to add anything.

Bryan

[xhtmlcoder]

Styling a <font> element with a class that's a fairly novel approach.

[jag5311]

I'm telling you, i have seen it and I have deleted it

[r937]

what you describe, bryan, is called "classitis"

see http://lists.evolt.org/archive/Week-...21/145459.html and http://developer.apple.com/internet/...estwebdev.html

[Paul O'B]

classitis and divitis - I think we need to be innoculated against it

[vgarcia]

Originally Posted by xhtmlcoder

Styling a <font> element with a class that's a fairly novel approach.

I've seen it done many a time.

Another tip: Please name your classes/IDs based on the content contained within, not by what style you're applying to it.

Bad:

<span class="text-20-bold-red">NOTE:</span>

.text-20-bold-red {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #c00;
}

Good:

<strong class="must-read">NOTE:</strong>

.must-read {
  font: bold 20px Verdana, Helvetica, sans-serif;
  color: #c00;
}

[jag5311]

what about

<span class="italic">

I just got done using that one . However, its with the intentions that anything in the site you want bold and italic, give it a class of that

[r937]

<sigh />

oh, vinnie

your good/bad analogy is, um, weak

instead of styling SPAN, you should be styling EM

what is importance, if not a form of emphasis?

and the choice of class name "important" is unfortunate

i was expecting an example of !important

maybe i am too much of a structural purist

but to classitis and divitis i must also add spanitis

[r937]

bryan!! while i am replying, you go and suggest something even worse!!

[vgarcia]

Originally Posted by r937

<sigh />

oh, vinnie

your good/bad analogy is, um, weak

instead of styling SPAN, you should be styling EM

what is importance, if not a form of emphasis?

and the choice of class name "important" is unfortunate

i was expecting an example of !important

maybe i am too much of a structural purist

but to classitis and divitis i must also add spanitis

Edited.

Off Topic:

I think it deserves strong emphasis too

[vgarcia]

Originally Posted by jag5311

what about

<span class="italic">

I just got done using that one . However, its with the intentions that anything in the site you want bold and italic, give it a class of that

Why not just use <i> or <b> then?

[jag5311]

because I thought you are suppose to stray away from using actual HTML to do anything presentational. At least I have come across a few articles saying its better to create a style for elements like that. I HAVE been using those inside my html, but just until about 1 hour ago did I create something instead .

[vgarcia]

Originally Posted by jag5311

because I thought you are suppose to stray away from using actual HTML to do anything presentational.

What type of content are you styling? If it's something specific you may be better off styling an HTML element other than <span>; otherwise, if the bold/italic is there for emphasis, strong and em should be used.

[jag5311]

Ok, so you style <em> because of the importance factor, but what about if you have some other elements that require importance (I mean like bold or something different the the normal body text, not !important). So

Regular importance (Rudy's analogy)

<em>This is important</em>

but then down the page you have something else, but you want it to be a little bigger and a different color, do you create a style for

em.otherimportant

or do you create one for a span?

so in this paragraph,

 While certain words are important, <em>this word is pretty important</em>, but after reading for a while you will come across <em class="?">MORE IMPORTANT</em> words then earlier.

So structurally speaking, do you just create a span for that 2nd word, or a class for that particular em?

[r937]

"why not just use <i> or <b> then?"

oh, no, please, not that discussion again!

these tags are not deprecated

there are situations where I and B are appropriate, instead of EM and STRONG

and let's not forget <strong><em>really really strong emphasis</em></strong>

oh, and bryan, think about what you just said -- "stray away from using actual HTML to do anything presentational"

what's presentational about DIV? SPAN?

as we say in canada, "duh, eh"

[jag5311]

I don't appreciate your smart as.s remarks j/k

Let me clarify my statement

----> <div> tags, IMO, are not necessarily presentational tags, rather they are containers for content.

----> <b> or <i>, IMO, are presentational tags, because they style the content within the containers.

When I said HTML, obviously I was refering to the fact that <b><i> are HTML tags that happen to have 1 purpose, providing presentation to specific segments of content. That is there only purpose.

To be honest now, I don't even know if I clarified my original statement

[vgarcia]

If you want more emphasis than <em>, use <strong>. If you need even more emphasis than that, then you should relax because you're probably too high-strung .

[jag5311]

, well I was just refering to the structural aspect of it, so I guess I will use <em> and strong .

[megamanXplosion]

Just because an element contains a built-in style doesn't mean that CSS replaces it. The EM and STRONG tags are a great example. Screen-readers will read off emphasized (EM) words differently than normal words that would be within a SPAN or DIV, because it is supposed to be emphasized.

From my understanding, EM'd words will be said with a higher-pitch than normal words, and STRONG'd words will be said a little bit louder than normal text. Take these two examples...

<strong>Dirty cheater!</strong>

That would be like a small yell within a screen-reader.

I can't believe it was <em>you</em>!

This would be read off like normal text, except that "you" would be read off in a higher pitch. Those, emphasizing the word "you".




Of course, I am in no way, shape or form, an accessibility expert so this post should be taken with a grain of salt.

[jag5311]

interesting. Thanks for that Mega. Now that makes perfect sense.

[emmzee]

I'm wondering why this:

.text-20-bold-red {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #c00;
}

Is less preferable to this:

.must-read {
  font: bold 20px Verdana, Helvetica, sans-serif;
  color: #c00;
}

Besides the name, I mean. Is it bad style to have seperate identifiers for things, like in this example using font-family, font-... instead of just using font? I always have used separate lines ... other than I suppose bandwidth issues if you have tons of these things or get a huge amount of traffic?

[r937]

shorthand forms are better because they're shorter

except when they are interpreted differently by different browsers

see http://home.no.net/junjun/html/shorthand.html

[jag5311]

Your right on the money, simply because it uses less lines which means less bandwidth. I use dreamweaver and sometimes its so much easier to hop up to Design and then css and pick what you want versus typing it out, though typing it out should probably be the way to go

Originally Posted by emmzee

I'm wondering why this:

.text-20-bold-red {
font-family: Verdana, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #c00;
}

Is less preferable to this:

.must-read {
font: bold 20px Verdana, Helvetica, sans-serif;
color: #c00;
}

Besides the name, I mean. Is it bad style to have seperate identifiers for things, like in this example using font-family, font-... instead of just using font? I always have used separate lines ... other than I suppose bandwidth issues if you have tons of these things or get a huge amount of traffic?

[megamanXplosion]

The change of the name is good because it prevents you from having to rename classes/IDs all throughout your HTML if you want to change the style.

The second one is good because it is compressed into a shorthand rule. Thus, saving bandwidth. Take this class for example...

	.note {
		background-color: #EEE;
		border: 1px Solid #000000;
		border-top-width: 6px;
		border-right-width: 3px;
		border-bottom-width: 2px;
		padding-top: 5px;
		padding-right: 20px;
		padding-bottom: 40px;
		padding-left: 20px;
		margin-top: 10px;
		margin-right: 0px;
		margin-bottom: 40px;
		margin-left: 0px;
		font-style: Italic;
		font-weight: Bolder;
		font-size: 9pt;
		line-height: 130%;
		font-family: Verdana, Arial, Helvetica, Sans-Serif;
	}

can be compressed down to the below which just little effort...

	.note {
		background-color: #EEE;
		border-style: Solid;
		border-color: #000;
		border-width: 6px 3px 2px 1px;
		padding: 5px 20px 40px 20px;
		margin: 10px 0 40px 0;
		font: Italic Bolder 9pt/130% Verdana, Arial, Helvetica, Sans-Serif;
	}

Just a couple of optimizing tips...

• The shorthand rules that deal with dimensions (border, margin, padding) can be compressed to one statement.
  • Rule: Top Right Bottom Left
• The font properties can be compressed into one statement.
  • font: Style Weight Size/Line-Height Font-Names
• When using dimensions and you set a side to 0 with a measurement unit at the end, you can ommit the unit, because 0 is 0, regardless of measurement.
  • 0px = 0
  • 0em = 0
• Color values can sometimes be compressed. Here are a couple of ways...
  • rgb(0,255,0) = #00FF00 (RGB converted to 6-digit hex equivalent)
  • #00FF00 = #0F0 (6-digit hex is converted to 3-digit. If the color is like [RR & GG & BB], then it can be compressed to [R & G & B].)

[Percept]

Originally Posted by r937

"why not just use <i> or <b> then?"

oh, no, please, not that discussion again!

these tags are not deprecated

there are situations where I and B are appropriate, instead of EM and STRONG

and let's not forget <strong><em>really really strong emphasis</em></strong>

oh, and bryan, think about what you just said -- "stray away from using actual HTML to do anything presentational"

what's presentational about DIV? SPAN?

as we say in canada, "duh, eh"

Soooo <i> & <b> are not depricated ? So why is everyone using <em> and <strong> then since <i> & <b> are shorter. Is there actually a difference between <i> & <em> and <b> & <strong> ?