Looking for something like a C-style macro

[Layla Nahar]

Hi, I just started using CSS. I would like to experiment with colors and fonts, so I'm looking for an easy way to make global changes.

I'd like to be able to define several colors and several fonts the way you do #define macros in C - you know #define UPPER 500 #define LOWER 0 -

Is there a way to make say,

color1 (gets) #330000, color2 (gets) #6699aa etc

so that I can put color1 in all the properties i want to have that color, and just change the color where it is defined. (I'd also like to be able to do this for fonts, family & size.)

thank you
LN

[Ryan Fait]

http://www.w3schools.com/css/css_intro.asp

[Layla Nahar]

Hi, thanks for that link. This was one of the tutorials I used, but I didn't see anything that seemed to me to fit the description of what I was looking for.

I thought that the id Selector was close, but it didn't seem to be saying "this works like a macro" & it didn't say how I should use it. Is this what you were pointing me to? Do you have any additional information on how to use this?

thanks

[ukgeoff]

Forget the macro concept. There is no such thing but CSS does exactly want you want it to do when you know how to use it.

Basic styling options:
1. Styling tags, e.g.

Code: Select all

p {
   font-size: 12px;
   color: #FF0000;
}

This will set all text in any <p></p> tags to be 12px in height and coloured red.

2. Class styles, e.g.

Code: Select all

.blue14 {
   font-size: 14px;
   color: #0000FF;
}

NOTE the dot at the front of the class name. This is what defines it as a class.
With this, in any tag in your code you can add the class and that style will be applied, e.g.

Code: Select all

<div class='blue14'>...</div>

3. Id style, e.g.

Code: Select all

#thistagonly {
   font-weight: bold;
   font-style: italic;
}

This style can only be used once on any given page, e.g.

Code: Select all

<span id='thistagonly'>...</span>

The other thing to remember is that, as the name implies, styles cascade. That means they are given an order of precedence. Meaning that if the same attribute is defined in more than one style definition, then the style with the highest precedence applies. That order of precedence is as the numbers above.

But of course you wouldn't expect it to be that simple would you?

There is also the rule of specificity. This means that the more specific you make a definition, the greater precedence it will have where definitions clash. E.g.

Code: Select all

p {
   font-size: 12px;
   color: #FF0000;
}

p#larger {
   font-size: 14px;
}

The effect of these two is that the content of all <p> tags will be 12px high and red in colour, UNLESS one of those p tags has the the id='larger' in which case the content of that specific p tag will still be red but it will be 14px high.

Hope this helps you to understand.