Categories:


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