Finally I discuss two advanced CSS topics- 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.
This tutorial written and contributed by
Marcus Kazmierzak of Web Blazonry.
Edited/ minor additions by JK.
Apart from working on Web Blazonry, a site on web development, Marcus
mantains a personal site at Mkaz.com
|
