How to Create a CSS External Style Sheet

HTML (Hypertext Markup Language) is the standard language for structuring web pages. Whereas the Cascading Style Sheet is utilized to provide several styling properties to the HTML elements. More specifically, you can access the elements of HTML in CSS by element name, by class selectors, or by id selectors.

Three methods to add a CSS style sheet to an HTML file are Internal CSS, Inline CSS, and External CSS. However, this article will guide how to add an external stylesheet in HTML.

What is an External CSS Style Sheet?

The external style sheet is helpful in a way that we can change the look of our website by modifying just one file. The HTML file must have a link to the stylesheet inside the “<link>” element, which will be mentioned inside the head component of the HTML page.

The below example demonstrates several HTML elements that will be styled with CSS properties by using the external style sheet.

Example: How to Create and Link External Stylesheet to HTML File?

In the HTML file, first, add a div element having a class name “main”. Inside this <div>, add <h1> element having class name as “heading” to provide heading. The <p> element with id as “para” is then added to provide text content.

Step 1: Create HTML File

Below is the HTML code for the discussed scenario:

<div class="main">

<h1 class="heading">This is the heading element</h1>

<p id="para">This is the main div</p>


As we haven’t provided any of the HTML elements with styling properties, the output screen will look like this:

In the next section, we will create a style sheet that contains the styling properties of the elements we have created in the HTML file.

Step 2: Create External Style Sheet

Create a new file, and name it with an extension “.css”. Open it and write code as given in the below code block.

Style main div


width: 500px;

height: 200px;


text-align: center;

padding-top: 20px ;

margin: 0px auto;

border: 5px solid rgb(194, 194, 189);

font-family: cursive;


The properties applied to the HTML elements in the external style sheet are described below:

  • .main” is used to access the class of the div element, where the “.” followed by the class name is known as the class selector.
  • width” property is utilized for the setting of the element’s width.
  • height” property is utilized for the setting of the element’s height.
  • background-color” property is utilized to set the background color.
  • text-align” is the property used for the alignment of text.
  • padding-top” is the property utilized to add space above the content of the div.
  • margin” with value 0px auto represents space 0px from top and bottom and equal space on left and right of the element.
  • border” property is set with the value 5px solid rgb(194, 194, 189), where 5px refers to the width of the border, solid is the line type, and rgb(194, 194, 189) is the border color code.
  • font-family” with the value cursive makes the font style seem like they were handwritten.

Style id para


font-size: 25px;

font-weight: bold;

color: #FFB9B9;


The id element with name para of the <p> element id styled with the properties that are explained below:

  • #para” is utilized to access the id element of HTML. The “#” sign is known as the id selector.
  • font-size” property is utilized for the setting of the font size.
  • font-weight” with the value set as bold makes the font bold.
  • color” property is utilized for the setting of font color.

Style heading


color: whitesmoke;


The heading’s font color is set as “whitesmoke” by utilizing the property “color”.

Step 3: Link External Style Sheet to HTML

Now, in the head section of the HTML file, we will specify the link to the external style sheet:

<link rel="stylesheet" href="style.css" type="text/css">

Several attributes can be utilized in the HTML link tag. The attributes specified in the link element are described below:

  • rel” attribute is utilized to inform the browser about the imported file, such as the stylesheet.
  • href” attribute specifies the file path.
  • type” attribute is utilized to indicate the content of the imported file.

As shown in the below image, the styling properties that are provided in the external style sheet are successfully applied:

We have successfully learned to link the CSS file to the HTML file.


CSS is the Cascading Style Sheet that provides different styling properties to the HTML elements. There are three ways to connect the CSS to the HTML: Inline CSS, External CSS, and Internal CSS. In HTML, inside the head section, the link to the external style sheet will be specified using the <link> element. This article has demonstrated the procedure to create and link external style sheets to HTML.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.