{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/css/contents","result":{"data":{"mdx":{"id":"9c583496-02ad-5f69-b96c-6aa926a2aeef","excerpt":"01. Introduction to CSS Basic CSS styling This is how CSS looks like: Let's read it: First, we have two selectors ( h1  and  p ). Each one will affect all  h…","fields":{"slug":"/css/contents/"},"frontmatter":{"title":"Contents","description":"Contents | CSS | RefugeesCode","image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"Contents\",\n \"description\": \"Contents | CSS | RefugeesCode\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", {\n \"id\": \"01-introduction-to-css\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#01-introduction-to-css\",\n \"aria-label\": \"01 introduction to css permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"01. Introduction to CSS\"), mdx(\"h3\", {\n \"id\": \"basic-css-styling\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#basic-css-styling\",\n \"aria-label\": \"basic css styling permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Basic CSS styling\"), mdx(\"p\", null, \"This is how CSS looks like:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"h1 {\\n color: blue;\\n background-color: yellow;\\n border: 1px solid black;\\n}\\n\\np {\\n color: red;\\n}\\n\")), mdx(\"p\", null, \"Let's read it:\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"First, we have two selectors (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"h1\"), \"\\xA0and\\xA0\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"p\"), \"). Each one will affect all\\xA0\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"h1\"), \"\\xA0and\\xA0\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"p\"), \"\\xA0tags in our page.\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"The first one will look for all\\xA0\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"h1\"), \"\\xA0tags and will apply the properties between the brackets to those tags.\", mdx(\"ol\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"The first one sets the text color to blue.\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"The second sets the background color to yellow.\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"The third one puts a border around the header that is 1 pixel wide, solid (not dotted, or dashed, etc.), and colored black. \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"Important notice:\"), \" in this example and over the course we will use \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"shorthands\"), \", which is shorten code to specify all the individual properties in one property. The \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border\"), \" property is a shorthand property for the following individual border properties:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border-width\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border-style\"), \" (required)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border-color\")))))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"The second selector (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"p\"), \") will change the text to red.\")), mdx(\"p\", null, \"Read this article to learn how CSS syntax works and see examples.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS\"\n }, \"What is CSS?\")), mdx(\"h3\", {\n \"id\": \"css-selector\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#css-selector\",\n \"aria-label\": \"css selector permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"strong\", {\n parentName: \"h3\"\n }, \"CSS Selector\")), mdx(\"p\", null, \"One of the core things about CSS is to address the element that you want to style. If you fail to do so, you could be altering many other elements that you didn't want to style that way or not style anything at all due to lack of selector accuracy.\"), mdx(\"p\", null, \"Every selector of CSS is composed of a selector and its attributes. There are multiple selector types and hundreds of attributes, but most of the time it will follow the same structure.\"), mdx(\"p\", null, \"This is how a CSS selector looks like:\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"434px\"\n }\n }, \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"43.75%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABYklEQVQoz42QXVOCQBiF+f+/o5uuaGpsdArNgJCERT4SEgQMMGBBVLTCYGkjM6duemZ25szunj1nX8JxbBGA4VCQJMDz9yzLDrhBFEV1XVdlWe0pEV4VwhsI1QeIl+0WxhAmSRTHaZYlabLIst1uV/8D4qCq4s0VhZmq2gA8qcpEEKYSsEeSCcQpP9g4o5Gc0Vw4Dyt8+SufaEqVWL+u1/JliyFJliRV6lpsd7QupVKU0qXk1vns7uKmD09OJ6b9jm1Nf7RPRs1TeZ5DGP+tl6SLbJVjsdnkWbb4qe267sQ0LcuyHdf3A3Q8kIbVepVAeAhYLpdB4Bu67vk+4Xkex3E8z8uKUuL+CNmOY1rT8Jvxw9h1HZyhG0bcvBKGzyzLqJpG/MrB/jiGum5IkqRpqmE8sgx9RpI0zYgiwObjagT+eLnnc4xFUcwxQdDrdXsNDE23O1f9WzpNF/gEzxc1Fiw+APci7V2XrYInAAAAAElFTkSuQmCC')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"picture\", {\n parentName: \"span\"\n }, \"\\n \", mdx(\"source\", {\n parentName: \"picture\",\n \"srcSet\": [\"/static/73200e023bc224d4031668e868e245d7/8ac56/css-syntax.webp 240w\", \"/static/73200e023bc224d4031668e868e245d7/e6590/css-syntax.webp 434w\"],\n \"sizes\": \"(max-width: 434px) 100vw, 434px\",\n \"type\": \"image/webp\"\n }), \"\\n \", mdx(\"source\", {\n parentName: \"picture\",\n \"srcSet\": [\"/static/73200e023bc224d4031668e868e245d7/8ff5a/css-syntax.png 240w\", \"/static/73200e023bc224d4031668e868e245d7/ade6e/css-syntax.png 434w\"],\n \"sizes\": \"(max-width: 434px) 100vw, 434px\",\n \"type\": \"image/png\"\n }), \"\\n \", mdx(\"img\", {\n parentName: \"picture\",\n \"className\": \"gatsby-resp-image-image\",\n \"src\": \"/static/73200e023bc224d4031668e868e245d7/ade6e/css-syntax.png\",\n \"alt\": \".CSS syntax explanation\",\n \"title\": \".CSS syntax explanation\",\n \"loading\": \"lazy\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n }\n }), \"\\n \"), \"\\n \"), \"\\n\", mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"960px\"\n }\n }, \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"40.416666666666664%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB2klEQVQoz2NwO1DAAMIrRGQZ/v//D8Zr6msMlk/oMc1kYODqtDESbDXWEOgwUOdvtNcWqkj0Fy3X9xKoiXYUn6OjzrtQRYVhmrEO2AwwkPXXY3A/XMQQuDadoTbKluE/UKxqcrKQT42HrVukoY97krmrR5KZm1eiuaN/kZWvw8KyFPOe3njXDbn2jxkYWEHqG6LsGWAOY2BgZGDglOBjTPi/mEHw/3kG9xWxIuWLy7Rjl5arKyYYyBpXucnoFTrIGlW5ylj1+QuZ9IfqOO8p9IzsCGZPrfWXmrQml0FPXpSRkZmREWIaEHBK8TMk/5/D6XWiXEprpSfPivYm7fVTJ2tMUWRgmxPnyTMnyol7Tqg9d3eUI29ub7jkA1V5tv+65mzts5MFcv+/YWHTFGdABtIsPOxysoH62tJ+OuyyPY4ML6BhOVXHhGUXnwTTCnV1ZpDXIuYn8DfsKGaXY2Dh5+dgUwQKifNrSyoxsTJLA9nyQCwHciQHkAHCLCDTff9vZtgHNXCCuTlIBuwNzZkR7MZL4nlW/1/CwMDDAlILMkQGFA1ArATEKkAsAPM1HIC4wQpSYLYAKyuIkgRiKVY+DgVGJkaQhBQo2BkoACAXGACxMRBbQNkcuBQDABR9gF7hh7qTAAAAAElFTkSuQmCC')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"picture\", {\n parentName: \"span\"\n }, \"\\n \", mdx(\"source\", {\n parentName: \"picture\",\n \"srcSet\": [\"/static/7b41d8213d1f91300b0dfa2146fb4d4c/8ac56/css-declaration.webp 240w\", \"/static/7b41d8213d1f91300b0dfa2146fb4d4c/d3be9/css-declaration.webp 480w\", \"/static/7b41d8213d1f91300b0dfa2146fb4d4c/e46b2/css-declaration.webp 960w\", \"/static/7b41d8213d1f91300b0dfa2146fb4d4c/26598/css-declaration.webp 1160w\"],\n \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n \"type\": \"image/webp\"\n }), \"\\n \", mdx(\"source\", {\n parentName: \"picture\",\n \"srcSet\": [\"/static/7b41d8213d1f91300b0dfa2146fb4d4c/8ff5a/css-declaration.png 240w\", \"/static/7b41d8213d1f91300b0dfa2146fb4d4c/e85cb/css-declaration.png 480w\", \"/static/7b41d8213d1f91300b0dfa2146fb4d4c/d9199/css-declaration.png 960w\", \"/static/7b41d8213d1f91300b0dfa2146fb4d4c/6be49/css-declaration.png 1160w\"],\n \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n \"type\": \"image/png\"\n }), \"\\n \", mdx(\"img\", {\n parentName: \"picture\",\n \"className\": \"gatsby-resp-image-image\",\n \"src\": \"/static/7b41d8213d1f91300b0dfa2146fb4d4c/d9199/css-declaration.png\",\n \"alt\": \".CSS declaration\",\n \"title\": \".CSS declaration\",\n \"loading\": \"lazy\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n }\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Important\"), \": If a property is unknown or if a value is not valid for a given property, the declaration is deemed invalid and is wholly ignored by the browser's CSS engine.\"), mdx(\"p\", null, \"You will read more about CSS selectors in the next section, this was just an introduction.\"), mdx(\"h3\", {\n \"id\": \"adding-a-stylesheet\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#adding-a-stylesheet\",\n \"aria-label\": \"adding a stylesheet permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"strong\", {\n parentName: \"h3\"\n }, \"Adding a stylesheet\")), mdx(\"p\", null, \"There are three different ways to apply CSS to an HTML document that you'll commonly come across, some more useful than others.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.hostinger.com/tutorials/difference-between-inline-external-and-internal-css\"\n }, \"Three Different Types of CSS Styles: The Complete Guide\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.w3schools.com/css/css_howto.asp\"\n }, \"How to add CSS\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Why would you choose one over another?\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"What do you think is the cleanest way?\")), mdx(\"h3\", {\n \"id\": \"comments\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#comments\",\n \"aria-label\": \"comments permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"strong\", {\n parentName: \"h3\"\n }, \"Comments\")), mdx(\"p\", null, \"Comments are parts of our CSS that will not affect the HTML. It is used to write messages for the programmer of the website. A comment looks like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"/* This is a CSS comment */\\n\")), mdx(\"p\", null, \"Content inside comments will not have any consequence on the styling.\"), mdx(\"h3\", {\n \"id\": \"exercises\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#exercises\",\n \"aria-label\": \"exercises permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"strong\", {\n parentName: \"h3\"\n }, \"Exercises\")), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/change-the-color-of-text\"\n }, \"Change the Color of Text\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-selectors-to-style-elements\"\n }, \"Use CSS Selectors to Style Elements\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/headline-with-the-h2-element\"\n }, \"Headline with the h2 Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element\"\n }, \"Inform with the Paragraph Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text\"\n }, \"Fill in the Blank with Placeholder Text\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/uncomment-html\"\n }, \"Uncomment HTML\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/comment-out-html\"\n }, \"Comment out HTML\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/delete-html-elements\"\n }, \"Delete HTML Elements\")))), mdx(\"h2\", {\n \"id\": \"02-css-selectors\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#02-css-selectors\",\n \"aria-label\": \"02 css selectors permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"02. CSS Selectors\"), mdx(\"p\", null, \"In CSS, selectors are used to target the \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"HTML\"), \" \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"elements\"), \" we want to style on our web pages.\"), mdx(\"p\", null, \"There is a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style.\"), mdx(\"p\", null, \"Each selector can access the HTML items by different means; by id (#) by class (.), by HTML tag (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"<>\"), \") and there are even more specific selectors which you will read about in the next section.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors\"\n }, \"CSS selectors\")), mdx(\"h3\", {\n \"id\": \"main-selectors\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#main-selectors\",\n \"aria-label\": \"main selectors permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Main Selectors\"), mdx(\"p\", null, \"Main selectors include IDs, classes, attributes or HTML tags.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.w3schools.com/css/css_selectors.asp\"\n }, \"CSS Selectors\")), mdx(\"h3\", {\n \"id\": \"other-selectors\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#other-selectors\",\n \"aria-label\": \"other selectors permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Other selectors\"), mdx(\"p\", null, \"However, there's plenty of other selectors which will help you attack the element or elements that you want to style in particular circumstances. Some of these are called pseudo-class or pseudo selectors.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.w3schools.com/cssref/css_selectors.asp\"\n }, \"CSS Selectors Reference\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://css4-selectors.com/selectors/\"\n }, \"CSS4-Selectors | All selectors from level 4 to 1\")), mdx(\"h3\", {\n \"id\": \"combining-selectors\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#combining-selectors\",\n \"aria-label\": \"combining selectors permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Combining selectors\"), mdx(\"p\", null, \"Selectors can be used individually or collectively. They can be very powerful when combined.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators\"\n }, \"Combinators\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://css-tricks.com/multiple-class-id-selectors/\"\n }, \"Multiple Class / ID and Class Selectors | CSS-Tricks\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.lifewire.com/grouping-multiple-css-selectors-3467065\"\n }, \"Speed Up by Grouping Multiple CSS Selectors\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Can you use several selectors at the same time?\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Why would you attempt to do this?\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Is there a possible way of selecting all \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"

\"), \" on a website except the last one?\")), mdx(\"h3\", {\n \"id\": \"exercises-1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#exercises-1\",\n \"aria-label\": \"exercises 1 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"strong\", {\n parentName: \"h3\"\n }, \"Exercises\")), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-css-class-to-style-an-element\"\n }, \"Use a CSS Class to Style an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/style-multiple-elements-with-a-css-class\"\n }, \"Style Multiple Elements with a CSS Class\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/change-the-font-size-of-an-element\"\n }, \"Change the Font Size of an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/set-the-font-family-of-an-element\"\n }, \"Set the Font Family of an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/import-a-google-font\"\n }, \"Import a Google Font\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/specify-how-fonts-should-degrade\"\n }, \"Specify How Fonts Should Degrade\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/size-your-images\"\n }, \"Size Your Images\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-borders-around-your-elements\"\n }, \"Add Borders Around Your Elements\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-rounded-corners-with-border-radius\"\n }, \"Add Rounded Corners with border-radius\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/make-circular-images-with-a-border-radius\"\n }, \"Make Circular Images with a border-radius\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/give-a-background-color-to-a-div-element\"\n }, \"Give a Background Color to a div Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements\"\n }, \"Use Attribute Selectors to Style Elements\")))), mdx(\"p\", null, \"Also, here is a game to help you assimilate all these concepts of selectors, multiple selectors, pseudo selectors. Have a try and let's see if you can get to the end!! \\u2B07\\uFE0F\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://flukeout.github.io/\"\n }, \"CSS Diner\")), mdx(\"h3\", {\n \"id\": \"further-reading\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#further-reading\",\n \"aria-label\": \"further reading permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Further Reading\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Extra!\")), mdx(\"p\", null, \"If you want to have a broader understanding of CSS and how it works, check this article out. However, this is not part of the mandatory materials of the course.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_works#applying_css_to_the_dom\"\n }, \"How CSS works\")), mdx(\"h2\", {\n \"id\": \"03-box-model\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#03-box-model\",\n \"aria-label\": \"03 box model permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"03. Box Model\"), mdx(\"p\", null, \"Every HTML element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. Before understanding how to create CSS layouts, you need to understand the box model.\"), mdx(\"h3\", {\n \"id\": \"css-box-model\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#css-box-model\",\n \"aria-label\": \"css box model permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CSS Box model\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"960px\"\n }\n }, \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"77.5%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACLElEQVQ4y52Ta3PSUBCG+f8OTq1Aubaj31qBApEg95sgCVOgRbRcU65F6HRKoBQrnNcNFBXKCPrhmd3kZJ+zSc6qxqLlRy+inbX9e9NO4NX0e9o8nYgbmf0tn9elLTPVMGVkUuQAtbAWUkSHXsqMnqBgQV9B3IVDdD+ZMBSMUN3ED2Zyi4fcC7J+k2fVLzY2vo0wdp9kj3KcPQ5iW4iy2SjO5K6P3aZMbC6cXH9A4zrAYl8diF2cIJo/hi/9FslLG8SqE0LFAXEF5yLSWqLkRLntw6QfAAnxS1gjIXf+DidJHm9CDhwFnDhO+WDPhGA7W8X+FE8zQbjO7chd8c+FEgk9n204jJah8VTwwnoG9ek5jOE29MEm0YIh9Bt9sA1zpA4u50a+zuNhU4d83oajaBGv+SIVSHOM4TrM0QYshJIvMYQaJKzBlXu/m9AUaVJhgwrreMlLULsl6AJL2VIo7S5UZMtO/hTONyL+QXj5JFRkVzBSN8q3UlBk++4CfV9x+ysvf4rBm4XamoXWU4KGxEuUTTSeIva5AvacebpXgs5TgCvLId/YIKx2/Mx1YaUdPXQseDhyXjiyz3HmfHMWuZeOjQ1Zae3YPJCwexNmQpmjxQWZmmsrynNihUOt41/tcNBy06h9ZFMao6kcoxhbxF2gGtDoDbrexeiNBRP6CQN6SSNh+C/6VPstocc9uVRyynI3EszyKGW+IwaETNfrubyWD1ZypZYcQ8Ey+AlGQioeDtIFxwAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"picture\", {\n parentName: \"span\"\n }, \"\\n \", mdx(\"source\", {\n parentName: \"picture\",\n \"srcSet\": [\"/static/6cd58e250ff6e391ba6420214cfe1e7c/8ac56/box-model.webp 240w\", \"/static/6cd58e250ff6e391ba6420214cfe1e7c/d3be9/box-model.webp 480w\", \"/static/6cd58e250ff6e391ba6420214cfe1e7c/e46b2/box-model.webp 960w\", \"/static/6cd58e250ff6e391ba6420214cfe1e7c/5f375/box-model.webp 1102w\"],\n \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n \"type\": \"image/webp\"\n }), \"\\n \", mdx(\"source\", {\n parentName: \"picture\",\n \"srcSet\": [\"/static/6cd58e250ff6e391ba6420214cfe1e7c/8ff5a/box-model.png 240w\", \"/static/6cd58e250ff6e391ba6420214cfe1e7c/e85cb/box-model.png 480w\", \"/static/6cd58e250ff6e391ba6420214cfe1e7c/d9199/box-model.png 960w\", \"/static/6cd58e250ff6e391ba6420214cfe1e7c/26a94/box-model.png 1102w\"],\n \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n \"type\": \"image/png\"\n }), \"\\n \", mdx(\"img\", {\n parentName: \"picture\",\n \"className\": \"gatsby-resp-image-image\",\n \"src\": \"/static/6cd58e250ff6e391ba6420214cfe1e7c/d9199/box-model.png\",\n \"alt\": \"Box model\",\n \"title\": \"Box model\",\n \"loading\": \"lazy\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n }\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"656px\"\n }\n }, \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"62.5%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAACRklEQVQoz42R60/TUBjG9wf7QT+ImmggJiSoiYkBjQaDCYjxBl8cjNHdy8Zubdd1bU8vu7DB2gEdpbRbL+s5njkufjHxzS9Pnvfkfc6bkxNBCKJwgsIQQYhmBUM4CaqVcjJB0FTlbuBvRdPhiDj0Wg5sOaiu2yV1QHWHyhVsOgiYQa1/hY1qQ9VGtzSnQNEYW2M/kjoebaRyX8nD5e9bix9WX35aX09kNzP5jWRuLUZsZguf0weYjRSJ9cu0zf4oczndP7O9yC7oHxAPnMGSpb9yzl9jLrUXZn/pEqNda0eYz8bvE7/uSexTR3u+s/+G6IwvXB+H9QbzBAVRnkufdIstJXfcLR21C4qUwdpSc9pJtaWQkpgW+ZQ77iC4msm/jbduwlxlDrppmpEBUCi6zvMyw3AcJzK1Bi/IoqjWWL7RAFiPun0UrCXJ5XjbvRjfhJGXwAGWpXmeYxgKqyA0FAVgA4Ag42uBIEmiZZnIX02RK3fhevlhMEqS+TrN8AwjFkusCNpVigNSh2YEtg7qnKw2jxW15wcQuR/x5v32eBqOAY1jHiG0bfTjtkGMzPRQj9lGwjII65y4MhLm6Z47yiPEjewihDWE3mUKK9dv3pMHWz8fs9QiVV6YQVfudGaqpfny4bN0Yq5SXKgW579F36d63hBvzmreLtCigh4VBv9iRzyNSefbVHtPNqKCRjQNUnen/3zm+KYPMZcBwsz8tP3DbXtqu3JP063RhQdNLzxzPC+YRNB/FAxDVZbLpSLPceFkcnv+G+zLl0MstCNqAAAAAElFTkSuQmCC')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"picture\", {\n parentName: \"span\"\n }, \"\\n \", mdx(\"source\", {\n parentName: \"picture\",\n \"srcSet\": [\"/static/2afd31508e8eddb6da5832f381d4426a/8ac56/spacing.webp 240w\", \"/static/2afd31508e8eddb6da5832f381d4426a/d3be9/spacing.webp 480w\", \"/static/2afd31508e8eddb6da5832f381d4426a/31099/spacing.webp 656w\"],\n \"sizes\": \"(max-width: 656px) 100vw, 656px\",\n \"type\": \"image/webp\"\n }), \"\\n \", mdx(\"source\", {\n parentName: \"picture\",\n \"srcSet\": [\"/static/2afd31508e8eddb6da5832f381d4426a/8ff5a/spacing.png 240w\", \"/static/2afd31508e8eddb6da5832f381d4426a/e85cb/spacing.png 480w\", \"/static/2afd31508e8eddb6da5832f381d4426a/748f4/spacing.png 656w\"],\n \"sizes\": \"(max-width: 656px) 100vw, 656px\",\n \"type\": \"image/png\"\n }), \"\\n \", mdx(\"img\", {\n parentName: \"picture\",\n \"className\": \"gatsby-resp-image-image\",\n \"src\": \"/static/2afd31508e8eddb6da5832f381d4426a/748f4/spacing.png\",\n \"alt\": \"Spacing\",\n \"title\": \"Spacing\",\n \"loading\": \"lazy\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n }\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"This representation of elements as boxes allows us to effectively distribute content within our webpage. There are different approaches to do so, but before we get to that part, make sure you understand how this works:\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model\"\n }, \"Introduction to the CSS basic box model\")), mdx(\"p\", null, \"See an example of how box model works here\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.w3schools.com/css/css_boxmodel.asp\"\n }, \"CSS Box Model\")), mdx(\"h3\", {\n \"id\": \"css-units\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#css-units\",\n \"aria-label\": \"css units permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"CSS Units\"), mdx(\"p\", null, \"Some CSS attributes require a unit value. Some that you might come across already is the pixel value (px) or the percentage (%). There are many, we will review the most important.\"), mdx(\"p\", null, \"Just like we measure meters in a room to find furniture that fits in it, we need to measure the elements on our webpage. CSS Units allow us to measure and compare different items.\"), mdx(\"p\", null, \"Read about absolute and relative numeric values and percentages:\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units\"\n }, \"CSS values and units\")), mdx(\"h3\", {\n \"id\": \"box-model-example\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#box-model-example\",\n \"aria-label\": \"box model example permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Box model example\"), mdx(\"p\", null, \"As we saw at the beginning of this chapter, the\\xA0\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"actual\"), \"\\xA0width and height of a box will be\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Width = Content-box + padding + border + margin\")), mdx(\"p\", null, \"So if we do this:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \".box {\\n width: 200px;\\n border: 1px solid green;\\n padding: 1rem;\\n margin: 2rem;\\n}\\n\")), mdx(\"p\", null, \"The actual \", mdx(\"em\", {\n parentName: \"p\"\n }, \"rendered\"), \" (as seen on screen) width would be\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"width = 200px + 1rem + 1px + 2rem\")), mdx(\"p\", null, \"Hard to calculate, isn't it?\"), mdx(\"h3\", {\n \"id\": \"box-sizing\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#box-sizing\",\n \"aria-label\": \"box sizing permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Box sizing\"), mdx(\"p\", null, \"To avoid the confusion we've seen before, most developers change the default browser behavior.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"box-sizing\"), \" \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"is a CSS property that sets how the total width and height of an element is calculated.\"), \" When we set the value of box-sizing to border-box the final calculation will differ. The width and height properties will include the content, padding, and border, but do not include the margin.\"), mdx(\"p\", null, \"This part can be easy to implement but hard to understand, so read the article below to make sure you acquire the knowledge before executing it.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing\"\n }, \"box-sizing\")), mdx(\"h3\", {\n \"id\": \"exercises-2\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#exercises-2\",\n \"aria-label\": \"exercises 2 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/set-the-id-of-an-element\"\n }, \"Set the id of an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element\"\n }, \"Use an id Attribute to Style an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/adjust-the-padding-of-an-element\"\n }, \"Adjust the Padding of an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/adjust-the-margin-of-an-element\"\n }, \"Adjust the Margin of an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element\"\n }, \"Add Different Padding to Each Side of an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element\"\n }, \"Add Different Margins to Each Side of an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element\"\n }, \"Use Clockwise Notation to Specify the Padding of an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element\"\n }, \"Use Clockwise Notation to Specify the Margin of an Element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element\"\n }, \"Use Clockwise Notation to Specify the Margin of an Element\")))), mdx(\"h2\", {\n \"id\": \"04-cascade-and-inheritance\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#04-cascade-and-inheritance\",\n \"aria-label\": \"04 cascade and inheritance permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"04. Cascade and inheritance\"), mdx(\"p\", null, \"Cascade and inheritance are very important in order to determine which selector will have more power over the rest.\"), mdx(\"p\", null, \"Sometimes, different styles are applied to the same element. In order to decide which style should prevail, cascade and inheritance will have their say. Read these articles to understand this conflicting rules.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade\"\n }, \"Introducing the CSS Cascade\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\"\n }, \"Cascade and inheritance\")), mdx(\"h3\", {\n \"id\": \"exercises-3\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#exercises-3\",\n \"aria-label\": \"exercises 3 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/inherit-styles-from-the-body-element\"\n }, \"Inherit styles from the body element\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/prioritize-one-style-over-another\"\n }, \"Prioritize one style over another\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-styles-in-subsequent-css\"\n }, \"Override styles in subsequent CSS\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes\"\n }, \"Override class declarations by styling ID attributes\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-class-declarations-with-inline-styles\"\n }, \"Override class declarations with inline styles\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-all-other-styles-by-using-important\"\n }, \"Override all other styles by using importants\")))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"What happens when different opposite styles (such as color: red, color: green) are applied to the same element?\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Do you think how cascade and inheritance can affect a project with 200 stylesheets?\")), mdx(\"h3\", {\n \"id\": \"further-reading-1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#further-reading-1\",\n \"aria-label\": \"further reading 1 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Further reading\"), mdx(\"p\", null, \"If you want to learn advanced topics on cascade and inheritance, check this article\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://blog.logrocket.com/how-css-works-understanding-the-cascade-d181cd89a4d8/\"\n }, \"How CSS works: Understanding the cascade - LogRocket Blog\")), mdx(\"h2\", {\n \"id\": \"05-css-layout\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#05-css-layout\",\n \"aria-label\": \"05 css layout permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"05. CSS Layout\"), mdx(\"p\", null, \"CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow.\"), mdx(\"p\", null, \"As aforementioned, distributing content in our webpage flow can be dealt by several means. Have a look at the main options.\"), mdx(\"h3\", {\n \"id\": \"default-layout-flow-inline-vs-block\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#default-layout-flow-inline-vs-block\",\n \"aria-label\": \"default layout flow inline vs block permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Default layout flow: inline vs block\"), mdx(\"p\", null, \"Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/display\"\n }, \"display\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://dev.to/shimphillip/inline-vs-inline-block-vs-block-280h\"\n }, \"Inline vs Inline-block vs Block\")), mdx(\"h3\", {\n \"id\": \"positioning\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#positioning\",\n \"aria-label\": \"positioning permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Positioning\"), mdx(\"p\", null, \"Positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/position\"\n }, \"position\")), mdx(\"h3\", {\n \"id\": \"flexbox\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#flexbox\",\n \"aria-label\": \"flexbox permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Flexbox\"), mdx(\"p\", null, \"The main goal of flexbox is to craft one-dimensional layout structures (vertical or horizontal). Items in flex layouts will shrink or grow to fill the space available and will position relative to the parent container.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox\"\n }, \"Flexbox\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\"\n }, \"Basic concepts of flexbox\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\"\n }, \"A Complete Guide to Flexbox | CSS-Tricks\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"What do you find it easier? Positioning left and right or using flexbox?\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Can you think of a clear example of webpage where flexbox can be used?\")), mdx(\"h3\", {\n \"id\": \"exercises-4\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#exercises-4\",\n \"aria-label\": \"exercises 4 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/change-an-elements-relative-position\"\n }, \"Change an element's relative position\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets\"\n }, \"Move a relatively positioned element with CSS offsets\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning\"\n }, \"Lock an element to its parent with absolute positioning\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning\"\n }, \"Lock an element to the browser window with fixed positioning\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property\"\n }, \"Center an element horizontally using the margin property\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes\"\n }, \"Use\\xA0\", mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"display: flex\"), \"\\xA0to position two boxes\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed\"\n }, \"Add flex superpowers to the tweet embed\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed\"\n }, \"Apply the\\xA0\", mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"flex-direction\"), \"\\xA0property to create rows in the tweet embed\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed\"\n }, \"Apply the\\xA0\", mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"flex-direction\"), \"\\xA0property to create a column in the tweet embed\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed\"\n }, \"Use the\\xA0\", mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"justify-content\"), \"\\xA0property in the tweet embed\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed\"\n }, \"Use the\\xA0\", mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"align-items\"), \"\\xA0property in the tweet embed\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-align-self-property\"\n }, \"Use the\\xA0\", mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"align-self\"), \"\\xA0property\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Get to the end of this game to master Flexbox! \\u2B07\\uFE0F\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://flexboxfroggy.com/#es\"\n }, \"Flexbox Froggy\")), mdx(\"h3\", {\n \"id\": \"further-reading-2\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#further-reading-2\",\n \"aria-label\": \"further reading 2 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Further reading\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\"\n }, \"A Complete Guide to Flexbox | CSS-Tricks\")), mdx(\"h2\", {\n \"id\": \"06-responsive\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#06-responsive\",\n \"aria-label\": \"06 responsive permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"06. Responsive\"), mdx(\"p\", null, \"It is fairly common to create a Website or app that changes its user interface depending on the browser or device accessing the site to provide an optimized experience.\"), mdx(\"p\", null, \"Developers usually create a single version of the website which doesn't care about what browser or platform is accessing the site, but instead uses feature tests to find out what code features the browser supports or what the values of certain browser features are, and then adjusts the code appropriately.\"), mdx(\"h3\", {\n \"id\": \"basics\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#basics\",\n \"aria-label\": \"basics permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Basics\"), mdx(\"p\", null, \"Please read these articles to know the basic concepts of responsive designs.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design\"\n }, \"Responsive design\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks\"\n }, \"The building blocks of responsive design\")), mdx(\"h3\", {\n \"id\": \"using-developer-tools-responsive-design-mode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#using-developer-tools-responsive-design-mode\",\n \"aria-label\": \"using developer tools responsive design mode permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Using Developer Tools Responsive Design Mode\"), mdx(\"p\", null, \"Responsive Design Mode is a tool from your browser developer tools that gives you a simple way to simulate a range of layouts of different devices \\u2014 particularly mobile phones and tablets as well as desktops and laptops.\"), mdx(\"p\", null, \"Read this article to understand how it works\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode\"\n }, \"Responsive Design Mode\")), mdx(\"h3\", {\n \"id\": \"media-queries\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#media-queries\",\n \"aria-label\": \"media queries permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Media queries\"), mdx(\"p\", null, \"Media queries lets you adapt your site or app depending on the presence or value of various device characteristics and parameters.\"), mdx(\"p\", null, \"See an example of its syntax:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \".box {\\n width: 75%;\\n}\\n\\n@media all and (max-width: 1024px) {\\n .box {\\n width: 50%;\\n }\\n}\\n\")), mdx(\"p\", null, \"In order for you to master media queries, read the following article. Be ready to start typing!\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries\"\n }, \"Using media queries\")), mdx(\"h3\", {\n \"id\": \"exercises-5\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#exercises-5\",\n \"aria-label\": \"exercises 5 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/understand-absolute-versus-relative-units\"\n }, \"Understand absolute versus relative units\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/create-a-media-query\"\n }, \"Create a media query\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive\"\n }, \"Make an image responsive\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays\"\n }, \"Use a retina image for higher resolution displays\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-typography-responsive\"\n }, \"Make typography responsive\")))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"What platforms do you use to access the internet?\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Do you know phone applications which also have a webpage? Are they the same or different? Do they look the same? Do they have similar functionalities?\")), mdx(\"h2\", {\n \"id\": \"07-custom-properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#07-custom-properties\",\n \"aria-label\": \"07 custom properties permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"07. Custom Properties\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Custom properties\"), \"\\xA0(sometimes referred to as CSS variables) are variables defined by CSS authors that contain specific values to be reused throughout a document (similar to JS variables). They are set using custom property notation (e.g.,\\xA0\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"--main-color: black;\"), \") and are accessed using the var() function (e.g.,\\xA0\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"color: var(--main-color);\"), \").\"), mdx(\"p\", null, \"Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places.\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\"\n }, \"Using CSS custom properties (variables)\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \".parent-element {\\n --main-color: #000;\\n}\\n\\n.child-element {\\n background: var(--main-color);\\n}\\n\\n/* Custom properties using fallback value */\\n.sibling-element[attr] {\\n background: var(--main-color, #fff);\\n}\\n\\n\")), mdx(\"h3\", {\n \"id\": \"exercises-6\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#exercises-6\",\n \"aria-label\": \"exercises 6 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once\"\n }, \"Use CSS Variables to change several elements at once\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/create-a-custom-css-variable\"\n }, \"Create a custom CSS Variable\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-custom-css-variable\"\n }, \"Use a custom CSS Variable\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable\"\n }, \"Attach a Fallback value to a CSS Variable\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-css/inherit-css-variables\"\n }, \"Inherit CSS Variables\")))), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Well done!\"), \" You've just arrived to the end part of the CSS syllabus. Congratulations!\"), mdx(\"p\", null, \"Before continuing, make sure you can tick all the goals (except the project one, which comes next), and you don't have any doubts. Otherwise, ask the teachers! \\uD83E\\uDD13\"));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":2,"value":"01. Introduction to CSS"},{"depth":3,"value":"Basic CSS styling"},{"depth":3,"value":"CSS Selector"},{"depth":3,"value":"Adding a stylesheet"},{"depth":3,"value":"Comments"},{"depth":3,"value":"Exercises"},{"depth":2,"value":"02. CSS Selectors"},{"depth":3,"value":"Main Selectors"},{"depth":3,"value":"Other selectors"},{"depth":3,"value":"Combining selectors"},{"depth":3,"value":"Exercises"},{"depth":3,"value":"Further Reading"},{"depth":2,"value":"03. Box Model"},{"depth":3,"value":"CSS Box model"},{"depth":3,"value":"CSS Units"},{"depth":3,"value":"Box model example"},{"depth":3,"value":"Box sizing"},{"depth":3,"value":"Exercises"},{"depth":2,"value":"04. Cascade and inheritance"},{"depth":3,"value":"Exercises"},{"depth":3,"value":"Further reading"},{"depth":2,"value":"05. CSS Layout"},{"depth":3,"value":"Default layout flow: inline vs block"},{"depth":3,"value":"Positioning"},{"depth":3,"value":"Flexbox"},{"depth":3,"value":"Exercises"},{"depth":3,"value":"Further reading"},{"depth":2,"value":"06. Responsive"},{"depth":3,"value":"Basics"},{"depth":3,"value":"Using Developer Tools Responsive Design Mode"},{"depth":3,"value":"Media queries"},{"depth":3,"value":"Exercises"},{"depth":2,"value":"07. Custom Properties"},{"depth":3,"value":"Exercises"}]}},"pageContext":{"slug":"/css/contents/","prev":{"label":"Introduction","link":"/css/introduction"},"next":{"label":"CSS Section project","link":"/css/css-section-project"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/css/contents.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}