How to combine or merge multiple style sheets?

@Nick-SApr 10.2012

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>

[/CODE]

to post a comment

CSS

13 Comments(s) _↴

@holyhttpApr 10.2012 — #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.

@Major_PayneApr 10.2012 — #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/choosing-dimensions-for-your-web-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/t/y/l/ydlyuyd/birtthtw/h/

Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites-shouldnt-look-the-same-across-different-browsers%E2%80%A6here-is-why.html

Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/news/cross-browser-css-in-seconds-with-prefixr/

Responsive Web Design Demystified: http://www.elated.com/articles/responsive-web-design-demystified/

Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/responsive-web-design-5-handy-tips/

It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/its-not-responsive-web-building-its-responsive-web-design/

Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

@Nick-SauthorApr 12.2012 — #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.[/QUOTE]

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).

@Nick-SauthorApr 13.2012 — #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!

@holyhttpApr 13.2012 — #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.

@Nick-SauthorApr 14.2012 — #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.

@Nick-SauthorApr 14.2012 — #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.

@holyhttpApr 16.2012 — #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.

@Nick-SauthorApr 17.2012 — #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.

@Nick-SauthorApr 18.2012 — #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
[/QUOTE]

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.

@Nick-SauthorApr 20.2012 — #Could someone please help me resolve this issue?

@Nick-SauthorMay 22.2012 — #bump

@Major_PayneMay 22.2012 — #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/choosing-dimensions-for-your-web-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/t/y/l/ydlyuyd/birtthtw/h/

Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites-shouldnt-look-the-same-across-different-browsers%E2%80%A6here-is-why.html

Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/news/cross-browser-css-in-seconds-with-prefixr/

Responsive Web Design Demystified: http://www.elated.com/articles/responsive-web-design-demystified/

Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/responsive-web-design-5-handy-tips/

It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/its-not-responsive-web-building-its-responsive-web-design/

Also in #CSS _↴

CSS suggestions needed [RESOLVED] Trouble with css first-child Disapearing <h2> tags

Success!

Help @Nick-S spread the word by sharing this article on Twitter...

Tweet This

How to combine or merge multiple style sheets?

13 Comments(s) _↴

Might give you some ideas on how to proceed.
===============================

Also in #CSS _↴

Success!

Social

Version

How to combine or merge multiple style sheets?

13 Comments(s) ↴

Might give you some ideas on how to proceed. ===============================

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Might give you some ideas on how to proceed.
===============================

Also in #CSS _↴