www.webdeveloper.com
Results 1 to 4 of 4

Thread: More than one CSS

  1. #1
    Join Date
    Feb 2005
    Location
    Florida
    Posts
    219

    More than one CSS

    Why are the reasons why someone would use more than one Cascading style sheet? Is it to make things simpler, or to use a different CSS for every browser or resolution?

    I am voting for the latter. Right now, I have a page that should be at the center, but in low and very high resolution (labtop screens), it goes to hell. I am thinking of doing something like this:

    position: absolute;
    left: 60%;

    I don't know if using left: 60%, for example, is even allowed. I'll have to try it. Either that, or I'll have to use a CSS for each resolution, which sounds tedious.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by rpcarnell
    Why are the reasons why someone would use more than one Cascading style sheet? Is it to make things simpler, or to use a different CSS for every browser or resolution?

    I am voting for the latter. Right now, I have a page that should be at the center, but in low and very high resolution (labtop screens), it goes to hell. I am thinking of doing something like this:

    position: absolute;
    left: 60%;

    I don't know if using left: 60%, for example, is even allowed. I'll have to try it. Either that, or I'll have to use a CSS for each resolution, which sounds tedious.
    Multiple stylesheets are allowed. Often, they segregate their intended target. -For instance, an all-encompassing one-for-all stylesheet, makes every single page the same. This is a good thing. If you've got a 100-page website, -this is VERY useful!
    But what if two or three pages need MORE, or DIFFERENT styles? For that, it might be logical to have a second external stylesheet, seperate from and in addition to the 'one-for-all' stylesheet, and refereance it upon only the pages that require it.
    And sometimes yes, -a seperate stylesheet that is called-for based upon a conditional statement that 'sniffs' the browser-type and, if it is of the type/brande/version, they get that stylesheet...
    Here, -not being a MAC user myself, I would appreciate. If I had a major site that required MAC browser users, I'd have to hire-out the stylesheet probably. And therefore, I'd also probably want to keep it seperate from sheets that I personally would be responsible for modifying (lest I mess it up accidentally...) But being 'for MAC-users', keeping it seperate from the one-for-all stylsheet, the non-MAC users will not have to burden their download time with included styles that never affect them. This would also (if a very large site with tons of daily traffic) help to keep my bandwidth useage down, to only serve content & styles according to the visitor's needs and technology being used to access it).

    I do know what you're saying, though. I have seen web pages that have four, five or more (sometimes, many more!) links to seperate stylsheets and sometimes wonder ..why? I suppose that if all of them were to be rolled together, -it would be a monster to edit and keep track of(??). I'd be scared-away if someone here in the forum requested some stylesheet assistance and the URL revealed a stylesheet that was 20 or 30KB in size (several dozen screen-heights??)...

    Also, re:
    "....I am voting for the latter. Right now, I have a page that should be at the center, but in low and very high resolution (labtop screens), it goes to hell. I am thinking of doing something like this:

    position: absolute;
    left: 60%;"
    Give the container (be it a TABLE or DIV, and if one isn't present, make one that contains the entire page) a width, and auto-adjust the margins. To make this work, you must have a width (either pixel amount, or percentage).

    So
    <div style="width:75%; margin:15px auto;">
    ~your entire page goes here~
    </div>

    Would make your work be 75% the width of whatever screen you are using, irregardless of resolution or screen-width, and position it 15-pixels from the top of the screen, and auto-adjust the other side, thus centering the page.
    Last edited by WebJoel; 06-19-2006 at 07:46 AM.

  3. #3
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    On larger sites, I like to use one stylesheet for the physical layout of the site, and others for each style that I apply to it. i incorporate a style switcher and allow the user to choose a blue or green or yellow etc look, but still have the same layout. benefits of doing this way are that I only need 1 layout sheet which when a user changes the colour style of the website - won't need to be reloaded/downloaded therfore increasing page loading speeds

    It also helps to divide specific things like colours -v- layout etc into multiple sheets when you need a lot of styling, just to help you find specific styles easier etc.

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    I use multiple stylesheets, too. One for the homepage, and one for the interior pages. (I don't include all the "big" navigation elements on my interior pages as found on the homepage.) I also have one for "text-only" and one for a "print version."

    Also, if any of my pages have javascript that interweaves with CSS, I make a separate stylesheet for that, too. That way, if I decide later to get rid of the javascript effect, all I do is get rid of the stylesheet, rather than looking through a huge one for all the style settings; it helps me know what styles are in use, and which are not.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles