How to add CSS

CSS(an acronym of Cascading Style Sheet) specifies the interface of the HTML content. The CSS allows to beautify the HTML pages by specifying the colors, font styles and much more related to aesthetics of the pages. The properties defined using CSS are inherited to all the child elements as well. For instance, if a CSS property is added to body of HTML document, then all the elements inside the body tag will adopt that property. To avoid such happening, you can specify property to specific child elements.

There are various ways to apply CSS on your HTML document and are defined below:

  • Inline: Permits to add CSS inside a specific HTML tag
  • Internal: A CSS code is written inside the head tag(recommended but not necessary) of an HTML page
  • External: A CSS file is made externally by defining all the properties. It is added to the HTML page using the <link> element

We have compiled this guide to demonstrate all the possible ways to add CSS to an HTML page.

How to add CSS to a web-page

This section briefly describes the available approaches to add CSS to an HTML page.

How to add inline CSS

As the name of the technique suggests, it allows you to add CSS to a single HTML element. The style attribute of an element is exercised to do so. Let’s practice the below-stated example to get a clearer picture of Inline CSS:


The code written below adds the styles to an HTML tag <h1> Linux Hint </h1>:

<h1 style="color: green; text-align: center; text-decoration: underline;"> Linux Hint </h1>

Text Description automatically generated

  • Text color is set to green: For this, the color property of the style attribute is used
  • The text of <h1> is centered aligned: the text-align property is utilized
  • The heading text will be underlined: To do so, the text-decoration property of style attribute is set to underline.

The web-interface of the above-stated HTML page is displayed below:

Apart from the above-stated properties, few HTML editors shows the drop-down list of available properties. Therefore, it is recommended to choose your HTML editor wisely, as the better selection will ease the way of adding CSS to HTML page.

How to add Internal CSS

The internal CSS is added using the <style> tag inside the <head> element of an HTML page. Let’s say we want to add various styles to body, paragraphs, and divisions used in an HTML page.

The image displayed below shows the various properties that are added to several sections of HTML page and all these properties are assigned using the <style> element.

– The background color of the body will be black

– The paragraphs will have red text, 1em font size, and left-aligned text

– The color of divisions is antiquewhite and width of the divisions depends on the width of the text being used:

Diagram Description automatically generated

The web-interface using the above properties is displayed below:

Graphical user interface, text Description automatically generated

How to add External CSS

The CSS can be added to webpages by making a dedicated CSS file and then calling it inside a page. The external CSS is quite useful when you have to apply same styling to various HTML pages. This section provides a procedural post to create and use an external CSS file:

Step 1: Create a .css file

Firstly, open your code editor and make a file with .css extension (or the editor may offer the option to save as a CSS file). The file we are using here is named as linuxhintstylesheet and is created as follows:

Opened a new file in the editor:

After that, clicked on Save As:

Named that file with .css extension and selected CSS as a file type:

Step 2: Add styles to the css file

We have added the following styling properties:

– The background color of the body is skyblue

The h1 will be having the white color

– The paragraphs have the font-family set to serif and text-decoration contains overline(line above the text) property:

The following image displays the code that contains above stated styles:

Text Description automatically generated

Step 3: Add the CSS file to HTML document

After creating and adding styles to a CSS file, now you have to add the file to the page where you want to apply these styles. We want to add linuxhintstylesheet to linuxhint HTML document:

The <link> element of HTML is used to import CSS file. Moreover, the rel and href property of link element are exercised to embed the CSS file. The rel attribute defines the relationship between the HTML document and the CSS file. Whereas the href property of the element contains the link to CSS file.

Text Description automatically generated

Once the above steps are performed correctly, you will be able to load your HTML page with the above-stated properties.

Graphical user interface, text, application, email, website Description automatically generated


CSS is a language to make the web pages (HTML/XML) presentable. CSS can be added to web pages by adopting one of the mentioned methods in this article. The first method uses the style attribute of an element to add various CSS related properties. The internal method practices the CSS language by using <style> element in head tag. And the last method imports an external CSS file to a specific web page. All these methods are used to add CSS to a webpage and the selection of a method depends on the developer that how he/she intends to add styles.

About the author

Adnan Shabbir