]> HTML | Web Developer Reference Blog

Import vs Link

Thursday, February 25th, 2010

Import is where you import a .css file from inside another css declaration in the header of a html document or in another style-sheet. The main advantage is that older browsers ignore these and will not fall over because of styles they don’t understand.

You can have an import within a link or an import but not within a link. Using imports correctly you can ‘override’ styles to fix flaws of the rendering in older browsers which would cause a design fault in a newer browser.

e.g.

//STYLES HERE TO FIX FLAWS IN THE WAY OLDER BROSWERS RENDER WEBSITE
@import "newerbrowser.css";//IMPORT TO OVERRIDE THEM

Method Priorities in (X)HTML

Thursday, February 25th, 2010

A style defined in an (X)HTML tag takes priority over styles defined in the head of the (X)HTML document. Styles defined in the head of the (X)HTML document take priority over styles defined in an external style sheet.

For example if you have the font colour of text contained within a <p> tag black in the main external style-sheet of your website but on one page you wish to have it dark grey. You don’t need to add a new class and give it to every <p> tag to do this, you can just define a fresh style in the header of the document to change the font colour which will take priority over the original style.

Implementing CSS

Thursday, February 25th, 2010

CSS can be implemented inline (<p style=”font-family: Arial, Tahoma;”>text</p>), in the header (<style type=”text/css”><!– p { font-family: Arial, Tahoma; } –></style>) or in an external style sheet. The way you use depends on the situation.

When marking up a template, the easiest method is to use inline, then use html tidy to assign classes and ids for the different styles.

Using the header is often good to speed up a page if you need to import a style-sheet if the browser is Internet Explorer but run the non-IE import first so the styles are overridden if the browser being used is IE.