Open In App
Related Articles

Types of CSS (Cascading Style Sheet)

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Cascading Style Sheets (CSS) is a language used to style web pages that contain HTML elements, defining how elements are displayed on webpages, including layout, colors, fonts, and other properties of the elements on a web page. CSS works by targeting HTML elements and applying style rules to define how they should be displayed, including properties like color, size, layout, and positioning.

There are three types of CSS which are given below:

Inline CSS:

Inline CSS is a method of applying styling directly to individual HTML elements using the “style” attribute within the HTML tag,allowing for specific styling of individual elements within the HTML document, overriding any external or internal styles.

Inline CSS Example:

This example shows the use of inline CSS with the help of an HTML document.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Inline CSS</title>
 
</head>
 
<body>
    <p style="color:#009900;
              font-size:50px;
              font-style:italic;
              text-align:center;">
        GeeksForGeeks
    </p>
 
</body>
 
</html>

                    

Output:

inline CSS property example

Inline CSS Example Explanation:

In the above-example we are following these steps

  • Here we are using Inline CSS directly to the paragraph element.
  • Changes color to green, font size to 50px, style to italic, and alignment to center.
  • Styling overrides external and internal CSS.

Internal or Embedded CSS:

Internal or Embedded CSS is defined within the HTML document’s <style> element. It applies styles to specified HTML elements, The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the <style> tag inside the head section of the HTML file.

Internal or Embedded CSS Example:

This example shows the use of internal CSS with the help of an HTML document.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Internal CSS</title>
    <style>
        .main {
            text-align: center;
        }
 
        .GFG {
            color: #009900;
            font-size: 50px;
            font-weight: bold;
        }
 
        .geeks {
            font-style: bold;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="GFG">GeeksForGeeks</div>
 
        <div class="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>
 
</html>

                    

Output:

embeded css

Internal or Embedded CSS Example Explanation:

In the above-example we are following these steps

  • We use internal CSS styles defined within the <style> element in the <head> section.
  • CSS rules are applied to elements with specific classes like “main,” “GFG,” and “geeks.”
  • The “GFG” class styles text in green, large font size, and bold.
  • The “geeks” class styles text with bold font style and a smaller font size.

External CSS:

External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages.

External CSS Example:

This example shows the use of external CSS with the help of an HTML document.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="main">
        <div class="GFG">GeeksForGeeks</div>
 
        <div id="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>
 
</html>

                    

CSS

body {
    background-color: powderblue;
}
 
.main {
    text-align: center;
}
 
.GFG {
    color: #009900;
    font-size: 50px;
    font-weight: bold;
}
 
#geeks {
    font-style: bold;
    font-size: 20px;
}

                    

Output:

external css

External CSS Example Explanation:

In the above example we are following these steps

  • We use External CSS file “style.css” in which we defines body background color as powderblue.
  • By using .main class aligns text to the center.
  • .GFG class sets text color to green, font size to 50px, and font weight to bold.
  • #geeks id applies bold font style and 20px font size.

Some Important points:

  • Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page. For an HTML tag, styles can be defined in multiple style types and follow the below order.
  • As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles.
  • Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet.
  • External style sheets have the least priority. If there are no styles defined either in inline or internal style sheet then external style sheet rules are applied for the HTML tags.

CSS is the foundation of webpages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 20 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads