{"id":16778,"date":"2021-08-01T12:49:00","date_gmt":"2021-08-01T07:19:00","guid":{"rendered":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/"},"modified":"2024-09-03T11:24:31","modified_gmt":"2024-09-03T05:54:31","slug":"css-tutorial","status":"publish","type":"post","link":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/","title":{"rendered":"Introduction to CSS | CSS Tutorial for Beginners"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"what-is-css\"><strong>What is CSS?<\/strong><\/h2>\n\n\n\n<p>CSS stands for Cascading Style Sheets. It&nbsp;is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users. <\/p>\n\n\n\n<p>CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based markup language. Now let\u2019s try to break the acronym:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cascading: Falling of Styles<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Style: Adding designs\/Styling our HTML tags<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sheets: Writing our style in different documents<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"HTML and CSS Full Course | Learn HTML &amp; CSS in 10 Hours | HTML &amp; CSS Tutorial | Great Learning\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/uhza_QbzR7o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>To get a better understanding of CSS, check out this <a href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/css-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Tutorial.<\/a> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-history\"><strong>&nbsp;CSS History<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1994: First Proposed by Hakon Wium Lie on 10th October<\/li>\n\n\n\n<li>1996: CSS was published on 17th November with influencer Bert Bos<\/li>\n\n\n\n<li>Later he became co-author of CSS<\/li>\n\n\n\n<li>1996: CSS became official with CSS was published in December<\/li>\n\n\n\n<li>1997: Created CSS level 2 on 4th November&nbsp;<\/li>\n\n\n\n<li>1998: Published on 12th May<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-editors\"><strong>&nbsp;CSS Editors<\/strong><\/h2>\n\n\n\n<p>Some of the popular editors that are best suited to wire CSS code are as following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Atom<\/li>\n\n\n\n<li>Visual Studio Code<\/li>\n\n\n\n<li>Brackets<\/li>\n\n\n\n<li>Espresso(For Mac OS&nbsp; User)<\/li>\n\n\n\n<li>Notepad++(Great for HTML &amp; CSS)<\/li>\n\n\n\n<li>Komodo Edit (Simple)<\/li>\n\n\n\n<li>Sublime Text (Best Editor)<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-syntax\"><strong>&nbsp;CSS Syntax<\/strong><br><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\n Selector {\n  \t\t Property 1 : value;\n                \t Property 2 : value;\n               \t Property 3 : value;\n             }\n  For example:\n         h1\n            {\n                Color: red;\n                 Text-align: center;\n\n            }\n          #unique \n           {\n                 color: green;\n           }\n\n\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Selector: selects the element you want to target<\/li>\n\n\n\n<li>Always remains the same whether we apply internal or external styling&nbsp;<\/li>\n\n\n\n<li>There are few basic selectors like tags, id\u2019s, and classes<\/li>\n\n\n\n<li>All forms this key-value pair<\/li>\n\n\n\n<li>Keys: properties(attributes) like color, font-size, background, width, height,etc<\/li>\n\n\n\n<li>Value: values associated with these properties<\/li>\n<\/ul>\n\n\n\n<p><strong><em><a href=\"https:\/\/www.mygreatlearning.com\/blog\/html-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Click here to see a tutorial to HTML (opens in a new tab)\">Click here to see a tutorial to HTML<\/a><\/em><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-comment\"><strong>&nbsp;CSS Comment<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Comments don\u2019t render on the browser<\/li>\n\n\n\n<li>Helps to understand our code better and makes it readable.<\/li>\n\n\n\n<li>Helps to debug our code<\/li>\n\n\n\n<li>Two ways to&nbsp; comment:\n<ul class=\"wp-block-list\">\n<li>Single line&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code> \/*&lt;h6&gt; This represents the most\/ least important line of the doc. &lt;\/h6&gt;*\/<\/code><\/pre>\n\n\n\n<p>Here is how to comment out multiple lines:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n \/*\n         h1\n     {\n     color: red;\n     text-align: center;\n      } \n      *\/<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-how-to\"><strong>&nbsp;CSS How-To&nbsp;<\/strong><br><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>There are 3 ways to write CSS in our HTML file.\n<ul class=\"wp-block-list\">\n<li>Inline CSS<\/li>\n\n\n\n<li>Internal CSS<\/li>\n\n\n\n<li>External CSS<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Priority order\n<ul class=\"wp-block-list\">\n<li>Inline &gt; Internal &gt; External<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>&nbsp;&nbsp;Inline CSS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Before CSS this was the only way to apply styles<\/li>\n\n\n\n<li>Not an efficient way to write as it has a lot of redundancy<\/li>\n\n\n\n<li>Self-contained&nbsp;<\/li>\n\n\n\n<li>Uniquely applied on each element<\/li>\n\n\n\n<li>The idea of separation of concerns was lost<\/li>\n\n\n\n<li>Example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h3 style=\u201d color:red\u201d&gt; Have a great day &lt;\/h3&gt;\n&lt;p  style =\u201d color: green\u201d&gt; I did this , I did that &lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;Internal CSS<\/strong><br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>With the help of style tag, we can apply styles within the HTML file<\/li>\n\n\n\n<li>&nbsp;Redundancy is removed<\/li>\n\n\n\n<li>But the idea of separation of concerns still lost<\/li>\n\n\n\n<li>Uniquely applied on a single document<\/li>\n\n\n\n<li>Example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt; style&gt;\n              h1{\n                     color:red;\n                   }\n     &lt;\/style&gt;  \n    &lt;h3&gt; Have a great day &lt;\/h3&gt;<\/code><\/pre>\n\n\n\n<p><strong>&nbsp;&nbsp;External CSS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>With the help of &lt;link&gt; tag in the head tag, we can apply styles<\/li>\n\n\n\n<li>Reference is added&nbsp;<\/li>\n\n\n\n<li>File saved with .css extension<\/li>\n\n\n\n<li>Redundancy is removed<\/li>\n\n\n\n<li>The idea of separation of concerns is maintained<\/li>\n\n\n\n<li>Uniquely applied to each document<\/li>\n\n\n\n<li>Example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"name of the Css file\"&gt;\n&lt;\/head&gt;\n            h1{\n                     color:red;         \/\/.css file\n                 }<\/code><\/pre>\n\n\n\n<p><strong>Implementation of all the three types of CSS:<\/strong><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;HTML&lt;\/title&gt;\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"first.css\"&gt;\n&lt;style&gt;\nh1\n{\n   color:green;\n} \n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;This heading will be green&lt;\/h1&gt;\n&lt;p style=\"color:Red\"&gt;This paragraph will be red&lt;\/p&gt; \n&lt;p  id=\"center\"&gt;This paragraph will be pink and center-aligned&lt;\/p&gt; \n\n&lt;\/body&gt;\n&lt;\/html&gt;\n\n\nThis is Css file\n\n#center {\n  text-align: center;\n  color:pink;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<p>Check out this <a href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/css-properties\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Properties<\/a> course to learn more about CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-selectors\"><strong>CSS Selectors<\/strong><br><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The selector is used to target elements and apply CSS&nbsp;<\/li>\n\n\n\n<li>Three simple selectors\n<ul class=\"wp-block-list\">\n<li>Element Selector&nbsp;<\/li>\n\n\n\n<li>Id Selector<\/li>\n\n\n\n<li>Class Selector<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Priority of Selectors<\/li>\n<\/ul>\n\n\n\n<p>Id &gt; Class&gt;Element<\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;Element Selector<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Used to select HTML elements by its name<\/li>\n\n\n\n<li>How we do it<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>h1\n     {\n      Color: red;\n     }<\/code><\/pre>\n\n\n\n<p>We selected the heading tag and then changed the color property i.e text color to red. Now whatever is written in this tag (content) will have the text color as red. Check out <a href=\"https:\/\/www.mygreatlearning.com\/css\/free-courses\" target=\"_blank\" rel=\"noreferrer noopener\">CSS course<\/a> for free<\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;ID Selector<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The id attribute is used to select HTML element<\/li>\n\n\n\n<li>Used to target specific or unique element&nbsp;<\/li>\n\n\n\n<li>How we do it<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>#unique\n     {\n      Color: red;\n     }\n&lt;h1 id=\u201dunique\u201d&gt; Hi &lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>We selected the id and then changed the color property i.e text color to red. Now whatever is written in this tag (content) will have the text color as red&nbsp;<\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;Class Selector<\/strong><br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The class attribute is used to select HTML element<\/li>\n\n\n\n<li>Used to target a specific class of the element&nbsp;<\/li>\n\n\n\n<li>How we do it<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>group\n     {\n      Color: red;\n     }\n&lt;h1 class=\u201dgroup\u201d&gt; Hi &lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>We selected the class and then changed the color property i.e text color to red. Now whatever is written in this tag (content) will have the text color as red&nbsp;<\/p>\n\n\n\n<p><strong>Implementation of all the three selectors in CSS:<\/strong><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;HTML&lt;\/title&gt;\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"first.css\"&gt;\n&lt;style&gt;\n\n#center1 {\n  text-align: center;\n  color:pink;\n}\n\n.center2 {\n  text-align: center;\n  color:red;\n}\n\nh1\n{\n  text-align:center;\n   color:green;\n} \n\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;This heading will be green  and center-aligned &lt;\/h1&gt;\n&lt;p class = \"center2\"&gt;This paragraph will be red  and center-aligned &lt;\/p&gt; \n&lt;p  id =\"center1\"&gt;This paragraph will be pink and center-aligned&lt;\/p&gt; \n\n&lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<p>Now that we have seen all the three selectors now let\u2019s see how style falls or cascades. We will implement one program where we add style on the same element by using a tag, id\u2019s, and classes as selectors. The objective of this is to show how one style cuts the other style that might also be referred to as Priority. We will see that id have the highest priority over tags and classes.<\/p>\n\n\n\n<p>Now let\u2019s see its implementation:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;HTML&lt;\/title&gt;\n&lt;style&gt;\n\np{\n\tcolor:red;\n}\n.class {\n\tcolor:green;\n}\n#id{\n\tcolor:orange;\n}\n\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;p id=\"id\" class=\"class\"&gt; This is CSS &lt;\/p&gt; \n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>If you have observed how one style is fighting against another in order to style the element. Here the race was won by id, what if all the selectors are classes or tags then the one which is closer or applied at the end will win the race and what if a class and tag selectors are used on the same element, in that case, the race will be won by the class selector.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-colors\"><strong>CSS Colors<\/strong><br><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>There are different colouring schemes in CSS<\/li>\n\n\n\n<li>Three widely used techniques are as follows\n<ul class=\"wp-block-list\">\n<li><strong>RGB<\/strong>\n<ul class=\"wp-block-list\">\n<li>This starts with RGB and takes 3 parameter<\/li>\n\n\n\n<li>3 parameter basically corresponds to red, green and blue<\/li>\n\n\n\n<li>The value of each parameter may vary from 0 to 255.<\/li>\n\n\n\n<li>Eg: RGB(255,0,0); means color red<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>HEX<\/strong>\n<ul class=\"wp-block-list\">\n<li>Hex code starts with # and comprises of 6 numbers which are further divided into 3 sets<\/li>\n\n\n\n<li>Sets basically correspond to Red, Green, and Blue<\/li>\n\n\n\n<li>Single set value can vary from 00 to 09 and AA to FF<\/li>\n\n\n\n<li>Eg: #ff0000 ; means color red<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>RGBA<\/strong>\n<ul class=\"wp-block-list\">\n<li>This starts with RGB and takes 4 parameter<\/li>\n\n\n\n<li>4 parameter basically corresponds to red, green, blue and alpha<\/li>\n\n\n\n<li>Value of the first three parameters may vary from 0 to 255 and the last parameter ranges from 0 to 1 that is from 0.1, 0.2,.....0.9<\/li>\n\n\n\n<li>Eg: RGB(255,0,0,0); means color red<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Implementation of different types of colours in CSS:<\/strong><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;!DOCTYPE html&gt;\n  &lt;html&gt;\n  &lt;head&gt;\n\t&lt;title&gt;HTML&lt;\/title&gt;\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"first.css\"&gt;\n   &lt;style&gt;\n   \t#center{   color:#ff0099;}\t\n   \th1{ color:rgba(255,0,0,0.5);} \n    &lt;\/style&gt; \n&lt;\/head&gt;\n  &lt;body&gt;\n   \t  &lt;h1&gt;This heading will be green&lt;\/h1&gt;\n   &lt;p style=\"color:rgb(255,0,0)\"&gt;This paragraph will be red&lt;\/p&gt; \n \t  &lt;p  id=\"center\"&gt;This paragraph will be pink and center-aligned&lt;\/p&gt; \n\n   &lt;\/body&gt; \n    &lt;\/html&gt;\n\nThis is the output of the above program showing different shades of red.\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-background\"><strong>&nbsp;CSS Background<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>There are different ways by which CSS can have an effect on HTML elements<\/li>\n\n\n\n<li>Few of them are as follows:\n<ul class=\"wp-block-list\">\n<li>Color - used to set the color of the background<\/li>\n\n\n\n<li>Repeat - used to determine if the image has to repeat or not and if it is repeating then how it should do that<\/li>\n\n\n\n<li>Image - used to set an image as the background<\/li>\n\n\n\n<li>Position - used to determine the position of the image<\/li>\n\n\n\n<li>Attachment - It basically helps in controlling the mechanism of scrolling<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Implementation of Background Property in CSS:<\/strong><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;HTML&lt;\/title&gt;\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"first.css\"&gt;\n&lt;style&gt;\n\nhtml{\n\t background: #ff9900;\n}\n\np{\n      background: url(\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn%3AANd9GcRT8t-o6oUJ-E9YRhimOvTU2TSH7vlBnRWBN554_rX30dZah466&amp;usqp=CAU\");\n\t\n    background-position:center;\n\tbackground-repeat:no-repeat;\n\t\n\twidth: 100%;\n\theight: 600px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\nprovident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n&lt;\/p&gt; \n&lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-border\"><strong>CSS Border<\/strong><br><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Helps in setting up the border for HTML elements<\/li>\n\n\n\n<li>There are 4 properties that can help in setting up of border:\n<ul class=\"wp-block-list\">\n<li>Width - sets the width of the border<\/li>\n\n\n\n<li>Style - sets the style of border; Eg: solid, dashed etc.<\/li>\n\n\n\n<li>Color - sets the color of the border<\/li>\n\n\n\n<li>Radius - determines the roundness of the border<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can set the border for specifically top, right, bottom and left<\/li>\n\n\n\n<li>We can also club top and bottom together and same goes for left and right\n<ul class=\"wp-block-list\">\n<li>Eg: border-width: 2px 5px; &nbsp; sets top and bottom 2px; left and right 5px<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Border can also be set in a single line\n<ul class=\"wp-block-list\">\n<li>Eg: border : 2px solid blue;&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Implementation of Border Property in CSS:<\/strong><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;HTML&lt;\/title&gt;\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"first.css\"&gt;\n&lt;style&gt;\n\np{\n\tborder-style: solid;\n\tborder-color: blue;\n\tborder-width: 2px 5px;\n\tborder-radius: 10%;\n}\n\n\n\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n&lt;\/p&gt; \n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n&lt;\/p&gt; \n\n&lt;\/body&gt;\n&lt;\/html&gt;\n\n\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-boxmodel\"><strong>CSS BoxModel<\/strong><br><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Every element in CSS can be represented using the BOX model<\/li>\n\n\n\n<li>It allows us to add a border and define space between the content<\/li>\n\n\n\n<li>It helps the developer to develop and manipulate the elements<\/li>\n\n\n\n<li>It consists of 4 edges\n<ul class=\"wp-block-list\">\n<li>Content edge - It comprises of the actual content<\/li>\n\n\n\n<li>Padding edge - It lies in between content and border edge<\/li>\n\n\n\n<li>Border edge - Padding is followed by the border edge<\/li>\n\n\n\n<li>Margin edge - It is an outside border and controls the margin of the element<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>When you go in chrome and right-click, go on inspect. It will give all the elements that are used in the HTML file. In the right-hand side, there will be a box model like:<br><\/p>\n\n\n\n<p>The most inner rectangle represents our content, the padding is nothing but the space between the content and the border then the margin is the area outside the border.<\/p>\n\n\n\n<p><strong>Implementation of BoxModel in CSS:<\/strong><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;HTML&lt;\/title&gt;\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"first.css\"&gt;\n&lt;style&gt;\n\np{\n\tborder: 2px solid blue;\n\tmargin: 5px;\n\tpadding: 20px;\n\tcontent: 50px;\n}\n\n\n\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n&lt;\/p&gt; \n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n&lt;\/p&gt; \n&lt;\/body&gt;\n&lt;\/html&gt;\n\nThis is the output of the above program:\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Getting Started With CSS | Learn HTML And CSS From Scratch | Great Learning\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/F6OoYyOZxHo?start=1&feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-tutorial-faqs\"><strong>CSS Tutorial FAQs<\/strong><\/h2>\n\n\n\n<p><strong>Q: What are the capabilities of CSS?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> CSS helps in defining text alignment, color, font, size, spacing, borders, layout, and many such typographic characteristics. It can do all of it independently for on-screen as well as printed views.&nbsp;<\/p>\n\n\n\n<p><strong>Q: What are the three types of CSS?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> The three types of CSS include Inline CSS, Internal CSS, and External CSS. Inline CSS can be included directly in the HTML elements. Internal CSS is the other way of including CSS by using the style element in the head section of the HTML document. External CSS includes CSS by using an external stylesheet.<br><br><strong>Q: Is CSS difficult to learn?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> CSS is not difficult to learn but since it is detailed, it can be confusing. Learning the basics of CSS does not take time at all. However, if you want to master CSS, it may take some time for you.<\/p>\n\n\n\n<p><strong>Q: How can I be good at CSS?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> You can be good at CSS by wrapping your mind around positioning contexts, mastering floats, knowing your selectors, learning concepts of DRY coding, and knowing your browser support. You also can read some material available on the web to become a pro in CSS.<br><br><strong>Q: How can I learn CSS fast?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> The fastest way to learn CSS is to first be certain that you know HTML5 as well as the web foundations thoroughly. Once you have a deeper understanding of these key concepts and skills, you will be able to understand CSS and the cool CSS3 techniques easily. CSS3 is the styling language of web design; therefore, it helps in making your websites look awesome.<\/p>\n\n\n\n<p><strong>Q: How do I start CSS?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> You can get started with learning CSS in three ways, which include Inline CSS, Internal CSS, and External CSS. You can also find some tutorials that can guide you through learning CSS.<br><br><strong>Q: What are the levels of CSS?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> Levels of CSS help in building on the previous, filtering definitions and additional features. The feature set in all the higher levels is a superset of any lower level, and the behavior permitted for a specified feature in a higher level is a subcategory of that permitted in the lower levels.<\/p>\n\n\n\n<p><strong>Q: What are the examples of CSS code?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> The examples of CSS code include easy paragraph formatting, alteration of letter case, change link colors, eliminate link underlines, make a link button, create a text box, center-align elements, and adjust padding.<br><br><strong>Q: What is CSS language?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> CSS is the language that is used for defining the presentation of Web pages, which include colors, layout, and fonts. It enables one to adjust the presentation to several types of devices, like small screens, large screens, or printers. CSS can very easily be used with all types of XML-based markup languages.<\/p>\n\n\n\n<p><strong>Q: What are the three parts of a CSS syntax?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> The CSS syntax comprises a set of rules. These rules come in three parts such as a property, a selector, and a value.<br><br><strong>Q: What are the advantages of CSS?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> Some of the advantages of CSS include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The layout of a web page is better measured<\/li>\n\n\n\n<li>Style (CSS) is separate from structure (HTML), which means the reduced file size<\/li>\n\n\n\n<li>Smaller file size means lesser bandwidth and ultimately means quicker loading time.<\/li>\n<\/ul>\n\n\n\n<p><strong>Q: How do I open a CSS file in Chrome?<\/strong><\/p>\n\n\n\n<p><strong>A:<\/strong> To open a CSS file in Chrome, you have to open up DevTools, head over to DevTool settings, click open the experiments section, and allow the CSS overview option.<\/p>\n\n\n\n\n\n<p>This brings us to the end of this article where we learned about the basics of CSS. Check out this <a href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/front-end-development-html\">front end developer free course<\/a> from Great Learning Academy<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is CSS? CSS stands for Cascading Style Sheets. It&nbsp;is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users. CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":16780,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25860],"tags":[],"content_type":[],"class_list":["post-16778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Introduction to CSS | CSS Tutorial for Beginners<\/title>\n<meta name=\"description\" content=\"CSS Tutorial: CSS stands for Cascading Style Sheets. In this CSS tutorial, you are going to through various basic topics that can help you to get started.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to CSS | CSS Tutorial for Beginners\" \/>\n<meta property=\"og:description\" content=\"CSS Tutorial: CSS stands for Cascading Style Sheets. In this CSS tutorial, you are going to through various basic topics that can help you to get started.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Great Learning Blog: Free Resources what Matters to shape your Career!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GreatLearningOfficial\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-01T07:19:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T05:54:31+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Great Learning Editorial Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/Great_Learning\" \/>\n<meta name=\"twitter:site\" content=\"@Great_Learning\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Great Learning Editorial Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/\"},\"author\":{\"name\":\"Great Learning Editorial Team\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\"},\"headline\":\"Introduction to CSS | CSS Tutorial for Beginners\",\"datePublished\":\"2021-08-01T07:19:00+00:00\",\"dateModified\":\"2024-09-03T05:54:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/\"},\"wordCount\":2014,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Blog-Info-graphics-1000X700-02.jpg\",\"articleSection\":[\"IT\\\/Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/\",\"name\":\"Introduction to CSS | CSS Tutorial for Beginners\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Blog-Info-graphics-1000X700-02.jpg\",\"datePublished\":\"2021-08-01T07:19:00+00:00\",\"dateModified\":\"2024-09-03T05:54:31+00:00\",\"description\":\"CSS Tutorial: CSS stands for Cascading Style Sheets. In this CSS tutorial, you are going to through various basic topics that can help you to get started.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Blog-Info-graphics-1000X700-02.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Blog-Info-graphics-1000X700-02.jpg\",\"width\":1000,\"height\":700,\"caption\":\"CSS_GL\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/css-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"IT\\\/Software Development\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/software\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introduction to CSS | CSS Tutorial for Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"name\":\"Great Learning Blog\",\"description\":\"Learn, Upskill &amp; Career Development Guide and Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"alternateName\":\"Great Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\",\"name\":\"Great Learning\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"width\":900,\"height\":900,\"caption\":\"Great Learning\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/GreatLearningOfficial\\\/\",\"https:\\\/\\\/x.com\\\/Great_Learning\",\"https:\\\/\\\/www.instagram.com\\\/greatlearningofficial\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/greatlearning12\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/beaconelearning\\\/\"],\"description\":\"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.\",\"email\":\"info@mygreatlearning.com\",\"legalName\":\"Great Learning Education Services Pvt. Ltd\",\"foundingDate\":\"2013-11-29\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1001\",\"maxValue\":\"5000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\",\"name\":\"Great Learning Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"caption\":\"Great Learning Editorial Team\"},\"description\":\"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.\",\"sameAs\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/\",\"https:\\\/\\\/in.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/Great_Learning\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCObs0kLIrDjX2LLSybqNaEA\"],\"award\":[\"Best EdTech Company of the Year 2024\",\"Education Economictimes Outstanding Education\\\/Edtech Solution Provider of the Year 2024\",\"Leading E-learning Platform 2024\"],\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/author\\\/greatlearning\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introduction to CSS | CSS Tutorial for Beginners","description":"CSS Tutorial: CSS stands for Cascading Style Sheets. In this CSS tutorial, you are going to through various basic topics that can help you to get started.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to CSS | CSS Tutorial for Beginners","og_description":"CSS Tutorial: CSS stands for Cascading Style Sheets. In this CSS tutorial, you are going to through various basic topics that can help you to get started.","og_url":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/","og_site_name":"Great Learning Blog: Free Resources what Matters to shape your Career!","article_publisher":"https:\/\/www.facebook.com\/GreatLearningOfficial\/","article_published_time":"2021-08-01T07:19:00+00:00","article_modified_time":"2024-09-03T05:54:31+00:00","og_image":[{"width":1000,"height":700,"url":"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg","type":"image\/jpeg"}],"author":"Great Learning Editorial Team","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/Great_Learning","twitter_site":"@Great_Learning","twitter_misc":{"Written by":"Great Learning Editorial Team","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/"},"author":{"name":"Great Learning Editorial Team","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad"},"headline":"Introduction to CSS | CSS Tutorial for Beginners","datePublished":"2021-08-01T07:19:00+00:00","dateModified":"2024-09-03T05:54:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/"},"wordCount":2014,"commentCount":0,"publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg","articleSection":["IT\/Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/","url":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/","name":"Introduction to CSS | CSS Tutorial for Beginners","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg","datePublished":"2021-08-01T07:19:00+00:00","dateModified":"2024-09-03T05:54:31+00:00","description":"CSS Tutorial: CSS stands for Cascading Style Sheets. In this CSS tutorial, you are going to through various basic topics that can help you to get started.","breadcrumb":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/#primaryimage","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg","width":1000,"height":700,"caption":"CSS_GL"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mygreatlearning.com\/blog\/"},{"@type":"ListItem","position":2,"name":"IT\/Software Development","item":"https:\/\/www.mygreatlearning.com\/blog\/software\/"},{"@type":"ListItem","position":3,"name":"Introduction to CSS | CSS Tutorial for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/www.mygreatlearning.com\/blog\/#website","url":"https:\/\/www.mygreatlearning.com\/blog\/","name":"Great Learning Blog","description":"Learn, Upskill &amp; Career Development Guide and Resources","publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"alternateName":"Great Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mygreatlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization","name":"Great Learning","url":"https:\/\/www.mygreatlearning.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","width":900,"height":900,"caption":"Great Learning"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GreatLearningOfficial\/","https:\/\/x.com\/Great_Learning","https:\/\/www.instagram.com\/greatlearningofficial\/","https:\/\/www.linkedin.com\/school\/great-learning\/","https:\/\/in.pinterest.com\/greatlearning12\/","https:\/\/www.youtube.com\/user\/beaconelearning\/"],"description":"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.","email":"info@mygreatlearning.com","legalName":"Great Learning Education Services Pvt. Ltd","foundingDate":"2013-11-29","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1001","maxValue":"5000"}},{"@type":"Person","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad","name":"Great Learning Editorial Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","caption":"Great Learning Editorial Team"},"description":"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.","sameAs":["https:\/\/www.mygreatlearning.com\/","https:\/\/in.linkedin.com\/school\/great-learning\/","https:\/\/x.com\/https:\/\/twitter.com\/Great_Learning","https:\/\/www.youtube.com\/channel\/UCObs0kLIrDjX2LLSybqNaEA"],"award":["Best EdTech Company of the Year 2024","Education Economictimes Outstanding Education\/Edtech Solution Provider of the Year 2024","Leading E-learning Platform 2024"],"url":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg",1000,700,false],"thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02-150x150.jpg",150,150,true],"medium":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02-300x210.jpg",300,210,true],"medium_large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02-768x538.jpg",768,538,true],"large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg",1000,700,false],"1536x1536":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg",1000,700,false],"2048x2048":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg",1000,700,false],"web-stories-poster-portrait":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg",640,448,false],"web-stories-publisher-logo":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg",96,67,false],"web-stories-thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/Blog-Info-graphics-1000X700-02.jpg",150,105,false]},"uagb_author_info":{"display_name":"Great Learning Editorial Team","author_link":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"},"uagb_comment_info":1,"uagb_excerpt":"What is CSS? CSS stands for Cascading Style Sheets. It&nbsp;is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users. CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based&hellip;","_links":{"self":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/16778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=16778"}],"version-history":[{"count":27,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/16778\/revisions"}],"predecessor-version":[{"id":90198,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/16778\/revisions\/90198"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media\/16780"}],"wp:attachment":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=16778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=16778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=16778"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/content_type?post=16778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}