How to Add External Style Sheets (CSS) to a Web Page

CSS
f t g+ in

It is possible to change the style of a web page with the help of external style sheets and we will demonstrate how to do that in this tutorial.

Thumbnail Blaster - Video Thumbnail Creation Software

CSS (Cascaded Style Sheets) allows you to control the appearance and style of your web pages. CSS rules define how an HTML element is displayed on a web page. From its color to its size and position, you can control almost everything about an HTML element with the help of CSS.

CSS styles are generally stored in external style sheet files with .css extension such as:

style.css

External style sheet means that the style is not stored within the same file (the web page) but it is stored in a different file. You can name your style file as you wish as long as you preserve its extension.

You can create a CSS file by opening your text editor, e.g. Notepad, creating a new text file and saving it with .css extension.

The following example shows how to link to an external style sheet (CSS file) from a web page.

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <p>Page content...</p>
</body>
</html>

A web page can link to a single style sheet as well as to multiple style sheets if necessary.

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
  <link rel="stylesheet" href="/desktop.css">
  <link rel="stylesheet" href="/tablet.css">
  <link rel="stylesheet" href="/mobile.css">
</head>
<body>
  <p>Page content...</p>
</body>
</html>

Without external style sheets, web design would be a nightmare especially for sites that have millions of pages. Because when you needed to make a change in a style, you would have to edit all the pages. External style sheets let you control the style of the whole site by one single file.

You can also add CSS styles to a web page as internal style sheets.

Was this post helpful?

Please consider sharing it, and supporting us with a small tip. Thank you :)

f t g+ in