Is this good xhtml code

**mcolton** · 08-06-2009, 03:51 PM

Is it good coding to put a lot of attributes that you will use on a page in a single style statement inside the <head> and then use
...

HTML Code:

<style type="text/css"> 
a:link {color:"blue"} 
a:visited {color:"maroon"}
.font24{font-size:24px;}
.font22{font-size:22px;}
.font20{font-size:20px;}
.font18{font-size:18px;}
.italic{font-style:italic;}
.bold{font-weight:bold;}
.arial{font-family:arial;} 
.center{text-align:center;}
.justify{text-align:justify;}
.navy{color:navy;}
</style>
.
.
.
<p>
   <span class="bold arial font20 navy center">A Message from Stephanie Coleman, President
    </span>
</p>

Why doesn't this code center "A Message from ..."
Thanks

**TheJoshMan** · 08-06-2009, 05:48 PM

First answer is no... That's not good. The entire purpose behind CSS was to separate style from structure, so if you're putting

Code:

<style type="text/css">
blah
</style>

in the head of the document, you're inserting style (css) within structure (html).

The best way would be to simply reference a stylesheet with the appropriate styles from the head like so...

Code:

<head>
<link rel="stylesheet" type="text/css" href="path/to/your/stylesheet.css" />
</head>

Then simply place all of the above styles inside a stylesheet and make sure you reference the correct path and filename in the above example.

As for the reason that text will not center, it's because a SPAN is an inline element, not a BLOCK element. In fact, there's really no reason for that SPAN to begin with... Simply use the following:

Code:

<p class="bold arial font20 navy center">
A Message from Stephanie Coleman, President
</p>

Paragraphs are block elements, so the text will be centered when using that code.

**Snookerman** · 08-06-2009, 09:17 PM

Also, the method you are using is highly unsemantic and defeats the purpose of CSS. Class and id names should describe what the element is, not how it should look. What you are doing is just like having inline styling but using more bytes.

What you should do is have a class name that describes what the elements is, for example:

HTML Code:

<span class="message">A Message from Stephanie Coleman, President</span>

and then style it as you wish:

Code:

.message {
color: yellow;
font-size: 2em;
}

I hope you understand what I mean.

Happy coding!

**mcolton** · 08-06-2009, 09:53 PM

Thanks a lot for your input. I kinda thought you guys were going to say use stylesheets. I already use them so I think I'll be able to figure that out. I guess the thing to do is use a different stylesheet file for each page. Then you could name the stylesheet after the page is represents.

How do you handle 2 different attributes in the same line like:
Mission Statement: Have fun
using a stylesheet

**Snookerman** · 08-07-2009, 06:07 AM

Originally Posted by mcolton

I guess the thing to do is use a different stylesheet file for each page. Then you could name the stylesheet after the page is represents.

Actually, I don't agree that you have to use external stylesheets only. What I usually do is have one main stylesheet that applies to the whole site, which I link to, and then I put the page specific styles in the head section. This saves me an extra request and does not mean I don't separate style from content/structure. This example:

HTML Code:

<link rel="stylesheet" type="text/css" href="/main.css"/>
<style type="text/css">
.message {
color: green;
}
</style>
</head>

is perfectly valid and semantic.

Originally Posted by mcolton

How do you handle 2 different attributes in the same line

I'm not sure I understand your question. If you are wondering how to make one part of a line bold and the other italic, you use the tags  and  like this:

HTML Code:

<strong>Mission Statement:</strong> <em>Have fun</em>

If that's not what you asked, please try to elaborate.

Good luck!

**forum_amnesiac** · 08-07-2009, 07:54 AM

If you are wanting 2 styles (eg. font size, font color, font style, etc) on the same line you can take the style code I showed you yesterday and put it directly into your stylesheet.

You still use the tag's, that were in the example, to display the styles, relevant to specific text, on the same line.

**mcolton** · 08-07-2009, 11:21 AM

Thanks guys

Thread: Is this good xhtml code

Thread Tools

Search Thread

Is this good xhtml code

Bookmarks

Bookmarks

Posting Permissions