Using External CSS
<link>
The <link> element can be used in an HTML document to tell
the browser where to find the CSS file used to style the page. It is an empty
element (meaning it does not need a closing tag), and it lives inside the <head> element. It should use three attributes:
href
This specifies the path to the CSS file (which is often placed in a
folder called css or styles).
type
This attribute specifies the type of document being linked to. The
value should be text/css.
rel
This specifies the relationship between the HTML page and the file
it is linked to. The value should be stylesheet when
linking to a CSS file. An HTML page can use more than
one CSS style sheet. To do this it could have a <link> element for every CSS file it uses. For example, some authors use one CSS file to control
the presentation (such as fonts and colors) and a second to control the layout.
Example.html
<!DOCTYPE html>
<html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css"
type="text/css"
rel="stylesheet" />
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different potato
varieties. They are usually described as
early, second early and maincrop.</p>
</body>
</html>
Style.css
file
body {
font-family: arial;
background-color: rgb(185,179,175);
}
h1 {
color: rgb(255,255,255);
}
