CSS, How to use External Style Sheets!

by admin on Aug.14, 2009, under Tutorials

The third method of applying styles to document involves linking to external style sheets. External style sheets are the most appropriate method for styling documents. If styles need to be changes, the modifications can take place in one CSS file rather than all HTML pages.

To change the header style to an external style, move the rule set to a new CSS file. That means copy the code to a new filed called something like style.css

@charset “UTF-8″;
/* CSS Document */

body {background-color: grey;}

p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: white;
width: 10em;
}

Next you have to link your HTML page to your CSS.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>

</head>
<body>

</body>
</html>

That is all the code required. Now you simply add the style sheet link in all of your html pages and you can control your entire site from on style sheet.