Using CSS

Linked Styles

Linked styles are external stylesheets with their own file extenstion of .css. They are not contained within a HTML file. Instead the HTML file contains a link to the position of the css file. So the HTML file will have this code

<html>
<head>
<title>Document Title Here</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Layer1"></div>
</body>
</html>

and the CSS, called style.css, will have this code:

#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}

Again, the style knows which element it refers to because the #Layer1 in the style, links to the id="Layer1" of the <div>, and the HTML is able to find the CSS page because it knows it's name: href="style.css"

Advantages of linked styles are

  • Once you make one linked style for a particular page, you can easily link another page to the same style sheet, so you only do the work once.
  • If several pages in a website are linked to the same style sheet, the style sheet is only downloaded once by the user (with the first page) and is cached on their computer. The second and subsequent pages read the cached style. This makes downloading faster.

Disadvantages of linked styles are

  • They are slightly harder to create initially, as a conscious effort on the part of the designer is needed to create the style sheet and ensure that all styles are contained within it
  • It is sometimes difficult to locate a style which references a particular element in the HTML page, as it is not located near it, or even in the same page. This can make editing cumbersome.