Types of CSS (Cascading Style Sheet)

Types of CSS

CSS is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font-family, color, … etc property of elements on a web page.  We use CSS to display animations like buttons, effects, loaders or spinners, and also animated backgrounds. CSS can be added to HTML documents in 3 ways. Without using CSS, the website will not look attractive. There are 3 types of CSS which are below:
  • Inline CSS - by using the style attribute inside HTML elements
  • Internal / Embedded CSS - by using a <style> element in the <head> section
  • External CSS - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS file.  

1. Inline CSS

  • Inline CSS is used to style a specific HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag, without using selectors.
  • An inline CSS is used to apply a unique style to a single HTML element.
  • An inline CSS uses the style attribute of an HTML element.
  • 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.
  • The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red.
<!DOCTYPE html>  
<html>  
<body style="background-color:white;">  
<h1 style="color:#6c5dd3;padding:15px;">HP TECH | Inline CSS</h1>  
<p style="color:blue;">inline CSS uses the style attribute</p>
<p style="color:red;">Not access the CSS files</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.

2.Internal or Embedded 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 code after the <head>
  3. To add  <style> </style> tag
  4. And write the css code inside the <style> tag.
<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS | HP TECH</title>
        <style>             
            #hp {
                color:#009900; 
                font-size:50px;
                font-weight:bold;
            }
            .txt {
                color:red; 
            }
        </style>
    </head>
    <body>   
            <div id ="hp">HP TECH</div>              
            <div class ="txt">
                Subscribe Now...
            </div>         
    </body>
</html>
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.

3. 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 an external style sheet, add a link to it in the <head> section of each HTML page
<link rel="stylesheet" type="text/css" href="hptech.css" />
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.
  2.  Add a reference to the external .css file right after <title> tag in the <head> section of HTML sheet.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="hptech.css"/>
    </head>
  
    <body>
        <div class = "main">
            <div id ="hp">HP TECH</div>
            <div class ="txt">
                 Subscribe Now...
            </div>
        </div>
    </body>
</html>

CSS

#hp { color:#009900; 
      font-size:50px; 
      font-weight:bold;
 } 
.txt { 
      color:red;
 }

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.
Tags

More from