CSS Mistakes- Proper way to style text

Discussion in 'CSS' started by cj1223, Aug 25, 2006.

  1. #1
    im kinda new to CSS, before i knew what it was i had alot of problems styleing text and links, i learned the most of it but i have had people tell me the way i style is wrong becuase i style alot of text like: <span class="t"> they tell me to use <div> well i noticed that <div> isnt good all the time, thats the reason i started using <span in the first place.

    So the whole point to this thread is to clear things up and have the proper ways to style text explained. i just figuerd out you can use <p class> and ive been doing that whenever i can but is there a better way, or a more proper way?
     
    cj1223, Aug 25, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Your content should be marked up with tags that reflect what that content is, p for paragraphs, ol, ul, dl for lists of things like links (menus), h1–6 for document headers, section header, subsection headers, &c., and so on. Each element can be styled.

    The div is a block level aggregating element. It is used to group other elements into a single context. A div should not contain bare nekkid content. It should hold only other elements. It provides a styling context, eg. you can style the elements that appear in the div separately from the rest of the page's elements. For example, a wrapper for the main content, <div id="main">, might style its ps like so; #main p { font-size: 0.9em;}, and the wrapper itself could be floated; #main {float: left;}.

    The span element is an inline segregator. It separates a bit of inline content for special handling, eg. the marked up content <p>Now is the time for <span class="hilite"> all good men</span> ….</p> and the style rules .hilite { background-color: silver;}.

    Does that help?

    cheers,

    gary
     
    kk5st, Aug 25, 2006 IP
  3. cj1223

    cj1223 Well-Known Member

    Messages:
    287
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    108
    #3
    Ya that helps a little, i used to use span for everthing, im still alittle scethy on how to line up information using <div> instead of tables. I try to put classes in <p> any time i can now ebstead of using <span>
     
    cj1223, Aug 26, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Just to clear up a common misconception, you do not use divs instead of tables. You use well structured, semantic and well formed html instead of table layouts. A non-trivial table layout cannot be well structured nor semantic, though it can contain well formed (valid) html.

    As implied above, the div element lets you form groupings of the semantic elements. These groupings provide independent styling contexts. Think of the div as a drawer in a chest. You can arrange and re-arrange the socks, handkerchiefs and underwear in one drawer (div) without affecting the contents of other drawers. Further, you can arrange and re-arrange the positioning of the drawers in the chest without affecting the contents of the drawers.

    Keep in mind that the div is semantically neutral. It says nothing about what its %flow element contents are. Likewise, the span says nothing about what its %inline contents are. Use them only for their proper structural purposes.

    cheers,

    gary
     
    kk5st, Aug 26, 2006 IP
    Halobitt likes this.
  5. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #5
    You'd make a fine contributer at microformats.org Gary.

    I believe the <pre> element is non-semantic and is just for styling, whitespace:pre; should be used instead.

    I've been arguing with them to get rid of it! Although I'm often wrong.
    http://tantek.com/presentations/2005/03/elementsofxhtml/ Bottom right, number 16 selection.
     
    AdamSee, Aug 26, 2006 IP