Results 1 to 16 of 16
  1. #1
    ABW Ambassador Doug247's Avatar
    Join Date
    January 18th, 2005
    Location
    DE USA
    Posts
    931
    CSS Question
    When creating a style sheet, is there a suggested or recommended order?

    Ex.

    Tags like Body, H1, Form
    Then Div or TableIDs
    Followed By Classes

    I am just wondering if I can get my pages to load faster or if it helps with SEO.

    Or, if it does not matter at all. Thanks.
    Thanks,
    Doug

  2. #2
    What's the word? Rhia7's Avatar
    Join Date
    January 13th, 2006
    Posts
    9,578
    I find an order helpful.

    body {}
    If you would like to be more precise you can include what you would like in the body:
    body {
    font-family: (choose your font family);
    font-size: size;
    color: #;
    background-color: #;
    text-align: ;
    min-width: ;
    padding: ;
    margin: ;
    }

    I specify the headers this way, the content, the navigation, the footer, the text, etc...

    I recommend using TopStyle Lite
    TopStyle Lite is a free version of TopStyle that contains a very small subset of the features found in TopStyle Pro. TopStyle Lite was designed for basic use as an inline style editor from within third-party web authoring tools ...
    http://www.bradsoft.com/topstyle/tslite/index.asp

    Differences between TopStyle Lite and TopStyle Pro
    http://www.bradsoft.com/topstyle/tslite/fullver.asp
    Quote Originally Posted by itsupportnotes
    I am just wondering if I can get my pages to load faster or if it helps with SEO.

    Or, if it does not matter at all. Thanks.
    I don't think CSS influences SEO (someone else's opinion may differ) -- a style sheet offers uniformity among pages within the group that uses the style. A style sheet facilitates creating new pages within the group.
    ~Rhia7 -- Remember the 7
    Twitter me

  3. #3
    ABW Ambassador Daniel M. Clark's Avatar
    Join Date
    January 7th, 2006
    Location
    Houston, TX
    Posts
    2,082
    Doesn't matter at all from an SEO or page loading standpoint.

    That said, having efficient CSS is good practice. Consider the following:

    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;

    Perfectly valid, but better written as:

    margin: 10px 0px;

    Not a huge deal, but the less code you have, the faster it can be processed.
    Daniel M. Clark
    Tech Manager
    Greg Hoffman Consulting

  4. #4
    ABW Ambassador Daniel M. Clark's Avatar
    Join Date
    January 7th, 2006
    Location
    Houston, TX
    Posts
    2,082
    Oh, and if you want to see an example of what I consider great CSS, from a usability standpoint, check out any of Brian Gardner's Wordpress themes. The CSS is very, very easy to understand and work with.
    Daniel M. Clark
    Tech Manager
    Greg Hoffman Consulting

  5. #5
    Full Member
    Join Date
    October 22nd, 2006
    Posts
    200
    I haven't heard that CSS affects SEO.

    I usually define the html tags first and then the ids and classes as they appear in my page. I find it easier to go back and change at a later date if it follows that pattern.

    body{}
    h1{}
    td{}
    #main{}
    #main p{}
    #main p a{}
    #menu{}
    #menu ul{}
    #footer{}

    I would also recommend top style lite. I think it's the only tool I used when I started web design that I still use on a regular basis

    Bob

  6. #6
    Influencer Marketing GravityFed's Avatar
    Join Date
    January 18th, 2005
    Location
    Ithaca & Park City
    Posts
    3,338
    There are circles (based on things I've read) that do believe having validated and concise CSS does help with SEO.. reason being is that with tableless CSS web documents there is less code to content ratio. In other words, Google doesn't have to work so hard to get to the meat of the document and index accordingly.

    Just throwing that out there for discussion sake. I don't know the answer, though.
    Last edited by GravityFed; July 24th, 2008 at 10:26 AM. Reason: clarification

  7. #7
    Affiliate Manager Afilyit's Avatar
    Join Date
    April 25th, 2008
    Location
    Staten Island, NY
    Posts
    348
    A poorly designed CSS "LAYOUT" can have very bad SEO affect. I learned that the hard way. I originally had a 3 column table layout and changed that all to CSS.

    Took some of the basic code from samples on the web. Problem was it loaded pages in this order:

    Header
    left column
    center column
    right column
    footer

    Each had it's own Divs. It became clear when reviewing the source code, search engines were indexing my pages that exact way. All the stuff in the left column, which was basically just navigation was picked up by the search engines before the real meat of the page , the center column. So my pages quickly improved when I redesigned the CSS layout, and it now loads this way:

    Header
    Center Column
    Left Column
    Right Column
    Footer

    Code-to-text ratio can also be important, so you can cut out some of the html and add it to an external CSS stylesheet.
    _________________________________________
    [COLOR=Purple][SIZE=1][url="http://www.pianowizardacademy.com"]Piano learning software[/url] [COLOR=Red]|[/COLOR] [url="http://bit.ly/PWAiPad"]Back Piano Wizard iPad App on KickStarter[/url] [COLOR=Red]|[/COLOR] [url="http://www.musicwizardaffiliates.com"]Piano Wizard Affiliate Program[/url][/SIZE][/COLOR]

  8. #8
    Influencer Marketing GravityFed's Avatar
    Join Date
    January 18th, 2005
    Location
    Ithaca & Park City
    Posts
    3,338
    Thanks Vincent, Very helpful..

  9. #9
    ABW Ambassador purplebear's Avatar
    Join Date
    January 18th, 2005
    Posts
    3,960
    Probably a dummy question but do any of you feel there's any advantage or I guess disadvantage at all to having external css style sheets versus internal style sheet? Anybody feel one way speeds time page loads or any seo advantage with one over the other?

  10. #10
    Moderator
    Join Date
    April 6th, 2006
    Posts
    2,689
    It's actually a good question

    I find the page load difference is (in most cases) negligible. There could be a small SEO advantage to external css as the bots have less to crawl on the page.

    However the real benefit of external CSS is for design changes..you can change your entire site using one file that controls main fonts, layout, spacing, etc.

  11. Thanks From:

  12. #11
    ABW Ambassador purplebear's Avatar
    Join Date
    January 18th, 2005
    Posts
    3,960
    Thank you very much teezone Took me quite a while to teach myself html lol so learning css hasn't been a very speedy process either. lol Realize won't live long enough to really get a handle on it so want to do what I can do the right way. Very much appreciate your giving me your opinion.

  13. #12
    ABW Ambassador kse's Avatar
    Join Date
    November 29th, 2005
    Posts
    2,511
    You should use a external css file, that way it only has to load once per visit and not per page. Also as stated by teezone it makes it easier to update all your pages. If you have Dreamweaver it very easy to setup a template using css.

    I just completed a 3 day css classroom course and will be doing the 2nd 3 days later this month. I always played with css but now i have a much better understanding of what I doing and what I was doing wrong all of these years.
    MERCHANTS: Start showing your coupons directly on your site, that way your shoppers will stop leaving your site looking for them!! If not then remove your Coupon Box!!

  14. Thanks From:

  15. #13
    ...and a Pirate's heart. Convergence's Avatar
    Join Date
    June 24th, 2005
    Posts
    6,918
    Define, "external css files", please.

    • On another domain name?
    • On the same domain name but an actual css file versus inline css?
    • or?
    Salty kisses, Sandy toes, and a Pirate's heart...

  16. #14
    What's the word? Rhia7's Avatar
    Join Date
    January 13th, 2006
    Posts
    9,578
    Quote Originally Posted by Convergence View Post
    Define, "external css files", please.
    I interpret it to mean a separate .css file as opposed to writing the
    css within the html file.

    Within a folder you'd have the html files plus a .css file.
    ~Rhia7 -- Remember the 7
    Twitter me

  17. Thanks From:

  18. #15
    ABW Ambassador kse's Avatar
    Join Date
    November 29th, 2005
    Posts
    2,511
    using a include in your header for the css code:

    <head>
    ...
    <link href="twoColFixRtHdr.css" rel="stylesheet" type="text/css" />
    ...
    </head>

    Simular to a include in asp/php for code blocks.
    MERCHANTS: Start showing your coupons directly on your site, that way your shoppers will stop leaving your site looking for them!! If not then remove your Coupon Box!!

  19. Thanks From:

  20. #16
    ...and a Pirate's heart. Convergence's Avatar
    Join Date
    June 24th, 2005
    Posts
    6,918
    Thanks KSI, Rhia7 -

    I consider an external css one that does not reside on the same domain. Otherwise it's just a css file versus inline css.

    CSS files should always reside on the same domain and while it's convenient some times to have multiple css files, it's often best to have only one...
    Salty kisses, Sandy toes, and a Pirate's heart...

  21. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. CSS Question
    By burnden in forum WebMerge (Fourthworld.com)
    Replies: 4
    Last Post: November 18th, 2006, 04:57 AM
  2. css/table border Question
    By ~Michelle in forum Midnight Cafe'
    Replies: 3
    Last Post: January 12th, 2006, 06:55 AM
  3. CSS Question
    By Doug247 in forum Midnight Cafe'
    Replies: 3
    Last Post: May 9th, 2004, 07:46 PM
  4. CSS and Div tag question
    By Doug247 in forum Programming / Datafeeds / Tools
    Replies: 3
    Last Post: March 12th, 2004, 05:35 PM
  5. CSS question
    By my2cents in forum Programming / Datafeeds / Tools
    Replies: 1
    Last Post: March 7th, 2004, 03:53 AM

Posting Permissions

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