Different Style Sheets on One Page (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Bruce2000 -> Different Style Sheets on One Page (7/5/2008 3:13:42)

Lets say the header and footer of my page are using one style sheet, and I want the content to use another. I'm not sure how to assign different style sheets..... I think I have to name each section (with a div tag???) but then how do I tell it which style sheet to use?



Tailslide -> RE: Different Style Sheets on One Page (7/5/2008 6:17:50)

You can have multiple stylesheets assigned to a page but there's not much point. You don't tell the div what stylesheet to use - you tell the rule in the stylesheet which div to apply to.

For what you want to do you assign divs IDs or Classes and then refer to them in a single stylesheet so you might have: 

<body>
  <div id="header">
    header stuff here
  </div> <!-- end header -->
  <div id="content">
     Content stuff goes here
  </div> <!-- end content -->
  <div id="footer">
    footer stuff here
  </div> <!-- end footer -->
</body>


And in your CSS you refer to it like this: 

body {rules here}
#header {rules here}
#content {rules here}
#content p {rules here}
#content img {rules here}
#footer {rules here}


Obviously this is a very abbreviated example. You might want to assign a class to an element within a div and you refer to it like this in the stylesheet: 

p.floatright {float:right;}


Have a look here for an excellent tutorial: http://www.htmldog.com



womble -> RE: Different Style Sheets on One Page (7/5/2008 6:29:23)

Just make sure all your stylesheets are linked to the page in the <head> section of the page. If you're using multiple style sheets though you need to make sure that 1) unless you want <p> for example in all sections of the page to have the same style rules, that you use classes and IDs to differentiate between them, and 2) that you take into account the 'cascading' nature of CSS.

If you have a <div> for your header and one for your footer, say if you had a paragraph tag in one or other, you could either specify by using the div in your style declaration, e.g. #header p { styles go here }, or by giving the paragraph in the header a class or unique ID, e.g. p.header { styles go here }.

Because things can get very complicated with cascades if your using multiple style sheets for the same media type, it's often better to stay away from using multiple stylesheets, unless you're using a stylesheet for layout and a separate one for formatting, and put all of your styles into one stylesheet because the user's browser will have to download all the stylesheets before it can figure out what goes where and how to display it. Then that makes it less complicated to link additional alternative stylesheets and stylesheets for different media types, e.g. a print stylesheet.

All of mine I use just one stylesheet for all the styles on the page, and just use CSS comments to break up the different sections so in 6 months time I can easily see what each bit does so I don't have to remember where I put all the different bits, though within those main sections I might lump all of the link styles together and any image styles together etc., e.g.

/********************** PAGE LAYOUT STYLES ***********************/

Styles listed here


/********************** HEADER STYLES ***************************/

Styles listed here

/********************** MAIN CONTENT ***************************/

Styles listed here

/********************** FOOTER STYLES ***************************/

Styles listed here

<edit> [sm=yikes.gif] Tail beat me to it! [:D] </edit>



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625