Types of CSS

CSS (Cascading Style Sheet) describes the HTML elements which are displayed on screen, paper, or in other media. It saves a lot of time. It controls the layout of multiple web pages at one time. It sets the font-size, font-family, color, background color on the page.

It allows us to add effects or animations to the website. We use CSS to display animations like buttons, effects, loaders or spinners, and also animated backgrounds.

Without using CSS, the website will not look attractive. There are 3 types of CSS which are below:

Inline CSS
Internal/ Embedded CSS
External CSS

1. Internal CSS

The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style is an effective way to style single pages. Using the CSS style for multiple web pages is time-consuming because we require placing the style on each web page.

We can use the internal CSS by using the following steps:

1. Firstly, open the HTML page and locate the <head>

2. Put the following code after the <head>

3. Add the rules of CSS in the new line.

Example:

body {
    background-color: black;
}
h1 {
    color: white;
    padding: 50px;
}

4. Close the style tag.

After adding the internal CSS, the complete HTML file looks like the following:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: black;
}
h1 {
    color: red;
    padding: 50px;
} 
</style>
</head>
<body>
<h2>CSS types</h2>
<p>Cascading Style sheet types: inline, external and internal</p>
</body>
</html>

We can also use the selectors (class and ID) in the style sheet.

Example:

.class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

Pros of Internal CSS

Internal CSS cannot upload multiple files when we add the code with the HTML page.

Cons of Internal CSS:

Adding code in the HTML document will reduce the page size and loading time of the webpage.

2. External CSS

In external CSS, we link the web pages to the external .css file. It is created by text editor. The CSS is more efficient method for styling a website. By editing the .css file, we can change the whole site at once.

To use the external CSS, follow the steps, given below:

1. Create a new .css file with text editor, and add Cascading Style Sheet rules too.

For example:

.xleftcol {
   float: right;
   width: 35%;
   background:#608800;
}
.xmiddlecol {
   float: right;
   width: 35%;
   background:#eff3df;
}

2. Add a reference to the external .cssfile right after <title> tag in the <head> section of HTML sheet:

Pros of External CSS:

Our files have a cleaner structure and smaller in size.
We use the same .css file for multiple web pages in external CSS.

Cons of External CSS:

The pages cannot be delivered correctly before the external CSS is loaded.
In External CSS, uploading many CSS files can increase the download time of a website.

3. Inline CSS

Inline CSS is used to style a specific HTML element. Add a style attribute to each HTML tag without using the selectors. Managing a website may difficult if we use only inline CSS. However, Inline CSS in HTML is useful in some situations. We have not access the CSS files or to apply styles to element.

In the following example, we have used the inline CSS in <p> and <h1> tag.

<!DOCTYPE html>
<html>
<body style="background-color:white;">
<h1 style="color:Red;padding:20px;">CSS Tutorials</h1>
<p style="color:blue;">It will be useful here.</p>
</body>
</html>

Pros of inline CSS:

We can create CSS rules on the HTML page.
We cannot create and upload a separate document in inline CSS.

Cons of inline CSS:

Inline CSS, adding CSS rules to HTML elements is time-consuming and messes up the HTML structure.
It styles multiple elements at the same time which can affect the page size and download time of the page.

Next TopicCSS vs CSS3

← prev next →