Log in

View Full Version : Resolved 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
<span class="...all attributes wanted..">...</span>



<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



<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...



<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:



<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:

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

and then style it as you wish:

.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
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:

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



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 <strong> and <em> like this:

<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 <span> 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