Stylesheets - Please help ...

Author

Please help ...

Mel

2005-12-08, 7:35 pm

I have a base font of

..base {
font-size: 75%;
padding: 10px;
}

#red {
color: red;
}

#bold {
font-weight: bold;
}

#border {
border: 1px solid brown;
}

1) HOW can i say use base + red + bold in my html code ?
2) HOW would you do it, without having to define all possible
combination of things

thanks for your help

Chris Beall

2005-12-08, 7:35 pm

Mel wrote:

> I have a base font of
>
> .base {
> font-size: 75%;
> padding: 10px;
> }
>
> #red {
> color: red;
> }
>
> #bold {
> font-weight: bold;
> }
>
> #border {
> border: 1px solid brown;
> }
>
> 1) HOW can i say use base + red + bold in my html code ?
> 2) HOW would you do it, without having to define all possible
> combination of things
>
> thanks for your help
>
Mel,

You would benefit from carefully reading
http://www.w3.org/TR/CSS21/selector.html.

Assuming that you want the same 'base' font on most of your pages, you
would be better off simply assigning these properties to the <body> HTML
tag, rather than creating a 'base' class. This will make the specified
font the default throughout your pages.

Likewise, you would be better off creating a class for red, bold, and
border, rather than using an ID. ID can be used only once on a given
page, i.e. only one HTML element on a page can have any given ID (no
duplicates), thus with your current scheme you could have only one red
item on a page, probably not what you wanted.

Classes, however, can be used over and over, and an HTML element can be
assigned multiple classes. So you could have something like <span
class="red bold border", which seems to be what you had in mind.

BUT, I would like to suggest that you refine your thinking a bit. HTML
describes a semantic environment, things like 'a paragraph' or 'a list',
without defining what those things look like. That's the job of CSS.
But CSS allows another level of abstraction. Rather than specifying
each detail of styling, such as red, or bold, then having to invoke each
of those details at every point in the HTML, consider thinking in terms
of presentation semantics, such as 'important' or 'navigation' or
'obscure legalese'. These become classes in your CSS, and you define
each one in terms of the specific properties that please you at the
moment. For example:

..navigation {
color: green ;
backround-color: black ;
}
..legalese {
font-size: 80% ;
color: gray ;
background-color: white ;
}
..important {
font-weight: bold ;
color: red ;
background-color: white ;
}

If you later decide that 'important' things should be in larger text,
you add ONE LINE to your CSS for that class:
font-size: 120% ;
and you are done.

If you later decide that 'legalese' should be red instead of gray, you
change one line of your CSS for that class:
color: red ;
and you don't need to touch the HTML.

And, yes, you CAN combine classes, so you could say something like:
<p class="important legalese">yadda yadda</p>.
With the above CSS (absent the later changes) this would produce text
that that was 80%, bold, and red, on a white background. NOTE that the
ORDER in which the classes are applied is the order in which they appear
in the CSS and not the order in which they are specified on the class=
attribute.

Chris Beall

Eric B. Bednarz

2005-12-08, 7:35 pm

Chris Beall <Chris_Beall@prodigy.net> writes:

> Assuming that you want the same 'base' font on most of your pages, you
> would be better off simply assigning these properties to the <body>
> HTML tag, rather than creating a 'base' class. This will make the
> specified font the default throughout your pages.

You can assign display properties to *tags* in *whatever* way your
editor handles syntax-highlighting. :)
For styling of HTML element types I'd recommend to declare at least the
font properties for both BODY and TABLE. Some UAs happen to be broken
for arguable reasons (IE windows), some happen to be broken as designed
because ‘the makers of’ just hate your guts for no apparent reason
(Geckos, Opera and Safari at least).

> .navigation {

IMNSHO the universal selector's name is misleading. It's a universal
problem, not a universal solution. When I work with 3rd party CSS, I
usually copy the input to a new directory, open that with a browser,
unlink the original and write a new style sheet based on the original's
visuals. That's far from convenient but usually twice as productive
than trying to decipher other people's style sheets. 80+% of the class
and ID declarations dropping simple selectors is the most prominent
reason for that as far as I am concerned.

--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011