tutorialstonight logo
A Platform To Learn To Code

HOW TO ADD CSS



As we are going to learn about CSS in further tutorials so we first need to understand how to add CSS to an HTML document.

There are mainly three ways by which we can add CSS to the HTML document:

  1. External CSS
  2. Internal CSS
  3. Inline CSS



1).External CSS

External style is one way of adding CSS to the HTML document by creating an external css file and linking with the HTML document using the link tag in the head section of the document.

External style is used by most of the website because

  • Every css property can be stored in a separate file.
  • Change at a single property can reflect all over the webpage.
  • Easy to maintain bigger websites.
  • Webpage loads quicker once the CSS file has been cached.

Example


Example

Run the code

2).Internal CSS

The internal style is used for single page style within the page. The CSS is added in the head section of the HTML document using style element.

The Internal style is mainly used when you need some other CSS property for the web page other than external.

Internal style makes webpage load slower and also makes HTML documents larger.

Example

Run the code

3).Inline CSS

Inline style is used to add unique style to a single element.

Inline style has highest priority among internal and external CSS. Inline style overwrites external or internal CSS.

The inline element is used by elements by assigning style attributes to them and defining CSS property inside.

Example

Run the code



BOX

BOX