{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/css/introduction","result":{"data":{"mdx":{"id":"374ccb97-0aca-5f70-90f6-f7e50bcc9211","excerpt":"CSS stands for  Cascading Style Sheets .\nWith CSS, we give  styles  to our webpage. As you remember, with HTML we created the webpage structure. Now, with CSS…","fields":{"slug":"/css/introduction/"},"frontmatter":{"title":"Introduction","description":"Introduction | 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\": \"Introduction\",\n  \"description\": \"Introduction | 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(\"p\", null, \"CSS stands for\\xA0\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Cascading Style Sheets\"), \".\\nWith CSS, we give \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"styles\"), \" to our webpage. As you remember, with HTML we created the webpage structure. Now, with CSS we will focus on how the structure 'looks'. For instance, you could alter the font, color, size and spacing of your content, split it into multiple columns, or add animations and other decorative features.\\nIn this module, you will learn how to select elements in your webpage and how to effectively style them.\"), mdx(\"p\", null, \"Imagine a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"building\"), \" construction process:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83C\\uDFD7\\uFE0F  \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"HTML\"), \" would represent the foundation and skeleton of the building (the structure)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83C\\uDFE0 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"CSS\"), \" will represent how it looks: is it made of glass? Is it painted in green? How big are the windows? Where will the door be? How will it be distributed?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCA1 In the next chapter, \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"JavaScript\"), \" would be the mechanical and electrical installation (the interaction).\")), mdx(\"p\", null, \"In order for you to have a broad, general sense of what CSS is, please read this article:\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS\"\n  }, \"Learn to style HTML using CSS\")), mdx(\"h2\", {\n    \"id\": \"goals\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#goals\",\n    \"aria-label\": \"goals 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  }))), \"Goals\"), mdx(\"p\", null, \"At the end of this section you should be able to:\"), mdx(\"ul\", {\n    \"className\": \"contains-task-list\"\n  }, mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Understand what CSS is.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Learn to include stylesheets in our webpages.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Learn main selectors.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Master multiple selectors.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Efficiently target HTML elements.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Be able to change an element's style (border, padding etc)\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Understand the box model.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Be able to identify cascade and CSS inheritance and use it to change different values.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Position elements in your webpage effectively with position and flexbox.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Create responsive content.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Be able to use DevTools for CSS mastering.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Create and apply custom properties.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \" Extra: create animations and transitions.\")), mdx(\"p\", null, \"Let's start working!\\uD83D\\uDCAA\\uD83C\\uDFFD\"));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":2,"value":"Goals"}]}},"pageContext":{"slug":"/css/introduction/","prev":{"label":"Further reading","link":"/html/further-reading"},"next":{"label":"Contents","link":"/css/contents"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/css/introduction.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}