External Style Sheets

Contact Us or call 1-877-932-8228
External Style Sheets

External Style Sheets

External style sheets are created in separate documents with a ".css" extension. An external style sheet is simply a listing of rules. It cannot contain HTML tags. CrashCourse/Demos/Stylesheet.css is an example of an external style sheet.

Code Sample:

CrashCourse/Demos/StyleSheet.css
.warning {
	color: #ff0000;
}
h1.warning {
	text-decoration: underline;
}
p.warning {
	font-weight: bold;
}

The above CSS file can be included in any number of HTML pages. The <link> tag, which goes in the head of an HTML page, is used to link to an external style sheet.

Code Sample:

CrashCourse/Demos/ExternalStyleSheet.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>External Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>
</body>
</html>
<link> Attributes
Attributed Description
href points to the location of the external style sheet
rel must be set to "stylesheet" for linking style sheets
type must be set to "text/css" for linking to cascading style sheets

There is no limit to the number of external style sheets a single HTML page can use. Also, external style sheets can be combined with embedded style sheets.

Next