{"id":3358,"date":"2024-02-14T08:49:00","date_gmt":"2024-02-14T06:49:00","guid":{"rendered":"https:\/\/www.mcloud9.com\/blog\/?p=3358"},"modified":"2024-12-16T15:00:54","modified_gmt":"2024-12-16T13:00:54","slug":"the-3-types-of-css-inline-internal-external","status":"publish","type":"post","link":"https:\/\/www.mcloud9.com\/blog\/the-3-types-of-css-inline-internal-external\/","title":{"rendered":"Easy Guide to the 3 Types of CSS: Inline, Internal &amp; External CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Are you ready to level up your skills and enhance your website&#8217;s appearance? Well, you&#8217;ve come to the right place because today, we&#8217;re delving into the world of <a href=\"\/blog\/what-is-css\">CSS \u2013 Cascading Style Sheets<\/a>. We&#8217;re going to break down the three essential types of CSS: Inline, Internal, and External CSS. By the end of this guide, you&#8217;ll have a solid grasp of when and how to use each of these styles to make your web design shine. So, let&#8217;s dive in!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As we delve into this easy guide, we&#8217;ll explore each of these types, their applications, and when to use them. But before we dive into CSS, let&#8217;s take a moment to go over the basics of what CSS is and its close companion, HTML.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#what-is-css\">What Is CSS?<\/a><\/li><li><a href=\"#what-is-html\">What Is HTML?<\/a><\/li><li><a href=\"#overview-of-the-three-3-types-of-css\">Overview of the Three 3 Types of CSS<\/a><\/li><li><a href=\"#inline-css\">Inline CSS<\/a><ul><li><a href=\"#applying-inline-css-to-an-html-element\">Applying Inline CSS to an HTML Element<\/a><\/li><li><a href=\"#when-to-use-inline-css\">When To Use Inline CSS<\/a><\/li><\/ul><\/li><li><a href=\"#internal-css\">Internal CSS<\/a><ul><li><a href=\"#including-internal-css-to-your-html-document\">Including Internal CSS to Your HTML Document<\/a><\/li><li><a href=\"#when-to-use-internal-css\">When To Use Internal CSS<\/a><\/li><\/ul><\/li><li><a href=\"#external-css\">External CSS<\/a><ul><li><a href=\"#linking-external-css-to-your-web-page\">Linking External CSS to Your Web Page<\/a><\/li><li><a href=\"#when-to-use-external-css\">When To Use External CSS<\/a><\/li><\/ul><\/li><li><a href=\"#faq-for-types-of-css-styles\">FAQ for Types of CSS Styles<\/a><ul><\/ul><\/li><li><a href=\"#in-conclusion\">In Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-css\">What Is CSS?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS, which stands for Cascading Style Sheets, is a style sheet language used to control the presentation and formatting of a web page written in HTML (Hypertext Markup Language). In simpler terms, CSS is like the stylist of your website, determining how your content will be dressed up. It allows you to define the look, layout, and design of your web pages, from the fonts and colours to the positioning of elements. CSS transforms plain HTML into beautifully styled web pages. You can explore the fundamentals of CSS in our detailed article: <a href=\"\/blog\/what-is-css\">What Is CSS? Master the Art of Cascading Style Sheets for HTML<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-html\">What Is HTML?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML, on the other hand, is the structural language of the web. It&#8217;s the foundation of web pages, used to create the structure of content and elements like headings, paragraphs, links, and images. In a way, HTML can be thought of as the blueprint of a house, while CSS is the paint and decoration that brings that blueprint to life. Learn more about how HTML works in our article: <a href=\"\/blog\/what-is-html\">What Is HTML? Breaking Down the Hypertext Markup Language<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we have our fundamental terms clear, let&#8217;s move on to explore the types of CSS that can elevate your web design skills.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"overview-of-the-three-3-types-of-css\">Overview of the Three 3 Types of CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s explore the three types of CSS styles that you can use to make your website visually appealing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"inline-css\">Inline CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Inline CSS is like adding a personal touch to your web page elements. You can apply this type of CSS directly to individual HTML elements, and it&#8217;s great for making quick style adjustments without affecting the entire page. You apply it directly to an HTML element using the style attribute.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"applying-inline-css-to-an-html-element\">Applying Inline CSS to an HTML Element<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s say you want to change the colour of a specific paragraph text. Here&#8217;s how you do it with inline CSS:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Before<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>&lt;p&gt;This is a stylish paragraph.&lt;\/p&gt;<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>After<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>&lt;p style=\"color: red;\"&gt;This is a stylish paragraph.&lt;\/p&gt;<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This inline style attribute within the HTML tag, in this case the <code>&lt;p&gt;<\/code> tag, overrides any other CSS styles applied to this particular paragraph. You can add multiple CSS styles to the style attribute by separating each with a semicolon. It&#8217;s a handy way to make quick and targeted changes to a single element without creating a separate style sheet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"when-to-use-inline-css\">When To Use Inline CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Inline CSS is ideal for making one-off style changes or experimenting with styles on the fly. It&#8217;s particularly useful for specific, isolated adjustments. However, it&#8217;s not the best choice for consistent styling across multiple web pages, as it can quickly become unwieldy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"internal-css\">Internal CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Internal CSS, also known as embedded CSS, takes things up a notch by allowing you to define styles within the head section of your HTML file. This approach offers more flexibility and organisation while still keeping the styles confined to a single page.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"including-internal-css-to-your-html-document\">Including Internal CSS to Your HTML Document<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To use internal CSS, you place the style block within the &lt;head&gt; section of your HTML file. Here&#8217;s an example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n<strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h1, h2, h3 {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Arial, sans-serif;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h1 {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 24px;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/style&gt;<\/strong>\n&lt;\/head&gt;\n&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Welcome to My Website&lt;\/h1&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;About me&lt;\/h2&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;Contact info&lt;\/h3&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">With internal CSS, you can apply styles consistently across a single HTML page without affecting other pages. It&#8217;s a step towards maintaining a more organised and modular approach to your web design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"when-to-use-internal-css\">When To Use Internal CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use internal CSS when you want to apply styles consistently to multiple elements on a single page or keep your styles organised within a specific HTML document. This is especially useful for small to medium-sized websites with a limited number of pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"external-css\">External CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">External CSS is where the real magic happens. With this approach, you create a separate CSS file, and you can apply the same styles across multiple web pages. It&#8217;s the secret sauce behind the cohesive and professional look of many websites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"linking-external-css-to-your-web-page\">Linking External CSS to Your Web Page<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To use external CSS, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a separate CSS file (e.g., &#8220;<em>styles.css<\/em>&#8220;) containing your styles.<\/li>\n\n\n\n<li>Link the CSS file to your HTML document using the <code>&lt;link&gt;<\/code> element within the <code>&lt;head&gt;<\/code> section of your HTML.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what it looks like:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Inside &#8220;styles.css&#8221;:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1, h2, h3 {\n    font-family: Arial, sans-serif;\n}\n\nh1 {\n    font-size: 24px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Link the external CSS file via your HTML code<\/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    <strong>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\"&gt;<\/strong>\n&lt;\/head&gt;\n&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Welcome to My Website&lt;\/h1&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;About me&lt;\/h2&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;Contact info&lt;\/h3&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">By using an external CSS file, you can maintain a consistent look and feel across your entire website without duplicating styles. Any changes made to the external CSS file will automatically reflect on all linked pages. It separates content from presentation and allows for easy updates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"when-to-use-external-css\">When To Use External CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is your go-to choice when you have a larger website with multiple pages. It offers efficiency, easy management, and the ability to make global changes swiftly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq-for-types-of-css-styles\">FAQ for Types of CSS Styles<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1699291313331\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the look and formatting of a document written in HTML or XML.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1699291317519\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What are the 3 types of CSS styles?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The three types of CSS styles are inline, internal, and external CSS.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1699291324967\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is inline CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Inline CSS is a way of <a href=\"https:\/\/www.w3schools.com\/css\/css_howto.asp\" target=\"_blank\" rel=\"noreferrer noopener\">adding CSS<\/a> directly to specific HTML tags. The CSS rules are written within the <a href=\"\/blog\/what-is-html\">HTML tags<\/a> using the attribute: style.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1699291332992\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is internal CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Internal CSS can be used when you want to <a href=\"https:\/\/www.w3schools.com\/css\/css_howto.asp\" target=\"_blank\" rel=\"noreferrer noopener\">apply CSS rules<\/a> to a single HTML file. The CSS code is placed inside the head section of the <a href=\"\/blog\/what-is-html\">HTML document<\/a> using the style tags.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1699291340856\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What are external style sheets?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>External CSS is used to style multiple HTML files. The <a href=\"\/blog\/what-is-css\">CSS code<\/a> is written in a separate file with a .css extension, and it is linked to the HTML file using the link tag.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1699291350033\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do selectors work in CSS?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>CSS selectors are used to target and style individual HTML elements. Selectors can be based on element type, ID, class, attributes, and more.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"in-conclusion\">In Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">So, there you have it \u2013 a comprehensive guide to the three types of CSS: Inline, Internal, and External. Inline CSS is perfect for quick, targeted changes, while internal CSS provides organisation within a single page. However, it&#8217;s the use of external CSS that allows you to maintain a professional and cohesive appearance throughout your entire website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, whether you&#8217;re a seasoned web designer or just starting on your journey, remember that MCloud9 is here to help you establish a reliable online presence. With our <a href=\"\/web-hosting\">web hosting<\/a> and <a href=\"\/register-a-domain\">domain registration<\/a> services, you can ensure that your website runs smoothly and efficiently,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you ready to level up your skills and enhance your website&#8217;s appearance? Well, you&#8217;ve come to the right place because today, we&#8217;re delving into the world of CSS \u2013 Cascading Style Sheets. We&#8217;re going to break down the three essential types of CSS: Inline, Internal, and External CSS. By the end of this guide, [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":3364,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"tdm_status":"","tdm_grid_status":"","footnotes":""},"categories":[36,10,35],"tags":[],"class_list":["post-3358","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-dev","category-featured","category-web-design"],"_links":{"self":[{"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/posts\/3358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/comments?post=3358"}],"version-history":[{"count":8,"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/posts\/3358\/revisions"}],"predecessor-version":[{"id":3747,"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/posts\/3358\/revisions\/3747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/media\/3364"}],"wp:attachment":[{"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/media?parent=3358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/categories?post=3358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mcloud9.com\/blog\/wp-json\/wp\/v2\/tags?post=3358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}