CSS - Ignore original css divs when making mobile css

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 have to provide two different style sheet files and import them specifying a media type

<link rel="stylesheet" href="/all.css"> 
<link rel="stylesheet" media="screen" href="/computers.css"> 
<link rel="stylesheet" media="handheld" href="/mobile.css"> 

Alternatively you can use just one css file, in this way

@media print {
    body { font-size: 10pt }
}
@media screen {
    body { font-size: 13px }
}
@media screen, print {
    body { line-height: 1.2 }
}

In your specific problem, you could just add @media screen at the beginning of the .nav definitions.

@media screen {
    .nav { /*styles*/ }
    .nav ul { /*more styles*/ }}
    .nav li { /*more <s>beer</s> styles*/}
}

Answer 2

I would suggest separating the contents of your regular and mobile styles into separate stylesheets, like this:

1. Base: Styles common to both.
2. Regular: Styles only for the main site.
3. Mobile: Styles only for the mobile site.

Base is always included. Only regular or mobile is then included depending on the device viewing. That way you don't have to worry about overriding styles in one just to "reset" styles from another.

You can use the media property in your stylesheet link elements to determine when a stylesheet gets loaded.

Answer 3

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