Theory
Theory

Connecting external styles

Most often styles are connected from an external file with the extension .css. For this purpose, the <link> tag is used. For example:

<head>
  <link href="external.css" rel="stylesheet">
</head>

The href attribute specifies the file address, and the rel="stylesheet" attribute tells the browser that we're plugging in styles and not something else.

It is better to include styles inside <head>, but it is not necessary. The <link> tag will work elsewhere on the page.

In this assignment, you will plug in an external style file, which is located at external.css(follow the link to open this file in your browser).

index.html

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Connecting external styles</title>  </head> <body> <h1>External Styles</h1> <p>External styles are much more convenient than inline styles because you can plug the same style file into many pages.</p> <p>If you need to make changes to a style, you change one file and the changes appear on all pages where it's plugged in.</p> <p>With inline styles, this would be a bit of a hassle.</p> </body> </html>

GoalsCompleted

Connect an external style file to the page. To do this:

Add a <link> tag inside <head>,
give it a rel attribute with the value stylesheet
and a href attribute with the value external.css.