We use a custom cms. Overall page design is linked from the global stylesheet. Centre column is controlled by a standard cms. I wanted to use a range of css effects for one particular section that had no application elsewhere on the site. Thus - I felt it would be inappropriate to add them to the central style-sheet. The range of styles is such that embedding directly would not be all that effective. Instead I created a second stylesheet linked only to that page. When tested outside the site environment it works fine. However, once uploaded - the global stylesheet is over-riding certain values in the secondary stylesheet. I.e. the css menu is being treated as a link - and its text is taking on the colour of the global link - rather than the one we were hoping for. Is there someway I can correct this - or a more efficient way of achieving what I want? Might not be all that clear a question -so please let me know if it needs clarifying. Dylan
There are two issues to deal with. The first is specificity. If a global selector is more specific than the local selector, the global wins out. You will need to put your eyes to work where a local rule gets overturned to find the culprit. The second issue is that the last of equal selectors wins out. For example, if you have p {font-size: 1em;} and later, p{font-size: .8em;}, the font size will be .8em for paragraphs. That means you will want the globals to be applied first, then the local. The easiest way to do that is to link to the local style sheet, and have that stylesheet import the global stylesheet. Example: <link type="text/css" url([i]local.css[/i]) /> Code (markup): Then, at the top of the local file add this: @import url([i]global.css[/i]); rest of style rules ... Code (markup): cheers, gary
What ? :O It should be like that : <link type="text/css" rel="stylesheet" href="local.css" /> Code (markup):
Example This Ä°nternal Css <style sheet="type/text"> p {font-color:#3333aa;font-size:10px} </style> This codes saved a file.File name file.css ,I said and <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="file.css" /> </head> <body> <p>This one is external file </p> </body> </html> Here is external css
Appreciate the advice and was able to solve it!. Thanks for the explanation as well Gary - makes a lot of sense. Dylan
If u use 2nd style sheet to overide global, use !important to overide previous value. Example: .someclass { margin-bottom: 1em !important; } PHP:
That's not needed where selectors have equal specificity. The last read rule will apply. If you want the first (global) rule to overrule the second, the !important declaration could be used. But that should be unnecessary. cheers, gary