Styles in a style

tshad · Nov 12, 2004

Is there a way to put a style in a style.

I have my pages using one color for the background and one for the text and links. I have :#2FABAD for may backgrounds and #4AAABD for my text. The problem is I have them in many places in my .css file and in the pages themselves.

My .css file looks something like:

Code:

th {
    font-family:Arial, Helvetica, sans-serif;
	background-color:#2FABAD;
	color:white;
}
a:visited {
	color:#4AAABD;
}
a:link {
	color:#4AAABD;
}
a:active {
	color:#4AAABD;
}

If I want to change the colors I need to change each one.

I would like to be able to say something like:

.bgColor {background-color:#2FABAD;}

and

.fgColor {color:#4AAABD}

And put these in my styles. I can then change .bgColor and .fgColor and all my menu colors on all my pages change.

This works fine for all the pages that have the styles inline, but not in the style sheet.

Is there a way to do this?

Thanks,

Tom

cLFlaVA · Nov 12, 2004

Why not something like this:

Code:

th[red], body, div, td[/red] {
    font-family:Arial, Helvetica, sans-serif;
    background-color:#2FABAD;
    color:white;
}
a:visited[red], a:link, a:active[/red] {
    color:#4AAABD;
}

*cLFlaVA
----------------------------
"Holy crip he's a crapple!

tshad · Nov 12, 2004

That would be fine, but I don't necessarily want all tables with that and only certain areas, such as menu areas are going to have these colors.

Also, some text will be this color, others will be black.

If I can set a style to this color and apply the style (as I do in a tag on the html page) on the .css, that would be better.

Thanks,

Tom

Halcrow · Nov 15, 2004

Hope this helps:

set you default colours in the body tag:

Code:

body {
   background-color: #121212;
   color: #800000;
   }

Then, for any section that you want the colours to be different (i.e. in a sidemenu), put the section in an id'd div tag and apply different style to that:

Code:

<div id="sidemenu">...</div>

Style:

#sidemenu {
   color: #562d4e;
   }

You might not even need the div tag: if its a table you want different, id the table etc. - a list, id the list...

Halcrow · Nov 15, 2004

oh yeah, forgot:

If you want to change (for example) a visited link in a certain section (i.e in a div with id sidemenu) then your style would look like this:

Code:

html:

<div id="sidemenu">
  <a href="/index.html">Home</a>
</div>

CSS:

#sidemenu a:visited {
   color: #776655;
   text-decoration: none;
   }

ChrisHunt · Nov 15, 2004

There's no way to define your own colours in CSS. I agree with you, it would be really useful if you could put something like this at the top of your stylesheet:

Code:

/* Define working pallette (WON'T WORK!) */
color $foreground: #000000;
color $background: #FFFFCC;
color $highlight: #FF0000;

and then refer to those definitions in your subsequent CSS rules:

Code:

th {
   color: $highlight; /* WILL NOT WORK! */
}

However, that's not something that the CSS syntax provides for. Nonetheless, I think it's good practice to put a comment like this at the top of your stylesheet:

Code:

/* Colours should be drawn from the following pallette:
 *
 *    Dark Green  : #009933  -- Used in backgrounds & titles
 *    Light Green : #CCFFCC  -- } Used to highlight forms
 *    Pale Yellow : #FFFFCC  -- } and areas of text
 *    Red         : #FF0000  -- Used to highlight important areas
 *    Light Grey  : #CCCCCC  -- Used as a border colour for tables
 *    Black       : #000000  -- General text colour
 *    White       : #FFFFFF  -- General background colour
 */

It acts as a reminder of what colours to use, and what for. If you need to change them, just do a global find/replace with your text editor.

Other than that, as the other guys say, you should try to rely on inheritance as much as possible when specifying colors. If most of your page is black-on-white, just apply that colour scheme to the [tt]<body>[/tt] tag and it will be inherited by the others. Don't specify a [tt]color[/tt] for every CSS rule.

Another thing to remember is that you can apply multiple classes to an HTML element. Say you want to define a highlighter-pen-style background to some page elements, in addition to whatever highlighing they may have, you can do this:

Code:

.highlight {
   background-color: #FFFF99;
}

a.external {
   color: red
   /* other rules here... */
}

Code:

<a class="external highlight" href="[URL unfurl="true"]http://www.tek-tips.com">My[/URL] favorite forum</a>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Styles in a style

tshad

Programmer

cLFlaVA

Programmer

tshad

Programmer

Halcrow

Programmer

Halcrow

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor