What Is an External Style Sheet?

Easily import CSS to your HTML web page

Jens Schlueter/Getty Images

An external style sheet defines how a web page looks. You can use a style sheet to specify things like the size, color and font of text, the color of buttons, or the position of menus and side bars.

Code Used in an External Style Sheet

There are two types of code used to create a basic web page:

  • Hyper Text Mark-up Language (HTML): Defines the content of a web page. It contains the actual text with a mark-up identifying whether sections of text are paragraphs, headings, or lists. It also contains links to images which appear on the page, and hyperlinks to external pages.
  • Cascading Style Sheets (CSS): A coding language used to specify how the content is displayed. It defines how each type of text element is displayed, and can display the same type of element differently if they belong to different classes or have a different id. This allows things like menus and lists to behave very differently within the main text of a web page.

In general, separating style from content is a good idea, as it allows you to focus on one thing at a time. This becomes even more important in a team, allowing specialists in content and presentation to work independently from the rest. Perhaps more importantly, it also allows a single set of style instructions to be applied uniformly across an entire website.

The visual presentation of the website can then be changed from a single style sheet without editing every web page individually. For larger complex websites, a number of style sheets may be used to control the text, menus, and divisions within pages. This collection of style sheets may be called a "theme."

Using an External CSS to link HTML to CSS

It's possible to include CSS style directly within the HTML of a web page, using CSS to individually style each paragraph and heading differently. This type of inline styling generally isn’t a good idea, as you lose all of the benefits of separating style from content. Most notably, you lose the ability to update your whole website consistently from a single file.

The right way to apply style to a website is to create a single external style sheet file for each type of style you want to apply, then reference these files from every HTML file. For example, you might have the following external style sheets:

  • text.css
  • menus.css
  • layout.css

You can make changes to the CSS code within those external style sheets without changing their filenames, meaning the references to those files, within the HTML of all your web pages, won't be changed.

Examples of HTML and CSS

A very simple HTML page could contain the following code:

<!DOCTYPE html>

<html>

<head>

 <title>My Awesome Page</title>

</head>

<body>

 <h1>All About Me!</h1>

 <p>This page is about me and why I’m awesome.</p>

</body>

</html>

If you want to see how this looks in a web browser, copy the text into a text editor like Notepad. Save the file as something like "index.html" and drag it into your browser to see the old-school style.

A simple external style sheet can be linked to this page by adding the following code below the <title> line:

<link rel = "stylesheet"

type = "text/css"

href = "myStyle.css" />

Create another text file called myStyle.css, located in the same folder as index.html that contains the following code:

h1 {

color: #FF7643;

font-face: Arial'

}

p {

color: red;

font-size: 1.5em;

}

There’s a lot more you can do with CSS. If you want to learn more, W3 Schools is a great place to start.