CSS Lesson 3: Internal Style Sheets

Internal style sheets refers to style rules that are placed inside the <head> </head> tag pair within an XHTML document.

Internal style sheets are great if you have one page within a large site that requires a different style. For example, you may have a navigation frame that has a different background and text style from the content that loads in the main frame.

Assignment:

Type the code below into any text editor and save it with the name "csslesson03.html" in your "mySite" folder. You may view the completed lesson in a new window by clicking here . After you create this page, open it in your Web browser.

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>CSS Lesson 3: Internal Style Sheets</title>
<style type="text/css">
body { font-family: serif; color: black; background: white;}
h1 { font-family: sans-serif; color: maroon; }
</style>
</head>
<body>
<h1>Welcome to Internal Style Sheets</h1>
<p>The heading above is displayed in a sans-serif font in maroon. This text, however, is shown in black in a serif font.</p>
</body>
</html>

A Detailed Explanation:

The internal style sheet contains two style rules. Level 1 headings are displayed in sans-serif font in maroon. Everything else in the body section of the document is displayed in a serif font, black, with a white background.

Previous Lesson | Next Lesson