External Stylesheet
Description
You can create a separate stylesheet file with .css file extension and define the same set of styles in each of your HTML pages.
Example
The following code shows the contents of the file styles.css.
a {
background-color:grey;
color:white
}
span {
border: thin black solid;
padding: 10px;
}
You don't need to use a style element in a stylesheet. You just use the selector, followed by the declarations for each style that you require.
You can then use the link element to bring the styles into your document.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
</head>
<body>
<a href="http://java2s.com">Visit the website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
Note
You can link to as many stylesheets as you need.
As with the style element, the order in which you import stylesheets is important if you define two styles with the same selector.
The one that is loaded last will be the one that is applied.