colour palettes and CSS

[John Pote]

Hello,

I am new to CSS and come from an embedded/electronics background. Could some help with a question on
colours and palettes using named colours rather than hex values (ie color: #aabbcc). Could not find
a solution either in my CSS book or scouring the web.

As far as I can tell colours are set using pre-determined named colours (red, blue etc) or hex
colour values (eg color: #aabbcc). These can be applied to html selectors, classes and so on in a
style sheet. However, there are many selectors and may be many classes, IDs. My current knowledge is
that I have to set the colour for each selector individually using hex values (if I do not want the
preset colours). There may be many places where a single colour is used and hence to change that
colour requires manually spotting them in the CSS file by there hex values and appropriately
changing them. This is likely to be an error prone process. Too easy to miss an instance of a colour.

My embedded background leads me to want to write:
/* create a custom palette */
#define MAINTEXT #aabbcc
#define MAINBGND #100808

/* specify colours using my custom palette names */
body { color: MAINTEXT; background-color: MAINBGND; }

Thereafter I only need to change the palette definitions and everything referring to those colours
will follow the change. Also, meaningful names seems a little easier on the mind.

Can such a 'custom' palette be defined and used in CSS?

Any help on this greatly appreciated,
Regards
John Pote

[Els]

John Pote wrote:

Hello,

I am new to CSS and come from an embedded/electronics background. Could some help with a question on
colours and palettes using named colours rather than hex values (ie color: #aabbcc). Could not find
a solution either in my CSS book or scouring the web.

As far as I can tell colours are set using pre-determined named colours (red, blue etc) or hex
colour values (eg color: #aabbcc). These can be applied to html selectors, classes and so on in a
style sheet. However, there are many selectors and may be many classes, IDs. My current knowledge is
that I have to set the colour for each selector individually using hex values (if I do not want the
preset colours). There may be many places where a single colour is used and hence to change that
colour requires manually spotting them in the CSS file by there hex values and appropriately
changing them. This is likely to be an error prone process. Too easy to miss an instance of a colour.

My embedded background leads me to want to write:
/* create a custom palette */
#define MAINTEXT #aabbcc
#define MAINBGND #100808

/* specify colours using my custom palette names */
body { color: MAINTEXT; background-color: MAINBGND; }

Thereafter I only need to change the palette definitions and everything referring to those colours
will follow the change. Also, meaningful names seems a little easier on the mind.

Can such a 'custom' palette be defined and used in CSS?

Not exactly, but you can still make it a lot easier. Make a separate
colour stylesheet, and set comments to have meaningful text, and then
group the selectors:

/* MAINTEXT COLOURS */

body,
#content p,
td,
input{
color:#aabbcc;
background-color:#100808;
border-color:#aabbcc;
}

/* SIDEBAR AND FOOTER COLOURS */

div.class1 p,
div.class2 p,
div#footer p,
div#footer li{
color:#000011;
background-color:#FFFFEE;
border-color:#aabbcc;
}
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Cinderella - Love's Got Me Doin' Time

[Eric B. Bednarz]

John Pote <jo******@jptec hnical.co.ukwri tes:

As far as I can tell colours are set using pre-determined named
colours (red, blue etc) or hex colour values (eg color:
#aabbcc).

<http://www.w3.org/TR/REC-CSS2/syndata.html#va lue-def-color>

My current knowledge is that I have to set the colour
for each selector individually using hex values (if I do not want the
preset colours).

You can group selectors as you like.

<http://www.w3.org/TR/REC-CSS2/selector.html#g rouping>

My embedded background leads me to want to write:
/* create a custom palette */
#define MAINTEXT #aabbcc
#define MAINBGND #100808

/* specify colours using my custom palette names */
body { color: MAINTEXT; background-color: MAINBGND; }

There's nothing like that in CSS, but nothing stops you from using a
(preferably local) preprocessor to mangle your CSS files.
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011