Advanced CSS concepts
Grouping/contextualizing selectors, and cascading/inheritance
Grouping and contextualizing selectors
CSS supports 2 nifty declarations to help streamline and shorten your
style sheets. Let's look at grouping first:
-Grouping
Identical styles that apply to different elements can be combined into
one. Simply separate each element with a comma(,), followed by the style
itself:
BODY, P, #mytable {background-color:gray}
With the above, your <BODY>, <P> and ID "mytable"
will all have a gray background.
-Contextualizing selectors
Getting a little technical here, in a CSS definition, the selector is the tag, id, or class that
proceeds the style. For example:
P {font-weight:bold}
.myclass {color:red}
"P" and "myclass" are called selectors.
CSS allows you to nest one selector within another, in which the result
is that the style will only be applied when the HTML source contains such
a setup. Take a look at this:
TABLE A {color:brown}
DIV B {background-color:yellow}
This will cause only links that appear inside a table to be brown in
foreground color, and bold text that appear inside a div to be yellow in
background.
Cascading and inheritance
There's a reason why CSS is called CSS (Cascading Style Sheets), and it
has to do with the order of precedence in which styles are applied. When
you have an linked, embedded, and inline style sheet all defined on the
same page, the order of precedence is ascending. For example, if both an
embedded and inline style sheet attempts to manipulate the same aspect of
the same element,
inline dominates.
Inheritance refers to how the style of one element in "passed
on" to another provided no explicit style is assigned to the later.
Some style declarations (ie: font-family)
are inherited, meaning they affect not just the element it was assigned
to, but elements under it as well:
<P
style="font-family:Verdana">This font is Verdana. <b>So
is this font</b></P>
Both P and B carry the font Verdana, even though the style was only
defined on P. Inheritance exists to save the user the hassle of redefining
styles that are obviously intended for everything the element encapsulates.
A good CSS reference will list which style in CSS are inherited, and which
are not.
On that note we come to a conclusion. You now should have a solid
understanding of CSS, and how to take advantage of it on your site.
|