Types of CSS styles

Published in

featurepreneur

1 min readFeb 3, 2023

CSS stands for Cascading Style Sheet. It describes Html elements to be displayed at which part of the page. And how to appear like color, design, layout, size, border, and margin, etc.

There are 3 types of CSS: Inline CSS, Internal/ Embedded CSS, and External CSS.

Inline CSS

Inline CSS allows you to apply a unique style to one HTML element at a time.

Using style attribute with any CSS properties defined within the element you can assign a specific HTML element.

Syntax:

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

Inline CSS is not recommended as it may lead to messy code

<p style="color: Gray;">Hello World</p>

Internal/ Embedded CSS

The internal CSS styling is used for applying properties to individual pages by wrapping all styles in the <style> element.

This is placed in the <head> section of HTML documents.

Syntax:

<head>  
<style>  
htmltag/class/id {  
    cssproperty1:value; 
    cssproperty2:value;  
}  
htmltag/class/id {  
   cssproperty1:value; 
   cssproperty2:value; 
}   
</style>

This is used for single-page websites or when we cannot create external stylesheets for our project.

<head>
   <style>
      body{
         background-color: black;
      }

     .class1,id1 {
         color: gray;
      }
   </style>
</head>

External CSS

External CSS is used to upload all styling properties and values to a separate .css file.

Then, we have to link the CSS document to our HTML file using the link tag in the HTML file.

Syntax:

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

The. .css file cannot contain HTML tags.

File: custom.css


body {  
    background-color: lightblue;  
}  
.class1 {  
    color: navy;  
    margin-left: 20px;  
}

Types of CSS styles

Inline CSS

Internal/ Embedded CSS

External CSS

Written by Shevanie Shupreeya P