April 12, 201016 yr Hi guys, Is it frowned upon (in terms of standards / best practice) to embed page specific styles in an html page rather than create many external stylesheets and reference them? I have 7 or 8 styles which are page specific (heading 1, body colour, container div background, link colours etc), and it seems a bit wasteful on server calls to have to create css files for every page. But, I would like to stick to best practice (although not at the expense of common sense) Cheers, Martin
April 12, 201016 yr Best practice is always to put styles in an external style sheet. The way I'd do it is to have all my page-specific styles in one style sheet, away from my other ones. I'd then add a class or id to the body tag on each of the pages: <body id="home_page"> and then split my stle sheet into sections: /* Home Page */ #home_page p { color: #c00; font-size: 3.2em; } #home_page a:hover { text-decoration: underline; } /* Contact page */ #contact_page p { color: #00c; font-size: 1.5em; }
April 12, 201016 yr Best practice is always to put styles in an external style sheet. The way I'd do it is to have all my page-specific styles in one style sheet, away from my other ones. I'd then add a class or id to the body tag on each of the pages: <body id="home_page"> and then split my stle sheet into sections: /* Home Page */ #home_page p { color: #c00; font-size: 3.2em; } #home_page a:hover { text-decoration: underline; } /* Contact page */ #contact_page p { color: #00c; font-size: 1.5em; } Ditto
April 12, 201016 yr Author Thanks guys! That was originally how I had it, but I ended up with constructs like: body#about_me div#header a:hover { } body#about_me div#content a:hover { } And worse... Incredibly long cascades, which struck me as VERY clunky. However if that is the best way then so be it
April 12, 201016 yr Thanks guys! That was originally how I had it, but I ended up with constructs like: body#about_me div#header a:hover { } body#about_me div#content a:hover { } And worse... Incredibly long cascades, which struck me as VERY clunky. However if that is the best way then so be it To reduce the clunk very slightly, you don't need the element selector in your rules since there can only be 1 of each ID on a page, so that first rule could be #about_me #header a:hover { } saving you a whopping 7 characters! You can pull similar tricks with classes if you know that you only assign a certain class to a certain element (like the class "menuItem" is only ever given to the list items in your main navigation menu). You could potentially reduce something like: div#header ul#navigation li.menuItem a:hover { } down to .menuItem a:hover { }
Create an account or sign in to comment