Results 1 to 7 of 7

Thread: Is this good xhtml code

  1. #1
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Is this good xhtml code

    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>

    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
    Last edited by mcolton; 08-11-2009 at 12:58 PM.

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    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.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. #3
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  4. #4
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by mcolton; 08-06-2009 at 10:13 PM.

  5. #5
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Quote Originally Posted by mcolton View Post
    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.


    Quote 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 <strong> and <em> 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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  6. #6
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    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.

  7. #7
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thanks guys

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •