How to bypass global CSS

Posted on 2006-06-26
Medium Priority
Last Modified: 2013-11-19
Hi guys, I have a web site with a fair bit of CSS for all sorts of layout needs. The problem is that for one particular section I would like to bypass all the CSS tags specified in our CSS file. Is it possible and how?

Question by:mpaert
  • 4
  • 3
  • 2
  • +1

Expert Comment

ID: 16984008
Yes it is...

You can either create extra styles for this section, or you can just over ride it in the html

If you have a CSS file which is supposed to change the background color of a web page to black, but in the body tag of the actual html page you put <body bgcolor="#ffffff"> then the local html would automatically over ride the css.

Alternatly, you can just not include the css in that single page and recreate parts of the style using the html methods.

Alternatly, create a second css page thats specific for that section.

You could even create local styles using the <style> tag in the html of the page.

Author Comment

ID: 16984040
Thanks Naorc for your help.

In fact, it's not just one page, but an entire site. The section is a menu section, that we're considering to buy, but currently, our own CSS is making it look a bit ugly

See here:

Any specific ideas you could give us on how to make it appear normally?


Expert Comment

ID: 16984093
you are refering to the menu at the top with Hosting, Domain ANmes, support etc i assume  (and your right.. it is ugly, the rest of the site is nice though)

Is it a seperate frame from the rest of the page, or is it a chunk of code that appears on every page?
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.


Author Comment

ID: 16984170
this code will appear on all  pages.

Expert Comment

ID: 16984204

Maybe you should consider creating a few frames then..

Cut your page into 2 frames, a banner page across the top and then a main body pane taking up the bottom 90% of the page.

Create 2 X CSS files, one for the top page, one for the bottom and do the 2 designs seperate.

Its just a suggestion...

Expert Comment

ID: 16984307
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            <meta http-equiv="imagetoolbar" content="no">

            <LINK href="../Css/Controls1.css" type="text/css" rel="stylesheet">
            <LINK href="../Css/Controls2.css" type="text/css" rel="stylesheet">
LVL 10

Accepted Solution

Havin_it earned 2000 total points
ID: 16985070
There's no earthly need to start chucking frames into the situation.  All you need to do is extend your existing global stylesheet with rules that suit the menu better.

Let's say your menu is contained in a <div> element (just f'rinstance, it really doesn't matter, could be a <ul> or whatever).  You give it either an id or class attribute; here I'll choose id.

<div id="menu">

In your stylesheet, you make rules that target this single element, like so:

div#menu { ... }
(to style the div itself)

div#menu ul { ... }
(to style <ul> elements that are children of the div)

div#menu ul li { ... }
(you get the drift?)

If this menu is on every page, then there's no inefficiency in doing this.  It would take just as much code (more in most cases) to do it any other way.

Hope this helps ;)

Author Comment

ID: 16985121
Havin_it, i like your idea. I'll try and make sense of it tomorrow when I go through our site. I'll let yo know. Thanks.

Author Comment

ID: 17000675
Hi Havin_it, I think I understand the principle, but how would I go about if I want to bypass all CSS tags that are mentioned in the CSS sheet? e.g., <ul> may be defined in the CSS sheet, but my menu has it as well, that should be blank...
LVL 10

Expert Comment

ID: 17000883
The example rules above are all about targeting specific elements on the page.  No two elements on a page should have the same id, so the existing global rule like

ul {
  background-color: #ccc;

will be overridden *only* for <ul> elements that are inside the div with id="menu", by a rule like this:

div#menu ul {
  background-color: #fff;

All other <ul> elements elsewhere on the page will still obey the global rule.  If there's no container around the <ul>, then give that an id or class attribute so you can create unique style rules for it, like

<ul id="menu">

You use the same basic method as before to make the rules, e.g.

ul#menu {...}
ul#menu li {...}

Unfortunately there's no 'shorthand' approach to dispel every rule you've already declared; you have to replace each attribute with your preferred value for the target element.  Even if you did wave a wand and kill every style in the target (there's possibly a way with javascript), you'd still have to replace them or the target would have *no style*, and who wants that??

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question