{"id":42687,"date":"2024-02-29T12:50:48","date_gmt":"2024-02-29T07:20:48","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=42687"},"modified":"2026-06-10T13:32:43","modified_gmt":"2026-06-10T08:02:43","slug":"types-of-css-with-examples","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/types-of-css-with-examples\/","title":{"rendered":"Types of CSS: A Complete Guide to All 3 Types with Examples"},"content":{"rendered":"\n<p>Every website you visit has CSS working behind the scenes to control colours, fonts, spacing, and layout. But not all CSS is written the same way. Understanding the types of CSS is one of the first things you learn on any frontend development path. The three types of CSS \u2014 inline, internal, and external \u2014 each have different use cases, advantages, and trade-offs. Knowing which type of CSS to use and when is a fundamental skill for any frontend developer. This guide explains all three types of CSS with clear examples, a side-by-side comparison, and practical guidance for 2026.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>TL;DR Summary<\/strong><\/h2>\n\n\n\n<ul>\n<li>There are <strong>3 main types of CSS<\/strong>: Inline, Internal (Embedded), and External.<\/li>\n\n\n\n<li><strong>Inline CSS<\/strong> is written directly inside an HTML tag using the <code>style<\/code> attribute. Best for quick, one-off changes.<\/li>\n\n\n\n<li><strong>Internal CSS<\/strong> is written inside a <code>&lt;style&gt;<\/code> tag in the <code>&lt;head&gt;<\/code> section. Best for single-page styling.<\/li>\n\n\n\n<li><strong>External CSS<\/strong> is written in a separate <code>.css<\/code> file and linked to HTML. Best for multi-page websites and production code.<\/li>\n\n\n\n<li>External CSS is the industry standard. Use inline only as a last resort.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is CSS ?<\/strong><\/h2>\n\n\n\n<p>CSS stands for Cascading Style Sheets. It is a stylesheet language that controls how HTML elements are displayed on screen. Without CSS, every webpage would look like a plain wall of text.<\/p>\n\n\n\n<p>CSS works by selecting HTML elements and applying style rules to them. A basic CSS rule looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {\n  color: blue;\n  font-size: 16px;\n}<\/code><\/pre>\n\n\n\n<p>The <strong>selector<\/strong> (<code>p<\/code>) targets all paragraph elements. The <strong>declarations<\/strong> (<code>color: blue<\/code> and <code>font-size: 16px<\/code>) tell the browser how to style them. The three types of CSS differ in <strong>where<\/strong> these rules are written and <strong>how<\/strong> they are applied to the page. Before we go deeper into each type of CSS, here is a quick overview.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Types of CSS at a Glance<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Type<\/th><th>Where It Is Written<\/th><th>Scope<\/th><th>Best Used For<\/th><\/tr><\/thead><tbody><tr><td>Inline CSS<\/td><td>Inside the HTML tag&#8217;s <code>style<\/code> attribute<\/td><td>Single element<\/td><td>Quick fixes, email templates<\/td><\/tr><tr><td>Internal CSS<\/td><td>Inside <code>&lt;style&gt;<\/code> tag in <code>&lt;head&gt;<\/code><\/td><td>Single page<\/td><td>Single-page projects, demos<\/td><\/tr><tr><td>External CSS<\/td><td>In a separate <code>.css<\/code> file<\/td><td>Entire website<\/td><td>All production websites<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The 3 Main Types of CSS<\/strong><\/h2>\n\n\n\n<p>Now let us discuss the <em>types of <a href=\"https:\/\/www.guvi.in\/courses\/web-development\/html-and-css\/?utm_source=blogs&amp;utm_medium=organic&amp;utm_campaign=Types+of+CSS%3A+A+Comprehensive+Guide+to+Styling+Web+Pages\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>CSS<\/strong><\/a>, their benefits, drawbacks, and examples in detail:<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Inline CSS<\/strong><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">What Is Inline CSS?<\/h3>\n\n\n\n<p>Inline CSS is the first and most direct of the three types of CSS. It applies styles directly to a single HTML element using the <code>style<\/code> attribute inside the opening tag. It only affects that one element and nothing else on the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Inline CSS Example<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"color: blue; font-size: 16px;\"&gt;\n  This paragraph has inline CSS applied.\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>The <code>color<\/code> and <code>font-size<\/code> rules apply only to this specific <code>&lt;p&gt;<\/code> tag.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pros and Cons of Inline CSS<\/h3>\n\n\n\n<ul>\n<li><strong>Pros:<\/strong> No separate file needed. Highest specificity \u2014 overrides both internal and external types of CSS. Useful for HTML email templates where external stylesheets are not supported.<\/li>\n\n\n\n<li><strong>Cons:<\/strong> Mixes content and design, which makes code harder to read and maintain. Cannot be reused across elements. Impossible to manage at scale on a real website.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Internal or Embedded CSS<\/strong><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">What Is Internal CSS?<\/h3>\n\n\n\n<p>Internal CSS \u2014 also called embedded CSS \u2014 is the second of the three types of CSS. It is written inside a <code>&lt;style&gt;<\/code> tag placed in the <code>&lt;head&gt;<\/code> section of an HTML document. The styles apply to all matching elements on that single page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Internal CSS Example<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;style&gt;\n    p {\n      font-family: Arial, sans-serif;\n      color: #333333;\n    }\n    h1 {\n      color: #0066cc;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1&gt;Welcome&lt;\/h1&gt;\n  &lt;p&gt;This is the first paragraph.&lt;\/p&gt;\n  &lt;p&gt;This is the second paragraph.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Both <code>&lt;p&gt;<\/code> tags get the same font and colour from one rule \u2014 no need to repeat the style on each element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pros and Cons of Internal CSS<\/h3>\n\n\n\n<ul>\n<li><strong>Pros:<\/strong> Cleaner than inline CSS. Styles are centralised for one page. Useful for quick demos, landing pages, and single-page projects. No extra HTTP request needed. A good stepping stone between inline and external types of CSS.<\/li>\n\n\n\n<li><strong>Cons:<\/strong> Styles cannot be reused across multiple pages. As the page grows, the <code>&lt;head&gt;<\/code> section gets cluttered. Each page that needs the same styles must repeat them.<\/li>\n<\/ul>\n\n\n\n<p><strong>Also Read: <a href=\"https:\/\/www.guvi.in\/blog\/a-complete-guide-to-html-and-css-for-beginners\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/www.guvi.in\/blog\/a-complete-guide-to-html-and-css-for-beginners\/\" rel=\"noreferrer noopener\">A Complete Guide to HTML and CSS for Beginners<\/a><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. External CSS<\/strong><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">What Is External CSS?<\/h3>\n\n\n\n<p>External CSS is the third and most important of the three types of CSS. It is written in a completely separate <code>.css<\/code> file and linked to HTML documents using a <code>&lt;link&gt;<\/code> tag in the <code>&lt;head&gt;<\/code>. This is the standard approach for all real-world websites and the type of CSS every professional developer uses daily.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">External CSS Example<\/h3>\n\n\n\n<p><strong>HTML file (index.html):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1&gt;Welcome to My Website&lt;\/h1&gt;\n  &lt;p&gt;This paragraph is styled from an external CSS file.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><strong>CSS file (styles.css):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  color: #0066cc;\n  font-size: 32px;\n}\n\np {\n  font-family: Arial, sans-serif;\n  color: #333333;\n  line-height: 1.6;\n}<\/code><\/pre>\n\n\n\n<p>The styles in <code>styles.css<\/code> apply to every HTML page that links to it. Change the file once and every linked page updates automatically. This is the core advantage of the external type of CSS over the other two.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pros and Cons of External CSS<\/h3>\n\n\n\n<ul>\n<li><strong>Pros:<\/strong> Complete separation of content and design. One CSS file styles an entire website. The browser caches the file after the first load, making every subsequent page load faster. Easiest to maintain and scale. This is the most recommended of all types of CSS for production use.<\/li>\n\n\n\n<li><strong>Cons:<\/strong> Requires an additional HTTP request on the first page load. A broken <code>&lt;link&gt;<\/code> tag means the entire page loses its styling.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Inline vs Internal vs External: Comparison Table<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Feature<\/th><th>Inline CSS<\/th><th>Internal CSS<\/th><th>External CSS<\/th><\/tr><\/thead><tbody><tr><td>Location<\/td><td>Inside HTML tag<\/td><td><code>&lt;style&gt;<\/code> in <code>&lt;head&gt;<\/code><\/td><td>Separate <code>.css<\/code> file<\/td><\/tr><tr><td>Scope<\/td><td>One element<\/td><td>One page<\/td><td>Entire website<\/td><\/tr><tr><td>Reusability<\/td><td>None<\/td><td>Single page only<\/td><td>Full reuse across pages<\/td><\/tr><tr><td>Maintainability<\/td><td>Very low<\/td><td>Medium<\/td><td>High<\/td><\/tr><tr><td>Performance<\/td><td>No extra request<\/td><td>No extra request<\/td><td>One HTTP request (cached after first load)<\/td><\/tr><tr><td>Specificity<\/td><td>Highest<\/td><td>Medium<\/td><td>Lowest<\/td><\/tr><tr><td>Best for<\/td><td>Email templates, quick fixes<\/td><td>Demos, single pages<\/td><td>All production websites<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When to Use Which Type of CSS<\/strong><\/h2>\n\n\n\n<p>Now that you understand all three types of CSS, use this guide to decide which type of CSS fits your situation:<\/p>\n\n\n\n<ul>\n<li><strong>Use inline CSS when<\/strong> you are building HTML email templates (email clients often block external stylesheets), making a one-time override that cannot be handled any other way, or doing rapid browser debugging.<\/li>\n\n\n\n<li><strong>Use internal CSS when<\/strong> you are building a single standalone HTML page, creating a quick proof-of-concept or demo, or working on a small project that will never grow beyond one file.<\/li>\n\n\n\n<li><strong>Use external CSS when<\/strong> you are building any real website with more than one page, working in a team where designers and developers work on different files, or building a project you plan to maintain over time.<\/li>\n<\/ul>\n\n\n\n<p>In professional <a href=\"https:\/\/www.guvi.in\/blog\/web-development-roadmap\/\" target=\"_blank\" rel=\"noreferrer noopener\">web development<\/a>, external CSS is almost always the right choice. Inline CSS in production code is generally considered a code smell.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Real-World Use Cases<\/strong><\/h2>\n\n\n\n<p><strong>Zomato and Swiggy<\/strong> use large external CSS files \u2014 often compiled from preprocessors like SASS \u2014 to style their entire platform consistently. A single change to a button style in one CSS file updates every button across thousands of pages instantly. This is only possible with the external type of CSS.<\/p>\n\n\n\n<p><strong>Marketing email templates<\/strong> from companies like Amazon, Flipkart, and Nykaa almost always use the inline type of CSS because most email clients (Gmail, Outlook) block or ignore external stylesheets. The only reliable way to guarantee styling in HTML emails is inline CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Common Mistakes to Avoid<\/strong><\/h2>\n\n\n\n<ul>\n<li><strong>Using inline CSS everywhere in a real project.<\/strong> Beginners often reach for this type of CSS because it gives instant results, but it creates unmaintainable code fast. If you find yourself writing <code>style=\"...\"<\/code> on more than two elements, move those styles into an external file immediately.<\/li>\n\n\n\n<li><strong>Forgetting to link the external CSS file correctly.<\/strong> A missing or wrong <code>href<\/code> path on the <code>&lt;link&gt;<\/code> tag means your external type of CSS never loads and the entire page loses its styling. Always check the file path relative to your HTML file and test in the browser after linking.<\/li>\n\n\n\n<li><strong>Mixing all three types of CSS on the same page without understanding specificity.<\/strong> When inline, internal, and external CSS rules all target the same element, the styles conflict. Inline wins, then internal, then external. Developers who do not understand this spend hours debugging styles that appear to do nothing.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><em>If you want to learn more about programming with HTML, and CSS as well as web development and make a successful career out of it, then you must sign up for the <strong>Certified<\/strong><a href=\"https:\/\/www.guvi.in\/zen-class\/full-stack-development-course\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=types+of+css\" target=\"_blank\" rel=\"noreferrer noopener\"><strong> Full Stack Development Course<\/strong><\/a>, offered by HCL GUVI, which gives you in-depth knowledge of the practical implementation of all frontend as well as <a href=\"https:\/\/www.guvi.in\/blog\/guide-on-backend-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">backend development<\/a> through various real-life <a href=\"https:\/\/www.guvi.in\/blog\/full-stack-development-project-ideas\/\" target=\"_blank\" rel=\"noreferrer noopener\">FSD projects.<\/a><\/em><\/p>\n\n\n\n<div style=\"background-color: #099f4e; border: 3px solid #110053; border-radius: 12px; padding: 18px 22px; color: #FFFFFF; font-size: 18px; font-family: Montserrat, Helvetica, sans-serif; line-height: 1.6; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 750px; margin: 22px auto;\">\n  <h3 style=\"margin-top: 0; font-size: 22px; font-weight: 700; color: #ffffff;\">\ud83d\udca1 Did You Know?<\/h3>\n  <ul style=\"padding-left: 20px; margin: 10px 0;\">\n    <li>CSS was first proposed by H\u00e5kon Wium Lie on October 10, 1994, while working at CERN. It was officially released as CSS Level 1 in December 1996, making it nearly 30 years old in 2026 and still the primary styling language for the entire web.<\/li>\n    <li>According to W3Techs (2026), CSS is used by over 96% of all websites on the internet, making knowledge of the types of CSS one of the most universally valuable skills in all of web development.<\/li>\n    <li>The most commonly used type of CSS in professional web development is External CSS, used in combination with CSS preprocessors like SASS and LESS and CSS frameworks like Tailwind CSS and Bootstrap.<\/li>\n    <li>CSS-in-JS libraries like Styled Components and Emotion, which are popular in React projects, are essentially a modern variation of Inline CSS where styles are written in JavaScript and scoped to individual components.<\/li>\n  <\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Concluding Thoughts&#8230;<\/h2>\n\n\n\n<p>The three types of CSS \u2014 inline, internal, and external \u2014 each serve a different purpose. Understanding the types of CSS and when to use each one is a foundational skill every developer needs. Inline CSS is powerful but hard to maintain. Internal CSS is useful for single-page work. External CSS is the standard for every real website and the type of CSS you should default to in all professional projects. Mastering when and why to use each type of CSS is one of the first steps on the path to becoming a confident frontend developer.<\/p>\n\n\n\n<p><strong>Must Read | <a href=\"https:\/\/www.guvi.in\/blog\/complete-css-tutorial\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/www.guvi.in\/blog\/complete-css-tutorial\/\" rel=\"noreferrer noopener\">Complete CSS Tutorial: Essential Guide to Understand CSS<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQs<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1708929564274\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">1. What are the 3 types of CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The three types of CSS are Inline CSS (written inside an HTML tag&#8217;s <code>style<\/code> attribute), Internal CSS (written inside a <code>&lt;style><\/code> tag in the <code>&lt;head><\/code> section), and External CSS (written in a separate <code>.css<\/code> file linked to HTML). Each of these types of CSS has a specific purpose. External CSS is the industry standard for all production websites.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1708929567305\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">2. What is the difference between inline and external CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>These are two very different types of CSS. Inline CSS applies styles to a single HTML element and has the highest specificity. External CSS applies styles to entire pages and websites through a linked <code>.css<\/code> file. Of all the types of CSS, external is the most reusable, maintainable, and cacheable by the browser.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1708929568995\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">3. Which type of CSS is best for a real website?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>External CSS is the best type of CSS for any real, multi-page website. It separates content from design, allows one file to style an entire site, and is cached by the browser for faster load times. Internal CSS is acceptable for single-page demos. Inline CSS should be used only for HTML emails or isolated overrides.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1708929570660\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">4. Why does inline CSS override internal and external CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Because of CSS specificity rules. Among all types of CSS, inline has the highest specificity value (1000 points), internal and external styles have lower values. When the same property is set by multiple types of CSS on the same element, the highest specificity value wins. This is the &#8220;cascading&#8221; part of Cascading Style Sheets.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Every website you visit has CSS working behind the scenes to control colours, fonts, spacing, and layout. But not all CSS is written the same way. Understanding the types of CSS is one of the first things you learn on any frontend development path. The three types of CSS \u2014 inline, internal, and external \u2014 [&hellip;]<\/p>\n","protected":false},"author":65,"featured_media":43154,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"views":"11733","authorinfo":{"name":"Jebasta","url":"https:\/\/www.guvi.in\/blog\/author\/jebasta\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2024\/02\/Feature-Image-Types-of-CSS-A-Comprehensive-Guide-to-Styling-Web-Pages-300x112.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/42687"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=42687"}],"version-history":[{"count":41,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/42687\/revisions"}],"predecessor-version":[{"id":115731,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/42687\/revisions\/115731"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/43154"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=42687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=42687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=42687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}