Bruce,
You need to think about structuring your CSS according to the position of
the selectors in the cascade, and the rules of inheritance.
It is useful to think of the CSS having layers, which I have named:
* Global General
* Global Specific
* Local General
* Local Specific
Global General
This begins with universal, html and body tags, and then specifies grouped,
followed by individual tag styles. Within global general is a structure from
most global, towards specific. For example, the style rules that apply to
all text block elements are given in one rule, as follows:
h1, h2, h3, h4, h5, h6, p, blockquote, address {
attribute: property;
attribute: property; ... etc.
}
h1 { attribute: property; ... etc. } (0.0.1) The figures in the round
brackets give the cascade priority.
You will see than anything specified in the list selector does not have to
be repeated in the individual tag selector.
Following these are the selectors that contain two elements, then three, and
so on:
tag tag { attribute: property; ... etc. } (0.0.2)
tag tag tag { attribute: property; ... etc. } (0.0.3)
As can be seen, these are increasing in cascade priority.
Global Specific
This part of the CSS records the selectors that contain style classes, while
maintaining the tag cascade order. For example, a selector containing only
one class and two tags comes before a selector with one class and three
tags, as follows:
tag.class { attribute: property; ... etc. } (0.1.1)
tag.class tag { attribute: property; ... etc. } (0.1.2)
tag.class tag tag { attribute: property; ... etc. } (0.1.3)
Notice how the cascade order increases sequentially as you move down the CSS
file. If the system is well thought out, it is rarely necessary to specify
more than one class in a give selector, although it is often necessary to
have pseudo classes. These then get put into a separate section of the CSS
file, and can be easily found together for editing, as follows:
tag.class tag a:link { attribute: property; ... etc. } (0.2.3)
tag.class tag a:visited { attribute: property; ... etc. } (0.2.3)
tag.class tag a:hover { attribute: property; ... etc. } (0.2.3)
tag.class tag a:active { attribute: property; ... etc. } (0.2.3)
Local General
In this section the IDs are specified, in the following order:
#id { attribute: property; ... etc. } (0.2.3)
#id tag { attribute: property; ... etc. } (0.2.3)
#id tag tag { attribute: property; ... etc. } (0.2.3)
Local Specific
Here the most specific rules are given, and as in the global specific CSS,
these can be divided into functional areas, each one running through its
cascade before starting on the next. Conflicting cascade rules cannot occur
across functional areas.
#id tag.class { attribute: property; ... etc. } (1.1.1)
#id tag.class tag { attribute: property; ... etc. } (1.1.2)
#id tag tag.class { attribute: property; ... etc. } (1.1.2)
#id tag.class tag.class { attribute: property; ... etc. } (1.2.2)
Using the four layers of CSS in the Document
It might seem intuitively obvious that the Global rules should apply to
large areas and Local rules to small areas. Sometimes this is called
"atomic" CSS. Each element has its own ID and is specifically styled. In
fact, correct use of structured CSS is exactly the opposite.
Global rules are those that apply to individual tags where ever they may
occur. Local rules apply to large areas, such as whole pages, or whole boxes
on pages.
Nothing is atomic is a well structured CSS presentation document.
Nevertheless, specifications can be as precise as making atomic markup for
each separate element.
Let us say that you want to have one line of text on one page appear in red
letter, but nothing else. You could create an id="red" for the tags that
wrap that element. Alternatively you can reserve an existing tag in that
area for text that must be red. The h4 tag is useful for this. If you keep
h4 to be used in this way, then text wrapped in he tags will be red, and
specify the red rule for a selector at the local level;
#id div.class h4 { color: rgb(255,0,0); }
then the h4 will be red here, but not anywhere else.
If the CSS has been structured correctly, a web designer can lift the markup
for menu items from the main menu and paste it into the utility menu without
worrying about style; in its new location it shall render as it should in
the utility menu. These cut and pasted blocks of markup do not carry style
elements that are intended for the area from which they were taken into the
area into which they are pasted.
Advantages of Structured CSS
The advantages of structured CSS are several fold. The CSS for any given
page can easily be broken into parts that are relevant to that page. This is
helpful while working on the web design. It is easy to find any rule when
editing the CSS since all rules are in the order of the cascade. It is
easier to avoid writing conflicting rules, since conflicting rules can
easily be traced in the cascade, and rules that are at the same level in the
cascade will be physically close in the CSS document.
The structuring principle described above has been applied to the
WikiDiction in all parts. For example, markup in the public wiki area can be
copied into the experts area or into the book excerpts area, and the
rendering will become correct for those areas without the web designer
having to alter the markup.
The use of structured CSS increases web designers' productivity and reduces
the opportunities for errors. To do this correctly, you need to look up the
specifications on which of the rules are inherited for which selectors.
Good luck,
Benjamin Rossen
http://www.wikidiction.com
> From: Bruce Gilbert <[EMAIL PROTECTED]>
> Reply-To: Bruce Gilbert <[EMAIL PROTECTED]>
> Date: Mon, 3 Oct 2005 10:32:08 -0400
> To: <[email protected]>
> Subject: [css-d] question about universal declaration of zero padding, margin
> in css stylesheets
>
> If I declare at the top of my stylesheet
> div {margin:0; padding:0;}
> when I declare a specific div eg: #header, do I need to declare the zero
> attributes in there as well or does my top declaration take care of that?
>
No. See above.
> --
> ::Bruce::
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
