{"id":8075,"date":"2023-05-05T16:54:10","date_gmt":"2023-05-05T11:24:10","guid":{"rendered":"https:\/\/www.interviewbit.com\/blog\/?p=8075"},"modified":"2023-05-05T16:57:06","modified_gmt":"2023-05-05T11:27:06","slug":"types-of-css","status":"publish","type":"post","link":"https:\/\/www.interviewbit.com\/blog\/types-of-css\/","title":{"rendered":"Types of CSS (Cascading Style Sheet)"},"content":{"rendered":"\n<div class=\"gutentoc tocactive ullist\"><div class=\"gutentoc-toc-wrap\"><div class=\"gutentoc-toc-title-wrap\"><div class=\"gutentoc-toc-title\">Table Of Contents<\/div><div id=\"open\" class=\"text_open\">show<\/div><\/div><div id=\"toclist\"><div class=\"gutentoc-toc__list-wrap\"><ul class=\"gutentoc-toc__list\"><li><a href=\"#what-is-css\">What is CSS?<\/a><\/li><li><a href=\"#some-more-knowledge-about-css\">Some More Knowledge about CSS<\/a><\/li><ul class=\"gutentoc-toc__list\"><li><a href=\"#css-selectors-and-declarations\">CSS Selectors and Declarations<\/a><\/li><li><a href=\"#classes-in-css\">Classes in CSS<\/a><\/li><li><a href=\"#id-in-css\">ID in CSS<\/a><\/li><\/ul><li><a href=\"#types-of-css\">Types of CSS<\/a><\/li><ul class=\"gutentoc-toc__list\"><li><a href=\"#1-inline-css\">1. Inline CSS<\/a><\/li><li><a href=\"#2-internal-css\">2. Internal CSS<\/a><\/li><li><a href=\"#3-external-css\">3. External CSS<\/a><\/li><\/ul><li><a href=\"#conclusion\">Conclusion<\/a><\/li><li><a href=\"#additional-resources\">Additional Resources<\/a><\/li><\/ul><\/div><\/div><\/div><\/div>\n\n\n\n<p><strong>Cascading Style Sheets<\/strong> are one of the most popular tools used to style web pages. We can make a simple web page look awesome with the help of Cascading Style Sheets (CSS). So, in order to use CSS, it is very important to know about the types of CSS as it helps us understand which type we should use to style our web pages. Hence, this discussion focuses on the types of CSS.<\/p>\n\n\n\n<p>Also, we will have a unique approach to teach you about some of the basic CSS concepts like Selectors, Declarations, Classes in CSS, and IDs in CSS, along with an introduction to the different types of CSS simultaneously. Then, we will discuss the different types of CSS separately in detail, too.<\/p>\n\n\n\n<h2 id=\"what-is-css\">What is CSS?<\/h2>\n\n\n\n<p>CSS is the short form for Cascading Style Sheets. It is used for styling web pages whose basic structure has been designed using HTML. Without CSS in our websites, they will look like simple HTML web pages and will not look attractive at all.<\/p>\n\n\n\n<p>By using CSS, we can make a lot of normal beautification changes to our websites like changing the font style, changing the font size, changing the font colour, adding animations to text and images, setting a border to any image, the alignment of content on the web page, etc. For example, let us look at the 2 images shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img  loading=\"lazy\"  width=\"1024\"  height=\"224\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"helloworld\"  class=\"wp-image-8077 pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 1024px) 100vw, 1024px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-1024x224.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-1024x224.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-300x66.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-768x168.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-1536x336.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-2048x448.png 2048w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-380x83.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-550x120.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-800x175.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld-1160x254.png 1160w\" ><\/figure>\n\n\n\n<p>The above image is a screenshot of a website displaying \u201cHello World\u201d. This is only the HTML text and there is no styling in it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img  loading=\"lazy\"  width=\"1024\"  height=\"224\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"helloworld1\"  class=\"wp-image-8078 pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 1024px) 100vw, 1024px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-1024x224.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-1024x224.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-300x66.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-768x168.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-1536x337.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-2048x449.png 2048w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-380x83.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-550x121.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-800x175.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/helloworld1-1160x254.png 1160w\" ><\/figure>\n\n\n\n<p>However, you can clearly see the second image where we have used CSS to style the heading written in plain HTML to make it look good and attract the users towards the website.&nbsp;<\/p>\n\n\n\n<p>The HTML code for the second image is shown below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Document&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;h1>Hello World&lt;\/h1>\n    &lt;h1 style=\"color: blueviolet; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\">Hello World&lt;\/h1>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p>The above-shown code, which helps in setting the colour of the text to blue-violet and also changes the default font family to sans-serif is also a type of CSS that we are going to study. It is known as inline CSS. We will study this in detail in the later section of this article.<\/p>\n\n\n\n<h2 id=\"some-more-knowledge-about-css\">Some More Knowledge about CSS<\/h2>\n\n\n\n<p>CSS is often said to be a combination of selectors and declarations. What are selectors and declarations? Let us study them.<\/p>\n\n\n\n<h3 id=\"css-selectors-and-declarations\">CSS Selectors and Declarations<\/h3>\n\n\n\n<p>A selector is nothing but an HTML Tag that we want to style and a declaration is a combination of a property and the value that is assigned to the property. For instance, in the code above, we have written the following line:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1 style=\"color: blueviolet; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\">Hello World&lt;\/h1><\/pre>\n\n\n\n<p>Here, &lt;h1&gt; is the selector as we are applying the changes to the property of h1 and \u201ccolor: bluevoilet; font-family: \u2018Segoe UI\u2019,Tahoma,Geneva,Verdana,sans-serif\u201d, is a declaration. It is a combination of properties and their values. Here, color is a property and \u2018bluevoilet\u2019 is the value of that property and similar is the case with the next property i.e. font-family.<\/p>\n\n\n\n<p>Also, CSS selectors can be normal elements like h1, p, div, etc. but they can also be classes and IDs. Let us understand a little bit about the classes and IDs in CSS too.<\/p>\n\n\n\n<h3 id=\"classes-in-css\">Classes in CSS<\/h3>\n\n\n\n<p>We can assign a class to an element (tag) or a group of elements (multiple tags) to identify them and use them as selectors. For example, if we want to change the color of all the headings in the web page to blue, we can assign class = \u201cblueHeadings\u201d to every heading tag in the HTML page. Please note that the name \u201cblueHeadings\u201d is just a custom name, i.e. you can name your class anything. For instance, you may name it \u201cIce-Cream\u201d if you want to. However, for the obvious reasons of understanding the code and increasing its readability, it is preferred that the names must be somewhat related to the properties that the class will possess.<\/p>\n\n\n\n<p>The code below is for a web page when we have not applied CSS to the heading tags and the screenshot of the webpage is also shown below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Document&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;h1>Hello World&lt;\/h1>\n    &lt;h2>Hello World&lt;\/h2>\n    &lt;h3>Hello World&lt;\/h3>\n    &lt;h4>Hello World&lt;\/h4>\n    &lt;h5>Hello World&lt;\/h5>\n    &lt;h6>Hello World&lt;\/h6>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img  loading=\"lazy\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"hello\"  class=\"wp-image-8079 pk-lazyload\"  width=\"512\"  height=\"484\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 512px) 100vw, 512px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-1024x967.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-1024x967.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-300x283.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-768x725.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-1536x1450.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-2048x1934.png 2048w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-380x359.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-550x519.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-800x755.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello-1160x1095.png 1160w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello.png 3536w\" ><\/figure>\n\n\n\n<p>Now, let us apply the CSS class on all the headings to see the result.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Document&lt;\/title>\n    &lt;style>\n        .blueHeadings {\n            color: blue;\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body>\n    &lt;h1 class=\"blueHeadings\">Hello World&lt;\/h1>\n    &lt;h2 class=\"blueHeadings\">Hello World&lt;\/h2>\n    &lt;h3 class=\"blueHeadings\">Hello World&lt;\/h3>\n    &lt;h4 class=\"blueHeadings\">Hello World&lt;\/h4>\n    &lt;h5 class=\"blueHeadings\">Hello World&lt;\/h5>\n    &lt;h6 class=\"blueHeadings\">Hello World&lt;\/h6>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img  loading=\"lazy\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"hello1\"  class=\"wp-image-8082 pk-lazyload\"  width=\"340\"  height=\"512\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 340px) 100vw, 340px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-680x1024.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-680x1024.png 680w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-199x300.png 199w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-768x1157.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-1020x1536.png 1020w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-1360x2048.png 1360w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-380x572.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-550x828.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-800x1205.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1-1160x1747.png 1160w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/hello1-1.png 2217w\" ><\/figure>\n\n\n\n<p>Now, the HTML code shown above has a &lt;style&gt; tag where we have applied the color blue to the class named \u201cblueHeadings\u201d. Also, in each heading tag, we have mentioned that the class is \u201cblueHeadings\u201d. So, we can see that the headings have a blue color and our styling was successful. The above-shown method of writing the CSS inside the style tag in the HTML file is called Internal CSS. So, this is another type of CSS and we will discuss this in detail, in the later sections of this article. Now, let us understand the meaning of a CSS ID.<\/p>\n\n\n\n<h3 id=\"id-in-css\">ID in CSS<\/h3>\n\n\n\n<p>We discussed how we can apply a class to a number of HTML elements at the same time so that we can change the properties of multiple elements at the same time. However, if there are multiple elements\/tags that are the same and we want to make changes only to a particular tag, we can assign it with an ID. As the name suggests, the ID is unique. This means that 2 elements cannot have the same ID in CSS.\u00a0<\/p>\n\n\n\n<p>Let us understand this with the help of an example. Let us say we have multiple h1 tags in our webpage as shown in the code, as well as the screenshot of the webpage below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Document&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;h1>I am H1.&lt;\/h1>\n    &lt;h1>I am also H1.&lt;\/h1>\n    &lt;h1> Me too.&lt;\/h1>\n    &lt;h1>Hey man, me too.&lt;\/h1>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img  loading=\"lazy\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"h1\"  class=\"wp-image-8081 pk-lazyload\"  width=\"256\"  height=\"242\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 256px) 100vw, 256px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-1024x967.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-1024x967.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-300x283.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-768x725.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-1536x1450.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-2048x1934.png 2048w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-380x359.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-550x519.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-800x755.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1-1160x1095.png 1160w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/h1.png 3536w\" ><\/figure>\n\n\n\n<p>Now, let us say that we want to change the color of the third h1 that says \u201cMe too\u201d, to blue. So, we can do it by setting an id to that h1 and leave the rest as it is and apply the style to that id. This is shown in the code below:<\/p>\n\n\n\n<p><strong>HTML Code:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Document&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n&lt;body>\n    &lt;h1>I am H1.&lt;\/h1>\n    &lt;h1>I am also H1.&lt;\/h1>\n    &lt;h1 id=\"blueH1\"> Me too.&lt;\/h1>\n    &lt;h1>Hey man, me too.&lt;\/h1>\n&lt;\/body>\n&lt;\/html<\/pre>\n\n\n\n<p><strong>CSS Code:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#blueH1 {\n    color: blue;\n}<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img  loading=\"lazy\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"css h1\"  class=\"wp-image-8083 pk-lazyload\"  width=\"256\"  height=\"242\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 256px) 100vw, 256px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-1024x967.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-1024x967.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-300x283.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-768x725.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-1536x1450.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-2048x1934.png 2048w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-380x359.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-550x519.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-800x755.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1-1160x1095.png 1160w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/css-h1.png 3536w\" ><\/figure>\n\n\n\n<p>So, you can clearly see that we have applied the style successfully to the 3rd h1 tag only. You might have noticed that this time we have written the CSS code separately and have linked the CSS file using the &lt;link> tag in the HTML Code. This is the 3rd type of CSS and is called External CSS. So, now we have understood some basic concepts of CSS, like the need for CSS, the CSS selectors and declarations, and CSS Classes and IDs. In between these topics, you have been introduced to the 3 types of CSS also viz. Inline CSS, Internal CSS, and External CSS. Now, let us move in-depth to understanding the types of CSS.<\/p>\n\n\n\n<h2 id=\"types-of-css\">Types of CSS<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img  loading=\"lazy\"  width=\"1024\"  height=\"538\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"Types of CSS\"  class=\"wp-image-8084 pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 1024px) 100vw, 1024px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-1024x538.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-1024x538.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-300x158.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-768x404.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-1536x808.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-2048x1077.png 2048w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-380x200.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-550x289.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-800x421.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS-1160x610.png 1160w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/Types-of-CSS.png 3537w\" ><\/figure>\n\n\n\n<h3 id=\"1-inline-css\">1. Inline CSS<\/h3>\n\n\n\n<p>Inline CSS means the CSS that is written within the HTML tag itself. As you saw in the example above, where we styled the Hello World heading with blue violet color, the entire CSS was written in the heading tag itself. Let us see another example for the same.&nbsp;<br>Say, we have a heading and we want to change the color of the heading to red. This can be done using inline CSS as follows:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Document&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;h1 style=\"color: red;\">I am a heading.&lt;\/h1>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img  loading=\"lazy\"  width=\"1024\"  height=\"199\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"heading\"  class=\"wp-image-8085 pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 1024px) 100vw, 1024px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-1024x199.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-1024x199.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-300x58.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-768x149.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-1536x298.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-2048x397.png 2048w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-380x74.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-550x107.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-800x155.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/heading-1160x225.png 1160w\" ><\/figure>\n\n\n\n<p>So, as you can see, inside the heading tag &lt;h1> only, we wrote style = \u201ccolor: \u2018red\u2019\u201d. This means that we want to see the color of the heading red. So, this is inline CSS.<\/p>\n\n\n\n<p id=\"disadvantage-of-inline-css\"><strong>Disadvantage Of Inline CSS<\/strong>:<\/p>\n\n\n\n<p>The inline CSS in a way does not separate the content from the design. In front-end web development, it is very clearly stated that the purposes of HTML, CSS and Javascript are unique and different from each other. The functionality of HTML is to provide structure to the webpage and the functionality of CSS is to give style and good appearance to the website. However, the functionality of Javascript is to make websites dynamic in nature and add functionalities to the web pages.<\/p>\n\n\n\n<p>So, the major disadvantage of Inline CSS is that it does not provide us with a separation of concerns. Also, Inline CSS is difficult to read and write when understanding\/writing the code for a website. Hence, we should try to avoid the use of inline CSS.<\/p>\n\n\n\n<h3 id=\"2-internal-css\">2. Internal CSS<\/h3>\n\n\n\n<p>In internal CSS, we still don\u2019t have a separate file for writing CSS however, it is now separated from the HTML tags and not written within them. It can be considered as the type of CSS that lies in between inline and external CSS. The CSS code that we write for a web page should be written within the &lt;style>&lt;\/style> tags under the head section of the HTML webpage.<\/p>\n\n\n\n<p>So, let us try to change the colour of our heading \u201cInterviewBit\u201d to red, using internal CSS.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Document&lt;\/title>\n    &lt;style>\n        h1 {\n            color: red;\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body>\n    &lt;h1>InterviewBit&lt;\/h1>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img  loading=\"lazy\"  width=\"1024\"  height=\"224\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"interviewbit\"  class=\"wp-image-8086 pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 1024px) 100vw, 1024px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-1024x224.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-1024x224.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-300x66.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-768x168.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-1536x337.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-2048x449.png 2048w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-380x83.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-550x121.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-800x175.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2022\/04\/interviewbit-1160x254.png 1160w\" ><\/figure>\n\n\n\n<p id=\"disadvantages-of-internal-css\"><strong>Disadvantages of Internal CSS<\/strong>:<\/p>\n\n\n\n<p>The complexity of writing CSS code inside the HTML tag has now been removed as we write the code in separate spaces and not within the same HTML tag. However, the separation of concerns is still not present as we are still writing the CSS code in the HTML file only. CSS and HTML should have separate files of their own so that we have complete separation of building the webpage and styling it.<\/p>\n\n\n\n<h3 id=\"3-external-css\">3. External CSS<\/h3>\n\n\n\n<p>The external CSS solves the problem of separation of concerns completely as we have a separate file for writing the CSS code. We write the HTML code in the .html file and the CSS code is written inside a .css file. They are linked to each other using the &lt;link> tag in HTML. The link tag is written inside the &lt;head> tag of HTML. Its syntax is as follows<\/p>\n\n\n\n<p><strong>If HTML and CSS Files are within Separate Directories<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"pathOfTheCssFile.css\"><\/pre>\n\n\n\n<p>So, as you can see in the href attribute, you have to provide the path of that CSS file which you want to link to your HTML file. Also, if the HTML and CSS files are within the same directory (on the same hierarchy level) then you do not need to specify the whole path of the CSS file. Only the name.css will work.<\/p>\n\n\n\n<p><strong>If HTML and CSS Files are within the Same Directories<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"nameOfTheCSSFile.css\"><\/pre>\n\n\n\n<p>So, let us now try to color our heading \u201cInterviewBit\u201d with the red color using external CSS.<\/p>\n\n\n\n<p><strong>HTML Code<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Document&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n&lt;body>\n    &lt;h1>InterviewBit&lt;\/h1>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p><strong>CSS Code<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">h1 {\n    color:red;\n}<\/pre>\n\n\n\n<p>So, as you can see in the code above, we have linked the CSS file, style.css to the HTML file using the &lt;link&gt; tag and we have just used the name of the CSS file meaning that the CSS and HTML files are within the same directory.<\/p>\n\n\n\n<p>So, these are the 3 types of CSS and the methods to use each one of them.<\/p>\n\n\n\n<h2 id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>After understanding all the 3 types of CSS, we can say that External CSS is the most widely used type and it should be preferred because of 2 reasons:<\/p>\n\n\n\n<ol><li>It provides the ease of writing the CSS code neatly and separately and does not create any confusion as the code is not to be written inside the HTML tags.<\/li><li>The main reason is that External CSS provides separation of concerns as HTML is only meant for web page designing and CSS for styling purposes, and having a separate file for CSS and HTML helps us achieve that.<\/li><\/ol>\n\n\n\n<h2 id=\"additional-resources\">Additional Resources<\/h2>\n\n\n\n<ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/css-interview-questions\/\" target=\"_blank\">CSS Interview Questions<\/a><\/li><li><a href=\"https:\/\/www.interviewbit.com\/css-mcq\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS MCQ<\/a><\/li><li><a href=\"https:\/\/www.interviewbit.com\/blog\/html-css-books\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML\/CSS Books<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/difference-between-css-and-css3\/\" target=\"_blank\">Difference Between CSS and CSS3<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/difference-between-html-and-css\/\" target=\"_blank\">Difference Between HTML and CSS<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"Cascading Style Sheets are one of the most popular tools used to style web pages. We can make&hellip;\n","protected":false},"author":4,"featured_media":8095,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_daextam_enable_autolinks":"1","csco_singular_sidebar":"","csco_page_header_type":"","csco_appearance_grid":"","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_location_hash":"","csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0},"categories":[1351],"tags":[441,1353],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/posts\/8075"}],"collection":[{"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/comments?post=8075"}],"version-history":[{"count":6,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/posts\/8075\/revisions"}],"predecessor-version":[{"id":18729,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/posts\/8075\/revisions\/18729"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/media\/8095"}],"wp:attachment":[{"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/media?parent=8075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/categories?post=8075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/tags?post=8075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}