Cascading Style Sheets (CSS)

CIW Course in a Nutshell

Inline or linked Style Sheets

The style sheet can be located in the <head> section of your HTML page, or it can be an external file that is linked to form the HTML page.

As I understand it, the end result is exactly the same as when the page is loaded a linked file is read in to become part of the page.

The big advantage of using a linked external file is: the file can be referenced by many pages making updates far easier. Making changes to inline styles will require you to edit each page individually.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
  <head>
    <title>Element Backgrounds with CSS</title>
    <style>
	body	{
		test-align: justify;
		margin-top: 10px;
		margin-bottom: 10px
		}
	h1	{
		text-size: 16pt;
		text-align: center;
		color: #FF0000
		}
    </style>
  </head>
  <body>
    <!-- Body Code Goes Here -->
  </body>
</html>

The above code is using an inline style sheet, with only a couple of elements defined. In reality, a style sheet is likely to have many more elements defined.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
  <head>
    <title>Element Backgrounds with CSS</title>
    <link rel="stylesheet" href="demo.css" type="text/css">
  </head>
  <body>
    <!-- Body Code Goes Here -->
  </body>
</html>

The above shows the code you will need to reference an external style sheet.