CSS | Centering Elements

Types of CSS (Cascading Style Sheet)

Last Updated : 08 Apr, 2025

CSS is used to style and layout web pages, controlling the appearance of HTML elements. It allows developers to create visually appealing designs and ensure a consistent look across a website.

Types of CSS

CSS can be implemented in three different ways:

Inline CSS
Internal or Embedded CSS
External CSS

1. Inline CSS

Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This method allows for specific styling of elements within the HTML document, overriding any external or internal styles.

Now, let us understand with the help of the example:

html

<p style="color:#009900; 
          font-size:50px; 
          font-style:italic; 
          text-align:center;">
  	Inline CSS
</p>

Output

Inline-CSS

Inline CSS

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

Now, let us understand with the help of the example:

html

<!DOCTYPE html>
<html>

<head>
    <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">Internal CSS</div>

        <div class="geeks">
            Implementation of Internal CSS
        </div>
    </div>
</body>

</html>

Output

Internal-CSS

internal CSS

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

Now, let us understand with the help of the example:

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div class="GFG">External CSS </div>
        <div id="geeks">
            This shows implementation of External CSS
        </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

When to Use Inline CSS

For quick fixes and small changes that don’t require a separate CSS file.
When you need to override other styles for a particular element.
If you’re working on emails or HTML-based applications where external CSS is not supported.

When to Use Internal CSS

When designing a single-page website.
If you need better control over styling than inline CSS.
For small to medium-sized projects where external CSS might be unnecessary.

When to Use External CSS

For large-scale projects where multiple pages share a common design.
When maintainability and scalability are priorities.
To improve website performance and load times using CSS caching.

Best Type for Multiple Web Pages

External CSS is the most efficient way to style multiple web pages. It ensures:

Consistent styling across the website.
Easier maintenance by modifying a single file.
Faster page loading due to CSS caching.
Better separation of concerns between HTML and CSS.
Modern web development best practices recommend external CSS for medium to large-scale projects due to its flexibility and efficiency.

Conclusion

Each CSS type has its advantages and use cases. While inline CSS is great for quick changes, it lacks reusability. Internal CSS is better for single-page websites but becomes inefficient for larger projects. External CSS is the preferred approach for modern web development due to its scalability, maintainability, and performance benefits.

CSS | Centering Elements

S

SujanM

Improve

Article Tags :

Similar Reads

CSS Introduction

CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable. It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the

Types of CSS (Cascading Style Sheet)

CSS is used to style and layout web pages, controlling the appearance of HTML elements. It allows developers to create visually appealing designs and ensure a consistent look across a website. Types of CSSCSS can be implemented in three different ways: Inline CSSInternal or Embedded CSSExternal CSS1

CSS | Centering Elements

Sometimes we face problems with centering an element in a web page. Is it really so hard? It is not too difficult to center an element. There so many different ways of doing it. One thing we need to know is that, which technique is for which purpose. Once you understand the problem, picking up the b

The CSS background is the area behind an element's content, which can be a color, image, or both. The background property lets you control these aspects, including color, image, position, and repetition. You can try different types of background here- iframe { width: 100%; height:410px;} @media (min

CSS Positioning Elements

CSS positioning defines how elements are placed within a web page. It allows you to control the layout, stacking order, and alignment of elements. The primary positioning types in CSS are: Position PropertyDescriptionFixedAn element with position: fixed property remains in the same position relative

Borders in CSS are used to create a visible outline around an element. They can be customized in terms of Width: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ h

CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability. Syntax:body { margin: value;}[GFGTABS] HTML <!--Driver C

CSS Text Formatting

CSS Text Formatting allows you to control the visual presentation of text on a webpage. From changing fonts to adjusting spacing and alignment, CSS provides powerful properties to enhance the readability and aesthetic of text. CSS lets you adjust font properties, text alignment, spacing, and decorat

The CSS float property is used to move an element out of the normal document flow and position it to the left or right of its container. For example, float: left moves the element to the left, and float: right moves it to the right. Other content will wrap around the floated element which helps to c

CSS Lists are used to display items in a clear and organized manner, either with bullets (unordered) or numbers (ordered). They help keep content neat and structured on a webpage. With CSS, you can customize the look of lists to improve the design and layout of your content. Try It: .custom-item { b