1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

The Power of CSS

Discussion in 'CSS' started by Crusader, Oct 16, 2005.

  1. #1
    Most people consider CSS a bit of a webmaster's toy. Why use CSS when you can use tables, and you are more or less assured that it will look the same in all browsers.

    Well, that's at least for the people that don't understand the power of CSS. After a long long time of putting off re-designing the horrible table based template for my wallpaper site, I finally bit the bullet and did it.

    Now, unfortunately I can't completely use CSS for everything, so the new design is a combination of largely CSS and a bit of tables for the gallery element.
    The results are quite amazing. My load times have decreased, code is much much cleaner, and it's easy to update certain elements. Best of all file sizes are around 37% of the table based ones.

    A brief example:
    Table Based file: Size = 30KB Loadtime 4sec
    CSS Based file: Size = 12KB Loadtime 1sec
    Even if you add the external CSS file of 4KB to the file, it's still half that of the table version.
    SEMrush
    So that in a nutshell is the power of CSS. If done correctly it can be a huge help, and makes for speedier sites. Definitely well worth the effort!
     
    Crusader, Oct 16, 2005 IP
    SEMrush
  2. sgtsloth

    sgtsloth Peon

    Messages:
    205
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #2
    For me the most awesome power of CSS is changing the layout of an entire site just through the .css file. Talk about a time saver. :D

    It takes some planning up front, but is well worth it.
     
    sgtsloth, Oct 16, 2005 IP
  3. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #3
    And that gets cached by the browser after the first load too.

    So do background images - so after the first page load you can even stop the images having to reload for a while.

    That increases page load times a lot too.
     
    SEbasic, Oct 16, 2005 IP
  4. Crusader

    Crusader Peon

    Messages:
    1,735
    Likes Received:
    104
    Best Answers:
    0
    Trophy Points:
    0
    #4
    That is indeed very nice to do. Just a pity that in this case, I have to rely on some 3rd party code, that won't allow me to do that.
     
    Crusader, Oct 16, 2005 IP
  5. saintdw

    saintdw Peon

    Messages:
    453
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I love CSS :)

    Actually making it work in IE and FF and Opera is a fun game in itself :)

    Its pretty easy too, just gotta know few hacks here and there.
     
    saintdw, Oct 16, 2005 IP
  6. aaron_nimocks

    aaron_nimocks Im kind of a big deal Staff

    Messages:
    5,563
    Likes Received:
    627
    Best Answers:
    0
    Trophy Points:
    420
    #6
    I dont like CSS at all but I think it is because I never worked with it and dont like to try new things. :)

    But I am sure its great!
     
    aaron_nimocks, Oct 16, 2005 IP
  7. Crusader

    Crusader Peon

    Messages:
    1,735
    Likes Received:
    104
    Best Answers:
    0
    Trophy Points:
    0
    #7
    The hack part is the annoying part. I spent around 2 hours making it work correctly in both. Once I fixed IE, Firefox got messed up. Fixed Firefox, then IE was messed up.

    Gives a little excitement to life though ;)
     
    Crusader, Oct 17, 2005 IP
  8. GeorgeB.

    GeorgeB. Notable Member

    Messages:
    5,695
    Likes Received:
    288
    Best Answers:
    0
    Trophy Points:
    280
    #8
    Suprised you guys didn't mention what IMO is the biggest benefit behind page load times of CSS. And that is SEO! With less code in the page (especially when you include the css file) the content is pushed way up to the top of the page and the SE bots have less code to wade through to get to your content.

    Being able to use H tags without them looking ugly is a plus as well ;)
     
    GeorgeB., Oct 17, 2005 IP
  9. boccio

    boccio Peon

    Messages:
    82
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Speaking of CSS and SEO, there is one more benefit :) Not only you push content up the page, but you can also shuffle the content :D

    Imagine you have 2-column layout, with navigation on left, and content on right hand-side. Naturally, you would first have navigation block in HTML file, followed by content. What you can easily do with CSS is push content block ahead of navigation in HTML file (upwards), because CSS takes care of placing layout correctly.

    HTML:
    
    <div id="content”>
    <h1>Important stuff</h1>
     <p>Some other text.</p>
    </div>
    
    <div id="nav">
    <ul>
      <li><a href="abc.htm">Link</a></li>
      <li><a href="abc.htm">Link</a></li>
    </ul>
    </div>
    
    Code (markup):
    CSS:
    
    div#nav {
    float: left;
    width: 30%;
    }
    
    div#content {
    float: right;
    width: 70%;
    }
    
    Code (markup):
    cool, huh? :)
     
    boccio, Oct 17, 2005 IP
  10. artjewl

    artjewl Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I'm a newbie at CSS -- trying to break from table layouts. I've been convinced, but still have LOTS to learn. Anyhow, I hadn't even thought about the SEO benefits... :) Thanks for bringing that up!
     
    artjewl, Oct 25, 2005 IP
  11. balkanboy

    balkanboy Banned

    Messages:
    1,950
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I use css for all my websites and do them without tables, but just to say it's stuped to avouid tables in every case. If you have tabelar data use tables that's what they are made for.
     
    balkanboy, Oct 27, 2005 IP
  12. artjewl

    artjewl Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    hmm... seems I missed something... Did someone say it was stupid to avoid tables altogether?
     
    artjewl, Nov 2, 2005 IP