{"id":58175,"date":"2019-01-03T04:19:21","date_gmt":"2019-01-03T11:19:21","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/"},"modified":"2019-01-03T04:19:21","modified_gmt":"2019-01-03T11:19:21","slug":"how-to-learn-css","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/","title":{"rendered":"How To Learn CSS"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/01\/how-to-learn-css\/\"><title>How To Learn CSS<\/title><\/p>\n<article>\n<header>\n<h1>How To Learn CSS<\/h1>\n<address>Rachel Andrew<\/address>\n<p>                  <time datetime=\"2019-01-02T14:00:30+02:00\">2019-01-02T14:00:30+02:00<\/time><time datetime=\"2019-01-03T10:13:43+00:00\">2019-01-03T10:13:43+00:00<\/time><\/header>\n<p>I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas about the language. Given that CSS has changed quite substantially in the last few years, this is a really good time to refresh your knowledge. Even if CSS is a small part of what you do (because you work elsewhere in the stack), CSS is how things end up looking as you want them on screen, so it is worth being reasonably up to date.<\/p>\n<p>Therefore, this article aims to outline the key fundamentals of CSS and resources for further reading on key areas of modern CSS development. Many of those are things right here on Smashing Magazine, but I\u2019ve also selected some other resources and also people to follow in key areas of CSS. It\u2019s not a complete beginner guide or intended to cover absolutely everything. My aim is to cover the breadth of modern CSS with a focus on a few key areas, that will help to unlock the rest of the language for you.<\/p>\n<h3>Language Fundamentals<\/h3>\n<p>For much of CSS, you don\u2019t need to worry about learning properties and values by heart. You can look them up when you need them. However, there are some key underpinnings of the language, without which you will struggle to make sense of it. It really is worth dedicating some time to making sure you understand these things, as it will save you a lot of time and frustration in the long run.<\/p>\n<aside data-audience=\"non-subscriber\">\n<div>\n<div>\n<p>Front-end is messy and complicated these days. That&#8217;s why we publish <a href=\"https:\/\/smashed.by\/perfpanelarticles\">articles<\/a>, <a href=\"https:\/\/smashed.by\/perfpanelbooks\">printed books<\/a> and <a href=\"https:\/\/smashed.by\/perfpaneltv\">webinars<\/a> with useful techniques to improve your work. Even better: <a href=\"https:\/\/smashed.by\/perfpanelmembership\">Smashing Membership<\/a> with a growing selection of <strong>front-end\u00a0&#038;\u00a0UX goodies<\/strong>. So you get your work done, better and faster.<\/p>\n<p>      <a href=\"https:\/\/smashed.by\/perfpanelmembership\"><br \/>\n        Explore Smashing Membership\u00a0?<br \/>\n      <\/a>\n      <\/div>\n<div>\n        <a href=\"https:\/\/smashed.by\/perfpanelmembership\"><\/p>\n<div>\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.smashingmagazine.com\/images\/smashing-cat\/cat-rollerderby.svg\" alt=\"Smashing Cat, just preparing to do some magic stuff.\" width=\"310\" height=\"400\"><\/div>\n<p>      <\/a>\n      <\/div>\n<\/p><\/div>\n<\/aside>\n<h4>Selectors, More Than Just Class<\/h4>\n<p>A selector does what it says on the tin, it <em>selects<\/em> some part of your document in order that you can apply CSS rules to it. While most people are familiar with using a class, or styling an HTML element such as <code>body<\/code> directly, there are a large number of more advanced selectors which can select elements based on their location in the document, perhaps because they come directly after an element, or are the odd rows in a table.<\/p>\n<p>The selectors that are part of the Level 3 specification (you may have heard them referred to as Level 3 selectors) have <a href=\"https:\/\/caniuse.com\/#feat=css-sel3\">excellent browser support<\/a>. For a detailed look at the various selectors you can use, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Selectors\">see the MDN Reference<\/a>.<\/p>\n<p>Some selectors act as if you had applied a class to something in the document. For example <code>p:first-child<\/code> behaves as if you added a class to the first <code>p<\/code> element, these are known as <em>pseudo-class<\/em> selectors. The <em>pseudo-element<\/em> selectors act as if an element was dynamically inserted, for example <code>::first-line<\/code> acts in a similar way to you wrapping a <code>span<\/code> around the first line of text. However it will reapply if the length of that line changes, which wouldn\u2019t be the case if you inserted the element. You can get fairly complex with these selectors. In the below CodePen is an example of a pseudo-element chained with a pseudo-class. We target the first <code>p<\/code> element with a <code>:first-child<\/code> psuedo-class, then the <code>::first-line<\/code> selector selects the first line of that element, acting as if a span was added around that first line in order to make it bold and change the color.<\/p>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"wRdJdQ\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/wRdJdQ\">first-line<\/a> by Rachel Andrew (<a href=\"https:\/\/codepen.io\/rachelandrew\">@rachelandrew<\/a>) on <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/p>\n<h4>Inheritance And The Cascade<\/h4>\n<p>The cascade defines which rule wins when a number of rules could apply to one element. If you have ever been in a situation where you can\u2019t understand why some CSS doesn\u2019t seem to be applying, it\u2019s likely the cascade is tripping you up. The cascade is closely linked to inheritance, which defines which properties are inherited by the child elements of the element they are applied to. It is also linked to specificity, different selectors have different specificity which controls which wins when there are several selectors which could apply to one element.<\/p>\n<p><strong>Note<\/strong>: <em>To get an understanding of all of these things, I would suggest reading <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Introduction_to_CSS\/Cascade_and_inheritance\">The Cascade and Inheritance<\/a>, in the MDN Introduction to CSS.<\/em><\/p>\n<div><\/div>\n<p>If you are struggling with getting some CSS to apply to an element then your browser DevTools are the best place to start, take a look at the example below in which I have an <code>h1<\/code> element targeted by the element selector <code>h1<\/code> and making the heading orange. I am also using a class, which sets the <code>h1<\/code> to rebeccapurple. The class is more specific and so the <code>h1<\/code> is purple. In DevTools, you can see that the element selector is crossed out as it does not apply. Once you can see that the browser is getting your CSS (but something else has overruled it), then you can start to work out why.<\/p>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"yGbMoL\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/yGbMoL\">specificity<\/a> by Rachel Andrew (<a href=\"https:\/\/codepen.io\/rachelandrew\">@rachelandrew<\/a>) on <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2720c905-e734-4d57-9ae8-fb4bab1de633\/smashing-css-specificity.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/smashing-css-specificity.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2720c905-e734-4d57-9ae8-fb4bab1de633\/smashing-css-specificity.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2720c905-e734-4d57-9ae8-fb4bab1de633\/smashing-css-specificity.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2720c905-e734-4d57-9ae8-fb4bab1de633\/smashing-css-specificity.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2720c905-e734-4d57-9ae8-fb4bab1de633\/smashing-css-specificity.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/smashing-css-specificity.png?w=900\" sizes=\"100vw\" alt=\"The DevTools in Firefox showing rules for the h1 selector crossed out\"><\/a><figcaption>\n\t\t\tDevTools can help you see why some CSS is not applying to an element (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2720c905-e734-4d57-9ae8-fb4bab1de633\/smashing-css-specificity.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<h4>The Box Model<\/h4>\n<p>CSS is all about boxes. Everything that is displayed on the screen has a box, and the Box Model describes how the size of that box is worked out \u2014 taking into account margins, padding, and borders. The standard CSS Box Model takes the width that you have given an element, then adds onto that width the padding and border \u2014 meaning that the space taken up by the element is larger than the width you gave it.<\/p>\n<p>More recently, we have been able to choose to use an alternate box model which uses the given width on the element as the width of the visible element on screen. Any padding or border will inset the content of the box from the edges. This makes a lot more sense for many layouts.<\/p>\n<p>In the demo below, I have two boxes. Both have a width of 200 pixels, with a border of 5 pixels and padding of 20 pixels. The first box uses the standard box model and so takes up a total width of 250 pixels, the second the alternate Box Model and so is actually 200 pixels wide.<\/p>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"xmdqjd\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/xmdqjd\">box models<\/a> by Rachel Andrew (<a href=\"https:\/\/codepen.io\/rachelandrew\">@rachelandrew<\/a>) on <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/p>\n<p>Browser DevTools can once again help you with understanding the box model in use. In the below image, I use Firefox DevTools to inspect a box using the default <code>content-box<\/code> box model. The tools tell me this is the Box Model in use, and I can see the sizing and how the border and padding is added to the width I assigned.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52f5291d-fb2e-4418-99a7-002f898053aa\/smashing-css-box-model.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/smashing-css-box-model.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52f5291d-fb2e-4418-99a7-002f898053aa\/smashing-css-box-model.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52f5291d-fb2e-4418-99a7-002f898053aa\/smashing-css-box-model.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52f5291d-fb2e-4418-99a7-002f898053aa\/smashing-css-box-model.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52f5291d-fb2e-4418-99a7-002f898053aa\/smashing-css-box-model.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/smashing-css-box-model.png?w=900\" sizes=\"100vw\" alt=\"The Box Model Panel in Firefox DevTools\"><\/a><figcaption>\n\t\t\tDevTools help you see why a box is a certain size, and the box model in use (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52f5291d-fb2e-4418-99a7-002f898053aa\/smashing-css-box-model.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p><strong>Note<\/strong>: <em>Prior to IE6, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Internet_Explorer_box_model_bug\">Internet Explorer used the alternate Box Model<\/a>, with padding and borders insetting content away from the given width. So for a while browsers used different Box Models! When frustrated by interoperability issues today, be glad that things have improved so we aren\u2019t dealing with browsers calculating the width of things differently.<\/em><\/p>\n<p>There is a good explanation of the <a href=\"https:\/\/css-tricks.com\/box-sizing\/\">Box Model and Box Sizing<\/a> on CSS Tricks, plus an explanation of the best way to <a href=\"https:\/\/css-tricks.com\/inheriting-box-sizing-probably-slightly-better-best-practice\/\">globally use the alternate box model<\/a> in your site.<\/p>\n<div><\/div>\n<h4>Normal Flow<\/h4>\n<p>If you have a document with some HTML marking up the content and view it in a browser, it will hopefully be readable. Headings and paragraphs will start on a new line, words display as a sentence with a single white space between them. Links for formatting such as em does not break up the sentence flow. This content is being displayed in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flow_Layout\">Normal Flow<\/a>, or Block Flow Layout. Each part of the content is described as \u201cin flow\u201d; it knows about the rest of the content and so doesn\u2019t overlap.<\/p>\n<p>If you work with rather than against this behavior, your life is made much easier. It is one of the reasons why <a href=\"https:\/\/www.brucelawson.co.uk\/2018\/the-practical-value-of-semantic-html\/\">starting with a correctly marked up HTML document<\/a> makes a lot of sense, as due to normal flow and the inbuilt stylesheets that browsers have which respect it, your content starts from a readable place.<\/p>\n<h4>Formatting Contexts<\/h4>\n<p>Once you have a document with content in normal flow, you may want to change how some of that content looks. You do this by changing the formatting context of the element. As a very simple example, if you wanted all of your paragraphs to run together and not start on a new line, you could change the <code>p<\/code> element to <code>display: inline<\/code> changing in from a block to an inline formatting context.<\/p>\n<p>Formatting contexts essentially define an outer and an inner type. The outer controls how the element behaves alongside other elements on the page, the inner controls how the children should look. So, for example, when you say <code>display: flex<\/code> you are setting the outer to be a block formatting context, and the children to have a flex formatting context.<\/p>\n<p><strong>Note<\/strong> : <em>The latest version of the Display Specification changes the values of <code>display<\/code> to explicitly declare the inner and outer value. Therefore, in the future you might say <code>display: block flex;<\/code> (<code>block<\/code> being the outer and <code>flex<\/code> being the inner).<\/em><\/p>\n<p>Read more about <code>display<\/code> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/display\">over at MDN<\/a>.<\/p>\n<h4>Being In Or Out Of Flow<\/h4>\n<p>Elements in CSS are described as being \u2018in flow\u2019 or \u2018out of flow.\u2019 Elements in flow are given space and that space is respected by the other elements in flow. If you take an element out of flow, by floating or positioning it, then the space for that element will no longer be respected by other in flow items.<\/p>\n<p>This is most noticeable with absolutely positioned items. If you give an item <code>position: absolute<\/code> it is removed from flow, then you will need to ensure that you do not have a situation in which the out of flow element overlaps and makes unreadable some other part of your layout.<\/p>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"Ormgzj\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/Ormgzj\">Out of Flow: absolute positioning<\/a> by Rachel Andrew (<a href=\"https:\/\/codepen.io\/rachelandrew\">@rachelandrew<\/a>) on <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/p>\n<p>However, floated items also are removed from flow, and while following content will wrap around the shortened line boxes of a floated element, you can see by placing a background color on the box of the following elements that they have risen up and are ignoring the space used by the floated item.<\/p>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"BvRZYw\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/BvRZYw\">Out of flow: float<\/a> by Rachel Andrew (<a href=\"https:\/\/codepen.io\/rachelandrew\">@rachelandrew<\/a>) on <a href=\"https:\/\/codepen.io\/\">CodePen<\/a>.<\/p>\n<p>You can read more about <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flow_Layout\/In_Flow_and_Out_of_Flow\">in flow and out of flow elements on MDN<\/a>. The important thing to remember is that if you take an element out of flow, you need to manage overlap yourself as the regular rules of block flow layout no longer apply.<\/p>\n<h3>Layout<\/h3>\n<p>For over fifteen years we have been doing layout in CSS without a designed for the job layout system. This has changed. We now have a perfectly capable layout system which includes Grid and Flexbox, but also Multiple-column Layout and the older layout methods used for their real purpose. If CSS Layout is a mystery to you, head on over to the MDN <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/CSS_layout\">Learn Layout<\/a> tutorial, or read my article <a href=\"https:\/\/www.smashingmagazine.com\/2018\/05\/guide-css-layout\/\">Getting Started With CSS Layout<\/a> here on Smashing Magazine.<\/p>\n<p><strong>Do not imagine that methods such as grid and flexbox are somehow competing<\/strong>. In order to use Layout well, you will sometimes find a component is best as a flex component and sometimes as Grid. On occasion, you will want the column flowing behavior of multicol. All of these are valid choices. If you feel you are fighting against the way something behaves, that is, in general, a very good sign that it might be worth taking a step back and trying a different approach. We are so used to hacking at CSS to make it do what we want, and so we are likely to forget that we have a number of other options to try.<\/p>\n<p>Layout is my main area of expertise and I\u2019ve written a number of articles here on Smashing Magazine and elsewhere to try and help tame the new Layout landscape. In addition to the Layout article mentioned above, I have a whole series on Flexbox \u2014 start with <a href=\"https:\/\/www.smashingmagazine.com\/2018\/08\/flexbox-display-flex-container\/\">What Happens When You Create a Flexbox Flex Container<\/a>. On <a href=\"https:\/\/gridbyexample.com\/\">Grid By Example<\/a>, I have a whole bunch of small examples of CSS Grid \u2014 plus a video screencast tutorial.<\/p>\n<p>In addition \u2014 and especially for designers \u2014 check out <a href=\"https:\/\/twitter.com\/jensimmons\">Jen Simmons<\/a> and her <a href=\"https:\/\/www.youtube.com\/channel\/UC7TizprGknbDalbHplROtag\">Layout Land video series<\/a>.<\/p>\n<h4>Alignment<\/h4>\n<p>I\u2019ve separated Alignment out from Layout in general because while most of us were introduced to Alignment as part of Flexbox, these properties apply to all layout methods, and it is worth understanding them in that context rather than thinking about \u201cFlexbox Alignment\u201d or \u201cCSS Grid alignment.\u201d We have a set of Alignment properties which work in a common way where possible; they then have some differences due to the way different layout methods behave.<\/p>\n<p>On MDN, you can dig into <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Box_Alignment\">Box Alignment<\/a> and how it is implemented for Grid, Flexbox, Multicol, and Block Layout. Here on Smashing Magazine, I have an article specifically covering alignment in Flexbox: <a href=\"https:\/\/www.smashingmagazine.com\/2018\/08\/flexbox-alignment\/\">Everything You Need To Know About Alignment In Flexbox<\/a>.<\/p>\n<h4>Sizing<\/h4>\n<p>I spent much of 2018 speaking about the Intrinsic and Extrinsic Sizing specification, and how it relates to Grid and Flexbox in particular. On the web, we are used to setting sizing in lengths or percentages, as this is how we have been able to make Grid-type layouts using floats. However, modern layout methods can do a lot of the space distribution for us \u2014 if we let them. Understanding how Flexbox assigns space (or the Grid <code>fr<\/code> unit works), is worth your time.<\/p>\n<p>Here on Smashing Magazine, I\u2019ve written about <a href=\"https:\/\/www.smashingmagazine.com\/2018\/01\/understanding-sizing-css-layout\/\">Sizing in Layout<\/a> in general and also for Flexbox in <a href=\"https:\/\/www.smashingmagazine.com\/2018\/09\/flexbox-sizing-flexible-box\/\">How Big Is That Flexible Box?<\/a>.<\/p>\n<h3>Responsive Design<\/h3>\n<p>Our new layout methods of Grid and Flexbox often mean that we can get away with fewer media queries than we needed with our older methods, due to the fact that they are flexible and respond to changes in viewport or component size without us needing to change the widths of elements. However, there will be places where you will want to add in some breakpoints to further enhance your designs.<\/p>\n<p>Here are some simple guides to <a href=\"https:\/\/responsivedesign.is\/\">Responsive Design<\/a>, and for media queries, in general, check out my article <a href=\"https:\/\/www.smashingmagazine.com\/2018\/02\/media-queries-responsive-design-2018\/\">Using Media Queries for Responsive Design in 2018<\/a>. I take a look at what Media Queries are useful for, and also show the new features coming to Media Queries in Level 4 of the spec.<\/p>\n<h3>Fonts And Typography<\/h3>\n<p>Along with Layout, the use of fonts on the web has undergone huge change in the last year. Variable Fonts, enabling a single font file to have unlimited variations, are here. To get an overview of what they are and how they work, watch this excellent short talk from <a href=\"https:\/\/twitter.com\/mandy_kerr\">Mandy Michael<\/a>: <a href=\"https:\/\/www.youtube.com\/watch?v=luAqYCd_TC8\">Variable Fonts and the Future of Web Design<\/a>. Also, I would recommend <a href=\"https:\/\/noti.st\/jpamental\/WNNxqQ\/dynamic-typography-with-modern-css-variable-fonts\">Dynamic Typography With Modern CSS and Variable Fonts<\/a> by <a href=\"https:\/\/twitter.com\/jpamental\">Jason Pamental<\/a>.<\/p>\n<p>To explore Variable Fonts and their capabilities, there is <a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-edge\/testdrive\/demos\/variable-fonts\/\">a fun demo from Microsoft<\/a> plus a number of playgrounds to try out Variable Fonts \u2014 <a href=\"https:\/\/www.axis-praxis.org\/\">Axis Praxis<\/a> being the most well known (I also like the <a href=\"https:\/\/play.typedetail.com\/\">Font Playground<\/a>).<\/p>\n<p>Once you start working with Variable Fonts, then <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Fonts\/Variable_Fonts_Guide\">this guide on MDN<\/a> will prove incredibly useful. To learn how to implement a fallback solution for browsers which does not support Variable Fonts read <a href=\"https:\/\/www.zeichenschatz.net\/typografie\/implementing-a-variable-font-with-fallback-web-fonts.html\">Implementing a Variable Font With Fallback Web Fonts<\/a> by Oliver Sch\u00f6ndorfer. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Page_Inspector\/How_to\/Edit_fonts\">Firefox DevTools Font Editor<\/a> also has support for working with Variable Fonts.<\/p>\n<h3>Transforms And Animation<\/h3>\n<p>CSS Transforms and Animation are definitely something I look upon a need-to-know basis. I don\u2019t often need to use them, and the syntax seems to hop right out of my head between uses. Thankfully, the reference on MDN helps me out and I would suggest starting with the guides on <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Transforms\/Using_CSS_transforms\">Using CSS Transforms<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Animations\/Using_CSS_animations\">Using CSS Animations<\/a>. <a href=\"https:\/\/twitter.com\/zellwk\">Zell Liew<\/a> also has a nice article that provides a great <a href=\"https:\/\/zellwk.com\/blog\/css-transitions\/\">explanation to CSS transitions<\/a>.<\/p>\n<p>To discover some of the things that are possible, take a look at the <a href=\"http:\/\/animista.net\/\">Animista<\/a> site.<\/p>\n<p>One of the things that can be confusing about animations, is which approach to take. In addition to what is supported in CSS, you might need to involve JavaScript, SVG, or the Web Animation API, and these things all tend to get lumped together. In her talk, <a href=\"https:\/\/aneventapart.com\/news\/post\/choose-your-animation-adventure-by-val-head-aea-video\">Choose Your Animation Adventure<\/a> recorded at An Event Apart, <a href=\"https:\/\/twitter.com\/vlh\">Val Head<\/a> explains the options.<\/p>\n<h3>Use Cheatsheets As A Reminder, Not A Learning Tool<\/h3>\n<p>When I mention Grid or Flexbox resources, I often see replies saying that they <em>can\u2019t<\/em> do Flexbox without a certain cheatsheet. I have no problem with cheatsheets as a memory helper to look up syntax, and I\u2019ve published some of my own. The problem with entirely relying on those is that you can miss why things work as you copy syntax. Then, when you hit a case where that property seems to behave differently, that apparent inconsistency seems baffling, or a fault of the language.<\/p>\n<p>If you find yourself in a situation where CSS seems to be doing something very strange, ask <em>why<\/em>. Create a reduced test case that highlights the issue, ask someone who is more familiar with the spec. Many of the CSS problems I am asked about are because that person believes a property works in a different way to the way it works in reality. It\u2019s why I talk a lot about things like alignment and sizing, as these are places where this confusion often lives.<\/p>\n<p>Yes, there are strange things in CSS. It is a language that has evolved over the years, and there are things about it that we can\u2019t change \u2014 <a href=\"https:\/\/wiki.csswg.org\/ideas\/mistakes\">until we invent a timemachine<\/a>. However, once you have some basics down, and understand why things behave as they do, you will have a much easier time with the trickier places.<\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/logo-red-2.png?w=900\" alt=\"Smashing Editorial\"><span>(il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How To Learn CSS How To Learn CSS Rachel Andrew 2019-01-02T14:00:30+02:002019-01-03T10:13:43+00:00 I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":58176,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-58175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"How To Learn CSSHow To Learn CSS Rachel Andrew 2019-01-02T14:00:30+02:002019-01-03T10:13:43+00:00I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas about the\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How To Learn CSS | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"How To Learn CSSHow To Learn CSS Rachel Andrew 2019-01-02T14:00:30+02:002019-01-03T10:13:43+00:00I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas about the\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-01-03T11:19:21+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-01-03T11:19:21+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How To Learn CSS | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"How To Learn CSSHow To Learn CSS Rachel Andrew 2019-01-02T14:00:30+02:002019-01-03T10:13:43+00:00I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas about the\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#article\",\"name\":\"How To Learn CSS | Design for Immersive Technologies\",\"headline\":\"How To Learn CSS\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/smashing-css-specificity.png?fit=400%2C207&ssl=1\",\"width\":400,\"height\":207},\"datePublished\":\"2019-01-03T04:19:21-07:00\",\"dateModified\":\"2019-01-03T04:19:21-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#listItem\",\"name\":\"How To Learn CSS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#listItem\",\"position\":3,\"name\":\"How To Learn CSS\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/\",\"name\":\"How To Learn CSS | Design for Immersive Technologies\",\"description\":\"How To Learn CSSHow To Learn CSS Rachel Andrew 2019-01-02T14:00:30+02:002019-01-03T10:13:43+00:00I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas about the\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/smashing-css-specificity.png?fit=400%2C207&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#mainImage\",\"width\":400,\"height\":207},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/01\\\/how-to-learn-css\\\/#mainImage\"},\"datePublished\":\"2019-01-03T04:19:21-07:00\",\"dateModified\":\"2019-01-03T04:19:21-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How To Learn CSS | Design for Immersive Technologies","description":"How To Learn CSSHow To Learn CSS Rachel Andrew 2019-01-02T14:00:30+02:002019-01-03T10:13:43+00:00I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas about the","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#article","name":"How To Learn CSS | Design for Immersive Technologies","headline":"How To Learn CSS","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/smashing-css-specificity.png?fit=400%2C207&ssl=1","width":400,"height":207},"datePublished":"2019-01-03T04:19:21-07:00","dateModified":"2019-01-03T04:19:21-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#listItem","name":"How To Learn CSS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#listItem","position":3,"name":"How To Learn CSS","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/","name":"How To Learn CSS | Design for Immersive Technologies","description":"How To Learn CSSHow To Learn CSS Rachel Andrew 2019-01-02T14:00:30+02:002019-01-03T10:13:43+00:00I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas about the","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/smashing-css-specificity.png?fit=400%2C207&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#mainImage","width":400,"height":207},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/#mainImage"},"datePublished":"2019-01-03T04:19:21-07:00","dateModified":"2019-01-03T04:19:21-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"How To Learn CSS | Design for Immersive Technologies","og:description":"How To Learn CSSHow To Learn CSS Rachel Andrew 2019-01-02T14:00:30+02:002019-01-03T10:13:43+00:00I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas about the","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/","article:published_time":"2019-01-03T11:19:21+00:00","article:modified_time":"2019-01-03T11:19:21+00:00","twitter:card":"summary","twitter:title":"How To Learn CSS | Design for Immersive Technologies","twitter:description":"How To Learn CSSHow To Learn CSS Rachel Andrew 2019-01-02T14:00:30+02:002019-01-03T10:13:43+00:00I get a lot of people asking me to recommend to them tutorials on various parts of CSS, or asking how to learn CSS. I also see a lot of people who are confused about bits of CSS, in part because of outdated ideas about the"},"aioseo_meta_data":{"post_id":"58175","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 23:25:29","updated":"2026-09-01 01:33:58","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow To Learn CSS\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"How To Learn CSS","link":"https:\/\/www.taterboy.com\/blog\/2019\/01\/how-to-learn-css\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-f8j","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/01\/smashing-css-specificity.png?fit=400%2C207&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/58175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=58175"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/58175\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/58176"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=58175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=58175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=58175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}