SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Global CSS declaration for "a" (i. e. "a href") tag

    I have style definitions that look like this:

    Code:
    .a10b,
    .a10b a:link,
    .a10b a:visited,
    .a10b a:hover
    {
    font: 10px Arial;
    color: #000000;
    text-decoration: none;
    }
    .a10b a:hover {text-decoration: underline}
    I have 20 text styles, and for all of them I declare like this, resulting in a lengthy style sheet.

    a:link and a:visited should always be {text-decoration: none} for me, and a:hover always {text-decoration: underline}.

    If I could declare these in just one place, valid for all styles, I would save huge bytes. Is that possible?

    Thank you very much for your time!

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I read a thread the other day where the OP was on about setting up a default style sheet that set's up a base for the majority of his projects. Perhaps something like that may help?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you have the same styles for all those anchors then just use the same class. If each anchor is different then of course you will need to have a different class for each one.

    You can reduce your original code by defining all states in one go as long as you are not using named anchors (and there really isn't any need as id's will do the job anyway).

    Code:
    .a10b a {
    font: 10px Arial;
    color: #000000;
    text-decoration: none;
    }
    .a10b a:hover {text-decoration: underline}
    Defining a {} defines all states of the anchor and then you just need to define the different state which is the hover.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch, Paul - that seems to work.

    Is there no way however where I make a single definition in one place for all anchors? Such as:

    Code:
    a {text-decoration: none}
    a:hover {text-decoration: underline}
    
    .a10b
    {
    font: 10px Arial;
    color: #000000;
    }
    
    /*other styles like a10b follow*/
    Is there some way I could make my stylesheet look like that? So that for each style the "a" attributes are the same?

    handyman103, I am indeed using a central style sheet (this is that stylesheet) that I am linking to every page using the "link" tag in the header. However, that central/base stylesheet is some 10kB, and I am trying to see if it can go to 5kB with some global definitions for repetitive stuff...

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, this works:

    Code:
    a {text-decoration: none;}
    a:hover {text-decoration: underline;}
    
    .v10w,
    .v10w a
    {
    font-family: Verdana;
    font-size: 10px;
    color: #FFFFFF;
    }
    /*several other styles like this*/
    That is, something like:
    Code:
    <DIV CLASS="v10w"><A HREF="whatever">some text</A></DIV>
    now renders the link white, without underline, and with an underline only on hover.

    It is a indeed huge reduction in code . Now if only I could get rid of the ".v10w a" too. But I am pretty pleased with myself. Thanks a bunch for the idea, Paul! handyman103, thanks for your time too!

  6. #6
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sounds like you've got it, but yes that works

    this is one of the areas where a proper understanding of CSS can dramatically reduce the size of your style sheet

    one of the things I like about CSS however, is that you don't have to do it beautifully as long as you do it right It makes a very low level of entry for newbies.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Make a HTML page with all Tags you Know, with content in it ( 12345 or qwerty )
    Then attach all your style sheets to it
    If something moves you maybe have to rethink how you do your style sheets

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I was reading the other day Master style sheets.

    http://www.crucialwebhost.com/blog/m...css-technique/

    Thought it seemed relly good.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I certainly agree that some of that is useful but I'd personally either remove this set of styles or rename them

    Code:
    .float-left    { float:left; }
    .float-right   { float:right; }
     
    .text-left     { text-align:left; }
    .text-right    { text-align:right; }
    .text-center   { text-align:center; }
    .text-justify  { text-align:justify; }
     
    .bold          { font-weight:bold; }
    .italic        { font-style:italic; }
    .underline     { border-bottom:1px solid; }
    .highlight     { background:#ffc; }
     
    .wrap          { width:960px;margin:0 auto; }
     
    .img-left      { float:left;margin:4px 10px 4px 0; }
    .img-right     { float:right;margin:4px 0 4px 10px; }
     
    .nopadding     { padding:0; }
    .noindent      { margin-left:0;padding-left:0; }
    .nobullet      { list-style:none;list-style-image:none; }
    They're describing what they do which only has a slight benefit over include the styles inline.

    Say for instance you apply the class float-left to an element. All works fine and good assuming you don't want to change this but imagine you or a client decide that this would look better on the right? You could change the CSS value but then you'd be left with a style called float-left that actually float's something on the right. Or you could go back into your HTML and swap all the instances of class="float-left" for class="float-right".

    This though, kind of defeats the object of CSS. CSS was created to separate presentation from content but by including classes and having to change them, you're having to manage the presentation within the HTML.

    Personally, I'd remove those styles and then when I want to position a news image for example on the right, I'll give it a class="newsimage". This way, if I don't like it's position I can move it within the CSS without causing conflict between names and their meaning.

    Always use ID's and classes that describe what it's being applied to and not what it does.

    Other than that though, I'd certainly recommend using a master stylesheet with a set of common default properties that you're likely to use.

  10. #10
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May i ask why do you have 20 text styles, isn't this a little too much...?

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by eyever View Post
    May i ask why do you have 20 text styles, isn't this a little too much...?
    Which 20 text styles are you talking about?

    Personally I'd rather go for Eric Meyer's reset stylesheet and then build any other styles on top of these if I decided not to go for the * { padding: 0; margin: 0; } reset method.

    http://meyerweb.com/eric/thoughts/20...eworked-reset/

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    Which 20 text styles are you talking about?
    [/url]

    From post #1

    I have 20 text styles, and for all of them I declare like this, resulting in a lengthy style sheet.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do I use 20 styles? Well, 20 was an exaggeration, but the site I work on is a rather elaborate portal, with Arial, Arial Black and Verdana is 2-4 sizes and 2-3 colors. The permutations bring it to about 15-20. Hence the CSS sheet is huge for me. But now it's about 2.5kB, down from about 10kB, thanks to this thread . Those were pretty interesting further inputs in the last 4-5 posts.


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
  •