Newlogo.gif (8646 bytes) External Sheets part 2

Using external and internal cascading style sheets in the same page.

Like the previous page, this one uses the external style sheet file "MyStyles.css", whose contents are:

H1 {color:blue; font-size:36pt}
H2 {font-family: Arial; color:blue}

However it also has a cascading style sheet in its <HEAD> section, which goes like this:

The external sheet modifies the browser's built-in H1 and H2 style definitions. The internal sheet leaves the H2 style unchanged, but makes further alterations to the H1 style, changing its colour to red (overriding the blue colour specified in the external sheet) and switching it to italic font. Thus H1 text ends up bold (from the browser's built-in H1 definition), 36 point size (from the external sheet) blue and italic (from the internal sheet)

This sheet also creates a new H2.special class. This is based on the modified H2 style created by the external sheet, so has Arial font. The H2.special class adds underline to the style.

This is in modified H1 format

And this is in modified H2 format

And this is in H2.special format

You can link an external file into as many pages as you wish, which makes them very powerful. For example, by creating an external sheet like this:

BODY {background-image: url(MyBack.gif); font-family:sans-serif}

then linking it into every page in your site, you can set the entire site's page background and basic typestyle. If you wanted to change the site's standard page background image, you'd just need to edit the style sheet file and upload the new version to your server. The pages themselves wouldn't need any modifications or uploads.

Back to Menu