Path // www.yourhtmlsource.comStylesheets → ADVANCED CSS

Advanced CSS


First off, you're going to need a thorough grasp of the basics of CSS before you go into this. It's been easy so far, and this trend will continue here.

CSS is a simple language with a lot of depth. There are many techniques you can use to get more out of your stylesheets. There's another implementation you've yet to learn; with classes and ids you will be able to set up custom ways of styling elements without having to change the fundamental properties of a HTML tag; and contextual style gives you yet another level of control.

Clock This page was last updated on 2012-08-21



Importing Stylesheets

There is a fourth method of applying a stylesheet to your pages, suitable for CSS that you don't want old browsers trying to use. It is similar to the <link> method discussed in the introduction, but is only supported by browsers of versions 5 and above. Netscape and Internet Explorer 4 will not be able to read the stylesheet you supply this way, and so it is useful to apply things like positioning and CSS layout through this method, as old browsers mangle this code and occasionally crash if you give it to them. The code to import, which is placed in the <head>, is:

<style type="text/css" media="all">
@import "style.css";
@import "advanced.css";
</style>

It should be noted that this method is not available specifically to block out stylesheets to old browsers. It just happens that the two version 4 browsers did not support this implementation. This method is meant as a way to add partial stylesheets to your main sheets, so many sources are combined as one.

Implementation Overriding

CSS code can override other existing CSS code depending on how it is implemented. Say you had redefined the p tag in an external stylesheet. If you redefine it again in the head section of a document, this definition will be the one that is used, as it is closer to the things that it affects. Adding css using the style attribute will override anything else that has been specified elsewhere.

Overriding-wise, the sheet imported last will override the imported ones that come before — i.e. in the example above, 'advanced.css' has more weight than 'style.css' because it is imported below it. Imported stylesheets have the least influence over the final presentation of a page overall, as linked sheets will override them. So we finally have a full cascade order:

  • the style attribute overrides
  • a style block, which overrides
  • a linked stylesheet, which overrides
  • an imported sheet.

classes and ids

If you have been using a stylesheet to reformat HTML tags you will probably have wished you could just set up certain ways of formatting HTML elements and apply them to multiple tags. Without these two methods of CSS implementation, you'd soon run out of tags to reformat.

Using classes and ids (which are roughly the same thing), you can set up these custom options, which allow you to format single tags in many different ways. They're easy to set up, fast and flexible.

classes

Class selectors are created by typing a dot followed by the class name. Before you start putting in these, you should have an existing stylesheet or style block to add them to. That was all covered in the intro to CSS. Now, say you wanted to format lots of individual pieces of text as 12 point red Verdana. Adding the font face, color and size HTML around every instance where you want this type of text is a load of code, and a whole load of coding. This is the beauty of classes. Put this line of CSS into your style:

.caution {font-family: Verdana; font-size: 12pt; color: red; }

Note the dot before the name you want to use for it. You've just set up a class. Now, you can add class="caution" to any element and it will be formatted as such. Try it out on a couple of tags, like <p class="caution"> and <h1 class="caution">. When you're giving the name of the class here, the dot does not appear. Try to name the classes based on their function rather than their presentation.

ids

ids are practically the same as classes, with one difference. Only one element can be given each id per page. They can be used for elements you know will only occur once, such as header and navigation tables. If you want to use them, the code is the same, but with hashes (#) in place of the dots.

#header {width: 90%; background: white; font-size: 20px; color: purple; }

<div id="header">stuff</div>

ids are also in place to take over from the name attribute as the tag that creates internal links, but this has yet to become fully supported. More often than not, id values are used in JavaScript for referencing page elements, and are necessary for DHTML.

Both class and id names can contain characters a-z, A-Z, digits 0-9, underscores and hyphens, but they cannot start with a number or dash.

<span>

Now, I'll introduce the span tag. It does exactly what you'd expect — it influences any other code that it spans. So, to use it in conjunction with the class you set up above, do this:

<span class="caution">affected text</span>

This would create your desired text, without a font tag in sight. Note that the span tag does absolutely nothing on its own without the class attribute.

The best part about class implementation is that it isn't confined to any one tag. You use span when there isn't any other tag around the text you want to affect. But; if the text is also being bolded, you can just add the class attribute to that instead, which means the text takes on the effects of the tag and the css in the class.

<b class="caution">text</b> will create text

If you wanted all your instances of the class to be bold, you modify the class code — and every occurrence of it on your site changes instantly. But if you only want one instance to be bold, you just add the class to the bold tag that's around that specific text. This saves you having to set up a whole new class when it would be inefficient to do so.

Overriding

If you wanted one of the instances of caution to be the same as the rest, but green instead of red, instead of setting up a whole new class with just this changed, you can override this aspect of the css by putting further style definitions closer to the affected text than the class that defines it. We'll call this 'overriding by proximity', because that sounds cool. For example:

<span class="caution" style="color: green">text</span>

Here I've embedded style into the tag, the most powerful overriding technique. If the caution class was specified in an external stylesheet I could have added the modification into a style block and it still would have overridden the class, due to the cascading order defined earlier on in this tutorial. In any case, the text will be displayed in 12pt green Verdana. If you want text vastly different, set up further classes. You can have an unlimited number, so long as they all have different names.

Contextual Style

Contextual style is a powerful technique that can save you from having to define too many classes. You can have your stylesheet apply CSS rules to an element, depending on what other elements it is contained in. For instance, if I wanted all strong elements that are contained in paragraphs to be red, I could write

p strong {color: red; }

You just list the selectors (which can be element names, classes or ids) in descending order, with single spaces between them. Using this method properly is a real time-saver.

sourcetip: All of you out there using XHTML should use lowercase selectors in your code, to match the all lowercase elements in your source code.
A rule like STRONG {color: red; } might not be applied, while strong {color:red; } is safe.

For a further example, you could get all the links that occur in your navigation bar (which you've defined as div id="navigation") to be white with

div#navigation a {color: white; }

This spares you from having to add class="nav", or whatever, to all of those links. Above I'm illustrating another technique you can use. If you define your navigational area using the selector div#navigation instead of just #navigation your stylesheet will be easier to read without you having to add in comments.