SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Best way to style Inline Text?

    Am thinking of re-writing my website and could use some help creating "smarter" styles...

    Because I like color for emphasis in my website's copy, I have created a series of CSS Classes to style my text.

    For example, in a lot of the articles on my website, I use bold, red font to get my points across.

    Here are some examples of my classes:
    Code:
    .redText,
    .error{
    	color: #FF0000;
    }
    
    .redBold{
    	font-weight: bold;
    	color: #FF0000;
    }
    
    .orangeText{
    	color: #FF9900;
    }
    
    .orangeBold{
    	font-weight: bold;
    	color: #FF9900;
    }
    
    .hotPinkBold{
    	font-weight: bold;
    	color: #FF33CC;
    }

    So, when when I need to change the color or weight of part of a sentence, I just wrap the text in <SPAN> and add one of my classes above.

    Is that okay?


    Debbie

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Span will work. But usually when your trying to get a point across you should use strong tag instead. So just put the class on that. If you simply want it bold then just use b. always helps to imagine a screen reader is reading it to someone. If the reader should emphasize it and/or say it louder then strong should be used. Span is basically used for when there is no other tag to do the job.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Am thinking of re-writing my website and could use some help creating "smarter" styles...

    Because I like color for emphasis in my website's copy,
    As Eric said and as you said yourself - if you want emphasis then use em not span. Or use strong for important content and even as Eric already said if you want bold text just as a decoration but with no added meaning then use "b". If none of the above fit the criteria then use span as the last resort.

    I have created a series of CSS Classes to style my text.


    For example, in a lot of the articles on my website, I use bold, red font to get my points across.

    Here are some examples of my classes:
    Code:
    .redText,
    .error{
    	color: #FF0000;
    }
    
    .redBold{
    	font-weight: bold;
    	color: #FF0000;
    }
    
    .orangeText{
    	color: #FF9900;
    }
    
    .orangeBold{
    	font-weight: bold;
    	color: #FF9900;
    }
    
    .hotPinkBold{
    	font-weight: bold;
    	color: #FF33CC;
    }
    They are not really ideal class names (apart from .error) because they rely on presentation (color) to convey meaning and should at a later date you decide that layout needs blue text as the stand out item then you are stuck with class names in your html that say .redtext but are really blue!

    You should use a class name so that it doesn't matter what rules it holds like your .error example. If you decide .error should be blue then it still makes sense in the html.

    If you are using classnames for varying degrees of importance you could say something like.

    .hot{}
    .warm{}
    .cold{}

    I'm sure you can think of something better

    Classes like .warning are much better than saying .redText as they don't imply presentation.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,171
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Because I like color for emphasis in my website's copy, I have created a series of CSS Classes to style my text.
    Just a wee reminder not to rely on colour alone to convey meaning, because it won't work if your user is colour-blind. I've been teaching computer skills to an elderly friend with this problem, so I'm particularly aware of it. (Me: "Click the blue icon. Next to the orange one." My friend: "I can see two green ones and a brown one. Shall I just go for the second green one?" Great fun!)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    (Me: "Click the blue icon. Next to the orange one." My friend: "I can see two green ones and a brown one. Shall I just go for the second green one?" Great fun!)
    lol - good point

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Graphic design aside ( more color is not always better...). And Paul kinda beat me to this point, but your CSS should make sense semantically. Without any jargon, what I am trying to say is that the "best way to style" is a way which allows you to change styles WITHOUT touching the markup.

    For example.. if, similar to what you proposed, you used <span class="redHighlight">This is important</span> and .redHighlight{color:red;} and a year later you had a change of heart and wanted important things to be purple you would essentially need to change your markup which mean MORE WORK FOR YOU, kinda defeats the purpose doesn't it?

    Now, if you had used something more semantic, say: .concept{}. You would gain 3 advantages. <span class="concept">This is important</span>

    1)This would be a semantic label, permanent in the mark up, which mean you'd not have to edit your HTML just to change the look of it
    2) From a graphic logic point of view you create a unified pattern..a palette... all your CONCEPTS are one color. As you users navigate your site the they will learn to associate that particular color with "important concepts" [ the same way "blue and underlined" is immediately assumed by 99% of users to mean LINK-CLICK HERE] and your point will come across better . This is why you dont want to use TOO many colors, besides it just looks more professional.
    3) Expounding on #2, you can make more elaborate palettes by targeting : #mainContent .story .concept {color:red;} and #sidebar .story .concept {color:green;}.
    (Againg keep in mind that limited color palettes look better) now you still have some logic to your color scheme, but have 2 colors for highlighting concepts on the main content and on the side bar and that just an example.

    Finally ... smile like you MEAN it. What would happen if the viewer had their styles turned off? If something needs emphasis then the appropriate EM/ STRONG tag should be used in the HTML ( and the your CSS could be simplified to #mainContent .story em {color:red;}, for example. You can still style it with a SPAN as suggested earlier, if all you want is to highlight it for no reason. But, this often makes me stop and thin.. if there is no reason to highlight this concept WHY am I highlighting anyway??


    These points have probably been made my previous posters. I saw this thread last night and was too sleepy to respond. But I hope my explanation serves as a guide as to HOW to choose as well as WHY.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Wow! Gang tackle!!


    Debbie

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Span will work. But usually when your trying to get a point across you should use strong tag instead. So just put the class on that. If you simply want it bold then just use b. always helps to imagine a screen reader is reading it to someone. If the reader should emphasize it and/or say it louder then strong should be used. Span is basically used for when there is no other tag to do the job.
    Valid point!

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Eric said and as you said yourself - if you want emphasis then use em not span. Or use strong for important content and even as Eric already said if you want bold text just as a decoration but with no added meaning then use "b". If none of the above fit the criteria then use span as the last resort.
    Good idea.

    So, what is the difference between <em> and <strong> ??


    They are not really ideal class names (apart from .error) because they rely on presentation (color) to convey meaning and should at a later date you decide that layout needs blue text as the stand out item then you are stuck with class names in your html that say .redtext but are really blue!
    Agree mostly...

    Yes, I am using Red, Bold Text to get across the key points of my articles, so I could make those <em>.

    However, I used Pink for Pink Cadillac, so what else could I do there? (Probably a one-off style, but if I have Pink Cadillac, Pink Poodle, and Pink Panther throughout my website that it seemed like a handy style?!


    If you are using classnames for varying degrees of importance you could say something like.

    .hot{}
    .warm{}
    .cold{}

    I'm sure you can think of something better
    Good example.


    Debbie

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Just a wee reminder not to rely on colour alone to convey meaning, because it won't work if your user is colour-blind.
    True.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Graphic design aside ( more color is not always better...). And Paul kinda beat me to this point, but your CSS should make sense semantically. Without any jargon, what I am trying to say is that the "best way to style" is a way which allows you to change styles WITHOUT touching the markup.

    For example.. if, similar to what you proposed, you used <span class="redHighlight">This is important</span> and .redHighlight{color:red;} and a year later you had a change of heart and wanted important things to be purple you would essentially need to change your markup which mean MORE WORK FOR YOU, kinda defeats the purpose doesn't it?

    Now, if you had used something more semantic, say: .concept{}. You would gain 3 advantages. <span class="concept">This is important</span>

    1)This would be a semantic label, permanent in the mark up, which mean you'd not have to edit your HTML just to change the look of it
    2) From a graphic logic point of view you create a unified pattern..a palette... all your CONCEPTS are one color. As you users navigate your site the they will learn to associate that particular color with "important concepts" [ the same way "blue and underlined" is immediately assumed by 99% of users to mean LINK-CLICK HERE] and your point will come across better . This is why you dont want to use TOO many colors, besides it just looks more professional.
    3) Expounding on #2, you can make more elaborate palettes by targeting : #mainContent .story .concept {color:red;} and #sidebar .story .concept {color:green;}.
    I like your idea!!!

    (Now, what to call my bold red text?!)


    (Againg keep in mind that limited color palettes look better)
    Well, for my articles I just use 1.) Plain Black, 2.) Bold Black, and 3.) Bold Red maybe a few times in an article of 5-8 pages.

    I *think* I'm doing okay on the color thingy, BUT I'm certainly more liberal in my use of colors than, say, the New York Times!!


    Finally ... smile like you MEAN it.
    You've lost me?!


    What would happen if the viewer had their styles turned off? If something needs emphasis then the appropriate EM/ STRONG tag should be used in the HTML ( and the your CSS could be simplified to #mainContent .story em {color:red;}, for example. You can still style it with a SPAN as suggested earlier, if all you want is to highlight it for no reason. But, this often makes me stop and thin.. if there is no reason to highlight this concept WHY am I highlighting anyway??
    Very true!


    These points have probably been made my previous posters. I saw this thread last night and was too sleepy to respond. But I hope my explanation serves as a guide as to HOW to choose as well as WHY.
    Yep, all very sage advice!!

    Thanks everyone,


    Debbie

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If I create a class like .factoid{} or .statistic{} or .concept{} do I still lose the semantic benefits since those are not recognized semantically like an HTML <strong> or <em> would be?


    Debbie

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could still apply those to <em> and <strong> elements. E.g.

    <em class="factoid">

  14. #14
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee
    So, what is the difference between <em> and <strong> ??
    Emphasis is the difference; apart from the default visual rendering STRONG indicates stronger emphasis than EM. If you are purely using visual styling and cues that's the realm of CSS, emphasis differs to style and doesn't have a colour.

  15. #15
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,171
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Yes, I am using Red, Bold Text to get across the key points of my articles, so I could make those <em>.

    However, I used Pink for Pink Cadillac, so what else could I do there?
    You might want to use a tool like the Colour Contrast Analyser to check your colours. It will give you a quick check as to whether there is sufficient contrast between foreground and background colours for both normal vision and various types of colour-blindness. It also has a facility to display a small section of your page as it would appear to someone with a particular type of colour-blindness, so you can check whether they will be able to see a difference between one kind of high-lighting and another. (e.g. between pink and red.)

    Hope that helps.

  16. #16
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    If I create a class like .factoid{} or .statistic{} or .concept{} do I still lose the semantic benefits since those are not recognized semantically like an HTML <strong> or <em> would be?


    Debbie
    As far as your class names go, I wouldn't think so <em class="factoid"> just gives an extra layer of meaning which is valuable. It's like saying, "I am giving emphasis to text which is a factoid." To me that is semantically solid.


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
  •