Types of CSS

CSS (Cascading Style Sheet) defines the presentation of HTML elements across various mediums such as screens and print. This efficient technology streamlines the design process by managing the appearance of multiple web pages simultaneously. It governs properties like font size, font family, color, and background color for each page.

We can incorporate effects or animations into the website using CSS. CSS is employed to showcase animations such as buttons, effects, loaders, spinners, and 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 includes the <style> tag within the <head> section of the HTML file. This CSS technique is a useful method for styling individual pages. However, applying this CSS style to numerous web pages can be laborious as it necessitates adding the style to each page individually.

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

Firstly, open the HTML page and locate the <head>
Put the following code after the <head>

Example


<style type="text/css">

Include the CSS rules on a separate line.

Example:

Example


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

Close the style tag.

Example


</style>

After integrating the internal CSS styles, the finalized HTML document appears as shown below:

Example


<!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 utilize the selectors (class and ID) within the style sheet.

Example:

Example


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

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

Advantages of Internal CSS

When incorporating Internal CSS, it is not possible to load multiple files simultaneously along with the HTML code.

Cons of Internal CSS:

✅ Incorporating styles directly within the HTML file may lead to increased file size and slower loading speeds for the website.

2. External CSS

In external CSS, we connect web pages to an external .css file. This file is generated using a text editor. Utilizing CSS proves to be a more effective approach for styling a website. Adjusting the .css file enables us to modify the entire site simultaneously.

To apply external CSS styles, adhere to the following procedure:

Generate a new .css document using a text editor, and include Cascading Style Sheet directives as well.

For example:

Example


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

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

Example


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

Pros of External CSS:

✅ The organization of our files is improved, resulting in reduced file sizes.
✅ Utilizing a single .css file across multiple web pages is a key advantage of external CSS.

Cons of External CSS:

✅ Webpages may not display correctly until the external CSS files are fully loaded.
✅ Having multiple CSS files in External CSS can lead to longer website loading times.

3. Inline CSS

Inline CSS is employed to format a particular HTML element by adding a style attribute directly to each HTML tag, excluding the use of selectors. Operating a website might become challenging when relying solely on inline CSS. Nevertheless, Inline CSS within HTML proves beneficial under certain circumstances, especially when lacking access to CSS files or the ability to apply styles to elements.

In this instance, we've employed inline CSS within the <p> and <h1> elements.

Example


<!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:

✅ Developers have the ability to define CSS styles directly within the HTML document.
✅ It is not possible to generate and attach an external stylesheet when using inline CSS.

Cons of utilizing inline CSS:

✅ Incorporating CSS directly into HTML elements can be a time-consuming process and can disrupt the structure of the HTML code.
✅ It applies styling to multiple elements simultaneously, potentially impacting the overall page size and increasing the page's download time.

1. Internal CSS

2. External CSS

3. Inline CSS

Input Required