Celtnet Information:

Introduction to CSS: Part 4

In this section you'll learn more about how CSS styles actually apply to HTML elements and how you can use this information to group related selectors and actively reduce the size of your CSS include file. In effect what you'll learn about here is how CSS elements interact with HTML tags and what happens when you nest tags with associated CSS formatting within one another.

Applying Multiple Classes to Elements

In actuality you're not limited to a single style for any HTML element. You can combine classes together. This is done within the class property of the HTML tag element using spaces, as show below:

<html>
<head>
<style type="text/css">
.marker {color:red;}
.yellowbg {background-color:#ff0;}
</style>

</head>

<body>
<p class="marker yellowbg">Both styles will apply to the <p> tag</p>
</body>

</html>

The effect of using this newly-defined <p> tag is as follows:

Both styles will apply to the <p> tag

HTML selectors are employed to redefine the genral look for an HTML tag in your entire website.

Applying Styles by id Property

As you have seen in part 3 HTML elements can have id properties as well as class names. This is an important feature to note, as properties inherited from an id will overwrite properties an element gets from its class (or from its HTML element type). This distinction is demonstrated by the example below:

The following example should make things clearer:

<html>
<head>
<style type="text/css">
#banner {color:green;}
.special {color:red; background-color:#ff9;}
div {color:blue; font-weight: bold;}
</style>

</head>

<body>
<div id="banner" class="special">This is text will come out green as the ID upercedes both the class and the element classes.</div>
</body>

</html>

The effect of combining these classes is as follows:

How CSS styles apply to nested elements

We've already seen how CSS styles can be combined, and how those CSS styles function depending on the elemet or class that they relate to. The following example gives a more complex example of using CSS with nested elements (ie elements defined within elements in HTML):

<html>
<head>
<style type="text/css">
    div {color:green;}
    .special {color:red; background-color:#ff9;}
    #banner {text-decoration:underline; font-weight:bold; color:blue;}
</style>
</head>

<body>
<div>
   This text is only inside the div...
   <p class="special">
      This text is inside the div and inside the paragraph...
      <span id="baner">
         This text is inside the div, paragraph with classname and span with id.
      <span>
   <p>
</div>
</body>
</html>

The result of these nested elements is as follows:

This text is only inside the div...

This text is inside the div and inside the paragraph...
This text is inside the div, paragraph with classname and span with id.

Admittedly, this is a fairly complex example, but what's going on here is that the first protion of text is green because int's inside the div.

The second block of text is coloured red as it's inside a class and this overrides the previous colour property on the HTML tag (it also gets the coloured background property defined within the class).

the third block of text lies inside the two previous elements but as it's id property overrules both the class property and the HTML tag property it's style overrides any conflicting style properties inherited from the other elements. (It inherits the background colour from the paragraph <p> class as the id style doesn't specify a background.

Grouping Selectors

We've already seen how various selectors behave when they're nested (and which selectors have dominance when there's a choice between them). Now we'll look at how selectors can be grouped and nested within your CSS file to reduce the size of the file (and the speed with which it uploads). Consider the example below:

.headlines{
   font-family:mabinogi; color:black; background:CCCCCC; font-size:14pt;
}

.sublines {
   font-family:mabinogi; color:black; background:CCCCCC; font-size:12pt;
}

.infotext {
   font-family:mabinogi; color:black; background:CCCCCC; font-size:10pt;
}

As you can see, all three of the selectors above are virtually identical. Indeed, the only vary in their font-size property. Which effectively means that some grouping-together can be done to reduce the verbosity of the file, as shown below:

.headlines, .sublines, .infotext {
font-family:mabinogi; color:black; background:cccccc;
}

.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}

As you can see, the common elements of the selectors can be defined all at once and the individual attributes that distinguish the selectors from one another can be added subsequently. This is a very useful feature of CSS and you can use it to significantly optimize the size of your CSS files.

Context-dependent Selectors

Just as it's possible to have different behaviours dependent on the nexting of the selectors it's also possible to design selectors that only function in certain contexts. For example, it's possible to design a style for the embolden <b> tag that only functions if the text is not only emboldened, but also italicized. This is simplicity itself to implement, as shown below:

i b {font-size:16px; color:red; }

The definition above works only if the <b> tag is enclosed in an <i> tag, like this: <i><b>. Notice that for these combined selectors the selectors themselves are separated by spaces. Interestingly, as the combined context-dependent selectors effectively act like a single selector it's possible to group them with other selectors, as in the example below:

i b, .headline, b.footlines {font-size:16px; color:red;}

The example above works for all <b> tags enclosed in <i> tags, for all .headlines classes and for all <b> tags of class .footlines.

That concludes all the essential preliminaries, and it's now possible to look at some real-world examples of how CSS is actually employed to help build a website.

On to the next part...