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">w3wiki</div>
 
        <div class="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>
 
</html>

Output:

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.

Types of CSS (Cascading Style Sheet)

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:

Table of Content