CODEWITHSUNDEEP
css
Daniel Kivatinos
Daniel Kivatinos

Reputation: 25046

CSS Inheritance

Is there a way to completely ignore a CSS file from a header that is imported into your html file?

I want one page to have its own independent CSS not inheriting from any other CSS sources.

Upvotes: 0

Views: 406

Answers (6)

Bayard Randel
Bayard Randel

Reputation: 10086

If you apply a unique id to the <body> of your custom page, you can easily make declarations specific to that page in your global css. There's no sense in serving a different css file really, as your global/site css will be cached on the client anyway.

Personally I think this is a good practice generally for managing page specific styles. In php you can achieve this dynamically in your view with

<body id="<?= basename($_SERVER['PHP_SELF'], ".php")?>">

in ASP.Net you can set an id using:

System.IO.Path.GetFileNameWithoutExtension(HttpContext.Current.Request.Url.AbsolutePath).ToLower

Upvotes: 3

SpliFF
SpliFF

Reputation: 39014

Put the content you don't want styled in an iframe, then the header will still appear on the page but the styles won't be inherited.

Upvotes: 0

cdonner
cdonner

Reputation: 37708

You could use !important declarations in your local stylesheet to override the standard inheritance.

http://www.w3.org/TR/CSS2/cascade.html#important-rules

Upvotes: 3

cletus
cletus

Reputation: 625447

Isn't the obvious solution not to include that CSS file in this page?

Upvotes: 1

Luke Schafer
Luke Schafer

Reputation: 9265

not really. there are ways to remove the css (like this: http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml ) but it doesn't work in IE

Under what circumstances do you want to do this? Do you have no control over the page?

Upvotes: 0

Matthew James Taylor
Matthew James Taylor

Reputation: 4866

You could use JavaScript to remove the linked CSS file but then you would need to only add that JavaScript on that page.

Alternatively you could put an ID in the body tag and target a completely different set of CSS rules for that page:

Standard pages:

<body id="standard">

#standard h1 {
   color:blue;
}

The other page:

<body id="different">

#different h1 {
   color:red;
}

A bit of planning beforehand is well worth the effort

Upvotes: 0

Related Questions