Jackson Lane 
“Design is not just what it looks like and feels like. Design is how it works.” Late. Steve Jobs, Founder, Apple. Inc.
The above quote is not just limited to the best color palettes used in web design but also in typography trends. But what makes the web design so impeccable and mesmerizing? It is the CSS file that styles every web content element, offering a wide range of possibilities for creativity. Right from color and fonts to text alignment and multimedia content, CSS codes can format them all. But are these codes single variants or more? In this blog, you will learn about types of CSS with examples respectively.
Table Of Content
What is CSS?
CSS, or Cascading Style Sheets, describes the presentation of a document written in HTML or XML. It’s the tool that enhances the style and presentation of web pages, giving you the power to control the positioning, spacing, fonts, colors, and alignment on screen. It’s what makes your web page look and feel the way you want it to. The blog outlines what is CSS and its types, along with practical examples so beginners understand different types of style sheets in CSS.
History of CSS
CSS is one of the core open web languages and is standardized across web browsers according to W3C specifications. Since its launch in 1996, multiple versions have been released. Sneak peek into the timeline of the CSS.
| Year | Version | Key Features |
| 1996 (Dec) | CSS1 | First official W3C Recommendation. Basic text, color, background, box model. |
| 1998 (May) | CSS2 | Enhanced capabilities: positioning (z-index), media types, advanced selectors. |
| 1999 (June) | CSS 2.1 | Revision of CSS2, focusing on clarifications and bug fixes. More robust. |
| 2000s – Present | CSS3 (Modular) | Not a single release; ongoing development of modular specifications. |
| Media Queries (responsive design), border-radius, box-shadow, Gradients, Transforms, | ||
| Transitions, Animations, Flexbox, CSS Grid, Custom Properties (Variables). |
Types of CSS with Example
The following sections outline CSS types, organized by category.
1. Inline CSS
Inline CSS is the simplest CSS form, that is embedded within HTML tags. It is helpful when a single webpage requires basic styling. However, larger projects cannot use Inline CSS because it becomes challenging to manage styles as the project grows. It is one of the simplest CSS style types, useful for quick changes.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">This is a Blue, Centered Heading</h1>
<p style="font-size: 18px; margin-left: 20px;">This paragraph has a larger font size and a left margin.</p>
</body>
</html>2. Internal Style Sheet or Embedded CSS
Internal CSS is another type of CSS where styles are defined with <style> tags within an HTML document. It is useful for creating style sheet in CSS for single HTML documents or smaller projects. Example of internal CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Website</h1>
<p>This paragraph is styled using an external CSS file. It makes your code cleaner and easier to manage, especially for larger projects.</p>
<p>All the global styles for the body, headings, and paragraphs are defined in `styles.css`.</p>
<button>Click Me</button>
</div>
</body>
</html>3. External CSS
Among the different types of CSS with example, external CSS secures its ranking in widely used stylesheets. It involves linking to HTML and an external style sheet file. It is an ideal option for a larger project with multiple HTML documents. It allows developers to maintain a consistent look and reflect changes across various pages. Here’s an example of external HTML:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This text is styled using an external CSS file.</p>
</body>
</html>
CSS
/* styles.css */
body {
font-family: Verdana, sans-serif;
background-color: #f0f8ff; /* Alice Blue */
}
h1 {
color: #8a2be2; /* Blue Violet */
text-align: left;
}
p {
font-size: 1em;
color: #4682b4; /* Steel Blue */
}CSS Frameworks
CSS frameworks are a collection of pre-written libraries of CSS code. It simplifies the process of web page styling. They provide ready-made classes and components that developers use to build responsive and visually appealing websites. Materialize, Foundation and Bootstrap are some of the well-known CSS frameworks. Follow this example to use the Bootstrap framework to style a button:
p {
color: blue;
font-size: 20px;
}CSS Preprocessors
CSS preprocessors are scripting languages that allow developers to write CSS code with programming concepts like variables, functions, and mixins. It means it is easier to manage and maintain large-scale CSS projects by reducing repetitive code, making it reusable. The well-known CSS preprocessors Sass, Less, and Stylus are but a few.
Refer to this example of using SASS for writing CSS code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sass Example</title>
<link rel="stylesheet" type="text/css" href="style.scss">
</head>
<body>
<p class="blue-text">This text is blue.</p>
</body>
</html>CSS:
$blue-color: blue;
.blue-text {
color: $blue-color;
}CSS Animations
Are you looking for an interactive function on your website? CSS keyframe allows you to create complex and straightforward interactive interfaces. It creates dynamic and engaging user experiences by adding movements and interactivity. Here is a sample keyframe to build the animations through CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Animation Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="hover-effect">Hover over me!</button>
</body>
</html>CSS:
.hover-effect {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
transition: background-color 0.5s ease;
}
.hover-effect:hover {
background-color: red;
}Difference Between Inline, Internal and External CSS in HTML
The table below differentiates between CSS and its types. Get a comprehensive comparison of inline internal and external CSS in HTML.
| Feature | Inline CSS | Internal CSS | External CSS |
| Placement | style attribute of an HTML element | <style> tags in <head> of HTML document | Separate .css file, linked via <link> in <head> |
| Scope | Affects only the specific HTML element | Affects only the single HTML document | Affects multiple HTML documents (entire website) |
| Reusability | Very low (no reuse) | Low (only for that specific page) | High (reusable across entire website) |
| Maintainability | Very low (difficult for changes) | Medium (easier than inline for single page) | High (centralized changes for entire site) |
| Specificity | Highest (overrides other styles) | High (overrides external styles on same page) | Lowest (can be overridden by internal/inline) |
| Separation | Poor (mixes style and content) | Moderate (styles separated from body content) | Excellent (clear separation of concerns) |
| File Size | Increases HTML file size per element | Increases HTML file size per page | Reduces HTML file size (CSS in separate file) |
| HTTP Requests | None (styles embedded) | None (styles embedded) | One additional request (for .css file) |
| Page Load | Immediate (for styled element) | Immediate (for entire page) | Potentially a slight delay initially, then faster due to caching |
| Best Use Case | Quick, one-off overrides; email templates | Single, unique pages; prototyping | Large, multi-page websites; standard practice |
Which is the Commonly Used CSS Method?
All three CSS methods (inline, external, and internal) are commonly used in CSS. However, it depends on the specific needs of a website or web application to use the right one. External CSS is a widely used method to create dynamic websites. It reflects the excellent visual representation of content and other files. As a result, it is easier to maintain and update styles across multiple pages.
Inline CSS has its significance for small projects. It is used to make quick changes and apply a specific page element. However, its excessive use is not recommended because inline CSS makes HTML code difficult to read and maintain.
Internal CSS is used for styling a particular page or its section, but not an entire file. You can create unique styles for a specific page or section without changing the rest of the website.
Conclusion
CSS is not a single-line command; it is a family of syntactic forms. By understanding the examples of style sheets, developers can follow a holistic approach to choose the right type of CSS. External stylesheets, embedded rules, and inline declarations each map to a different place in the cascade, so a developer must learn when to assign priority and where to store the information. Most professionals default to an external sheet because it keeps design separate from markup and scales well across dozens of pages. An internal block inside a single document shines when that document has layout quirks and no other file shares. Inline rules boast maximum specificity, yet their very proximity to HTML makes maintenance cumbersome and error-prone.
The structure you choose ripples outward, nudging load times, blocking rendering, and cluttering the critical path depending on its location. A concentrated effort to master that ripple now instead of chasing it later pays dividends in elegant code and satisfied users.
FAQs
Which is the most commonly used stylesheet in CSS?
Web experts almost always reach for external style sheets first. Doing so keeps markup clean by splitting and formatting clean between the HTML body and the rules that dress it up.
Which type of CSS is best for large websites?
For large websites, External CSS is undoubtedly the best choice. It offers superior maintainability, reusability, and improved performance through browser caching, making it ideal for managing extensive style sheets across many pages.
Is there a performance impact when using Internal or Inline CSS?
Yes, both Internal and Inline CSS can have a performance impact compared to External CSS. They prevent browser caching of styles, meaning the CSS is re-downloaded with every page load, which can slightly slow down rendering, especially on larger pages.
How do I link an External CSS file to my HTML?
You link an External CSS file by placing a tag within the
section of your HTML document. The href attribute of this tag should point to the path of your .css file, like this: .
