www.webdeveloper.com
Results 1 to 14 of 14

Thread: How to combine or merge multiple style sheets?

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    31

    How to combine or merge multiple style sheets?

    I'm currently coding a liquid page that adapts according to the user's screen size, and I'm running into some problems.
    I'm using css media queries and I'm using three style sheets.
    I just created my forth style sheet, but it looks like I can have more than three.
    When I type the name and location of my forth style sheet, the browser does not respond to the changes I make on my style sheet.

    How can I combine multiple style sheets into one or two style sheets?
    I haven't published my site yet, but here an example:

    Code:
    <head><LINK REL="SHORTCUT ICON" HREF="pic.ico">
    <title> Title goes here!</title>
    <link rel="stylesheet" href="main.css" type="text/css">
    <link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="800.css">
    <link rel="stylesheet" media="screen and (min-width: 980px) and (max-width: 1024px)" href="1024.css"
    <link rel="stylesheet" media="screen and (min-width: 1000px) and (max-width: 1152px)" href="1152.css"
    </head>
    <body>...
    </body>

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    You could combine multiple stylesheets into one. For instance you can combine the 1024.css and 1152.css into a css file named wide.css.

    Inside wide.css you would write:

    @media all and (min-width: 990px) and (max-width: 1024px){
    /* All the CSS styles from 1024.css go here */

    }
    @media screen and (min-width: 1000px) and (max-width: 1152px) {
    /* All the CSS styles from 11152.css go here */
    }

    What happen when the screen size happens to be more than 900px but less than 980px?
    How about screen sizes more than 1152px?

    One can also notice an overlap of 1024.css and 1152.css for screen sizes betwen 1000px and 1024px; In this case the 2 css styles will be used and might conflict. In that case all things being equal the 1152.css styles will be applied instead. That might not be what you want.

  3. #3
    Join Date
    Mar 2011
    Posts
    31
    Quote Originally Posted by holyhttp View Post
    You could combine multiple stylesheets into one. For instance you can combine the 1024.css and 1152.css into a css file named wide.css.

    Inside wide.css you would write:

    @media all and (min-width: 990px) and (max-width: 1024px){
    /* All the CSS styles from 1024.css go here */

    }
    @media screen and (min-width: 1000px) and (max-width: 1152px) {
    /* All the CSS styles from 11152.css go here */
    }

    What happen when the screen size happens to be more than 900px but less than 980px?
    How about screen sizes more than 1152px?

    One can also notice an overlap of 1024.css and 1152.css for screen sizes betwen 1000px and 1024px; In this case the 2 css styles will be used and might conflict. In that case all things being equal the 1152.css styles will be applied instead. That might not be what you want.

    When I combine multiple CSS files into one, as suggested above, the page does not re-size at all. I'm not sure what I'm doing wrong here.
    In regards to conflicts, I'm not sure what exact values I should enter in (min-width: 990px) and (max-width: 1024px).

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,198
    Use JavaScript to detect user's browser window size and feed it the correct CSS. The last CSS will be used if the ids/classes are identical in the previous CSS files, but the rules are different. Really a waste of time trying to make the "holy grail" of web pages:

    Choosing Dimensions for Your Web Page Layout:

    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/

    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

    Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/

  5. #5
    Join Date
    Mar 2011
    Posts
    31
    I was able to combine multiple style sheets!
    How can I avoid conflicts and what's the proper values for the min-width and max-width?
    Lastly, how can I make my page fit perfectly on other devices such as the iPad, without having an iPad? I would like to make my page compatible with other desktop, laptop and netbook resolutions.

    I would greatly appreciate your help!

  6. #6
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    To determine what values you would choose for the min-width and the max-width, just do a quick Google search about "smartphones resolutions" and "tablets resolutions".
    That will give you an idea about the pixels dimensions of the most popular mobile devices.

    You can then consider the common denominator.
    I usually design fixed width web sites to have be between 960px and 1000px for bigger screen sizes (desktops, laptops, netbooks). Even the iPad in landscape mode can use the same design as laptops.

    The only thing to worry about in that case in when a tablet in rotated to portrait mode. That's when you use CSS media queries to switch to the appropriate CSS stylesheet.

  7. #7
    Join Date
    Mar 2011
    Posts
    31
    I've got another problem!
    I coded a page for 1280px by 768px, however when I view the page in it's original 1280px by 1024px, it reverts to the 1280px by 768px.
    I tried coding a 800px by 600px page and the page still reverts to 800 by 600 even if I'm viewing it in 1280 by 1024. Why is that? is there a limit with of code length with CSS?
    I also tried to link to a different style sheet and I still have the same problem.

    I'm not if I was clear, but I hope I was.

    Please help.

  8. #8
    Join Date
    Mar 2011
    Posts
    31
    To make my previous post clear, I'm not able to use more than three media queries.
    Is there a limit to the number of media queries per style sheet?
    What can I do to be able to have more than three?

    Please help.

  9. #9
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    There is really no limit I know of about the number of media queries you can use in a given style sheet.
    Just make sure there is no overlapping between different media queries otherwise you will get some unexpected results that stems for the cascading aspect of CSS.

    To test your CSS just change the web browser window size to match each media query width range. That's one way of simulating various screen sizes.

    Do keep in mind the media queries tips I gave you have nothing to do with the screen height but the screen width. The height is not really an issue because end-users can scroll vertically not matter what devices they are using to browse your web site.

    So I suggest you focus only on the "width" variable.

  10. #10
    Join Date
    Mar 2011
    Posts
    31
    I have two more questions.

    My website is not scrollable, so Is it possible to control the height of my website with Media queries?

    I would like to test my website to see if it works with phones, tablets, netbooks and desktops. Is there some sort of website or software to enable me to test my page?

    Thanks a lot.

  11. #11
    Join Date
    Mar 2011
    Posts
    31
    Additional info:

    Since my page is designed to make the user access the the information needed without scrolling, I would like to make a page for the following screen resolutions:

    1280 X 768 px
    1280 X 960 px
    1280 X 1024 px
    When I make a page with similar width, it messes up all the content.
    I do understand the user may have extra browser toolbars/plugins, so I will adjust the content.

  12. #12
    Join Date
    Mar 2011
    Posts
    31
    Could someone please help me resolve this issue?

  13. #13
    Join Date
    Mar 2011
    Posts
    31
    bump

  14. #14
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,198
    Maybe...

    Different Stylesheets for Differently Sized Browser Windows
    what is the most accurate way to query target mobile device resolutions with CSS @media?

    Not very reliable...

    A Browser Sniffer/Screen Resolution Sniffer that swaps stylesheets
    Screen Resolution Detection
    Style Sheet Switcher (v1.1)
    Screen resolution detection and notification Script
    Screen Size Redirect Script

    Might give you some ideas on how to proceed.
    ===============================
    Choosing Dimensions for Your Web Page Layout:

    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/

    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 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