Question

Hopefully my title isn’t too confusing. Anyways, I’m still learning CSS and right now I’m in the process of creating a mobile version of my company’s site. I currently want to modify our navigation bar and the CSS for the navigation is a bit lengthy. So right now in the CSS file there is

.nav { /*styles*/ }
.nav ul { /*more styles*/ }
.nav li { /*more <s>beer</s> styles*/}
/*and so on*/

Is there anyway to have it so the mobile version of the site ignores all #nav selectors from the original file regardless if I made a new selector in the mobile css? Or do I have to override each selector in the original css with new ones in the mobile css?

Answer 1

You can create your stylesheets with media attributes, like so:

<link rel="stylesheet" media="screen" ... etc./>

The fragment above references a normal browser window.

Here’s where you can find out about those: http://www.w3.org/TR/CSS21/media.html