{"id":4665,"date":"2021-06-11T15:31:00","date_gmt":"2021-06-11T13:31:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/what-is-css\/"},"modified":"2023-02-06T13:25:05","modified_gmt":"2023-02-06T12:25:05","slug":"what-is-css","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-css\/","title":{"rendered":"What is CSS? A Beginner's Guide"},"content":{"rendered":"<p>When browsing the internet, you\u2019ve probably found yourself asking why some websites are so much more visually appealing than others.<\/p>\n<p>If you\u2019re interested in <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/courses\/become-a-web-developer\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">becoming a web developer<\/a>, you may have also asked yourself how a programmer is able to alter the appearance of those pages using code. The answer to these questions is CSS, or Cascading Style Sheets, which is the language responsible for the visual element of every kind of website.<\/p>\n<p>In this blog post we\u2019re going to be looking in detail at exactly what CSS is, and how developers use it to create the visual element we enjoy when looking at our favorite websites. If you want to skip ahead to a different section of this article, just use the clickable menu:<\/p>\n<ol>\n<li><strong><a href=\"#how-is-a-web-page-built\">How is a web page built?<\/a><\/strong><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong><a href=\"#what-is-css\">What is CSS?<\/a><\/strong>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#what-does-css-stand-for\"><span style=\"font-weight: 400;\">What does CSS stand for?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#html-vs-css\"><span style=\"font-weight: 400;\">HTML vs CSS<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#css-vs-javascript\"><span style=\"font-weight: 400;\">CSS vs JavaScript<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong><a href=\"#how-does-css-work\">How does CSS work?<\/a><\/strong><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong><a href=\"#types-of-css\">Types of CSS<\/a><\/strong>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#external-css\"><span style=\"font-weight: 400;\">External CSS<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#internal-css\"><span style=\"font-weight: 400;\">Internal CSS<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#inline-css\"><span style=\"font-weight: 400;\">Inline CSS<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong><a href=\"#how-to-get-started-with-css\">How to get started with CSS<\/a><\/strong><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong><a href=\"#why-is-css-important\">Why is CSS important?<\/a><\/strong><\/li>\n<\/ol>\n<h2 id=\"how-is-a-web-page-built\">1. How is a web page built?<\/h2>\n<p>Before we get on to CSS, let\u2019s take a moment to define the other elements we\u2019ll be talking about in today\u2019s post, beginning with the <strong>web page<\/strong>.<\/p>\n<p>Now, a web page is a hypertext document connected to the World Wide Web. It\u2019s accessed when your browser enters the URL the page is hosted on. A <strong>website<\/strong> is a collection of web pages which is hosted on a domain. Each web page is made up of three aspects: content, presentation, and behavior.<\/p>\n<p>The <strong>content<\/strong> is essentially the elements which make up the page. For example, the text, images, and headings make up the content. Content is written in <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-html-a-beginners-guide\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\"><strong>HTML<\/strong><\/a>, short for HyperText Markup Language. In short, HTML is responsible for defining the content and structure of a web page.<\/p>\n<p>The <strong>presentation<\/strong> is the visual representation of the elements on the page. <span style=\"font-weight: 400;\">This is where CSS comes in.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Previously, style was written directly in HTML elements. Let\u2019s see what that looks like:<\/span><\/p>\n<figure id=\"attachment_22636\" aria-describedby=\"caption-attachment-22636\" style=\"width: 1242px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-22636 size-full\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_code_example.png\" alt=\"An example of the code for a web page using HTML for style, instead of CSS.\" width=\"1242\" height=\"496\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_code_example.png 1242w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_code_example-300x120.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_code_example-1024x409.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_code_example-768x307.png 768w\" sizes=\"auto, (max-width: 1242px) 100vw, 1242px\" \/><figcaption id=\"caption-attachment-22636\" class=\"wp-caption-text\">An example of the code for a web page using HTML for style, instead of CSS.<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">With this way of styling in the HTML directly, you can see how it might get messy if there\u2019s a lot of styling. Style needs to be added to every HTML tag for consistency. Each new page would need the style written too, even if it\u2019s the same kind of heading, etc. Not to mention how lengthy it could get!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CSS was created to allow for the separation of content and presentation. This makes the styles their own file rather than mixing in with the HTML, meaning that the same HTML document can be styled in many different ways, and can remain accessible to different rendering methods, such as screen readers. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">CSS also allows us to apply styles to certain element types, like h1, h2, p, etc. You can write them once and then they apply everywhere that file is relevant.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0Let\u2019s look at what similar style would look like in CSS:<\/span><\/p>\n<figure id=\"attachment_22637\" aria-describedby=\"caption-attachment-22637\" style=\"width: 1238px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-22637 size-full\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_Hello_World.png\" alt=\"An example of the code for a web page using CSS to set styles.\" width=\"1238\" height=\"700\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_Hello_World.png 1238w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_Hello_World-300x170.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_Hello_World-1024x579.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_Hello_World-768x434.png 768w\" sizes=\"auto, (max-width: 1238px) 100vw, 1238px\" \/><figcaption id=\"caption-attachment-22637\" class=\"wp-caption-text\">An example of the code for a web page using CSS to set styles.<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">You can see how separating out the style into CSS is way more readable in this example.<\/span><\/p>\n<p>CSS is also used to optimize pages for <strong>responsive web design,<\/strong> and to create other advanced visuals such as hover effects.<\/p>\n<p>Web pages that are responsive will change in layout depending on the screen size of the user\u2019s device. In recent times the ability to create responsive sites has grown increasingly more important as the number of potential screen size options for users has ballooned. In fact in the past few years, <a href=\"https:\/\/www.statista.com\/statistics\/277125\/share-of-website-traffic-coming-from-mobile-devices\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">mobile traffic growth has risen<\/a> so that now the majority of internet traffic is from mobile devices.<\/p>\n<p>The <strong>behavior<\/strong> describes both the user interaction with the web page and the animation contained within it. Typically the behavior on a page is handled by a programming language called <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/how-long-does-it-take-to-learn-javascript\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\"><strong>JavaScript<\/strong><\/a>.<\/p>\n<p>Now that we&#8217;ve seen what the nuts and bolts of what generally make web pages tick are, it&#8217;s time to find out how to begin using CSS to style content.<\/p>\n<h2 id=\"what-is-css\">2. What is CSS?<\/h2>\n<p><span style=\"font-weight: 400;\">CSS is a language that helps developers style websites. It&#8217;s used to add design elements like colors, font styles, and spacing. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">With CSS, the design is separate from the content, making it easier to change the design without affecting the content. Think of it like a set of instructions for your website, telling it how to look and feel. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, when you visit a website and see different colors, font styles, and layouts, it&#8217;s probably using CSS to make that happen.<\/span><\/p>\n<h3 id=\"what-does-css-stand-for\"><span style=\"font-weight: 400;\">What does CSS stand for?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS stands for Cascading Style Sheets. It\u2019s a stylesheet language used to add layout and visual effects to HTML elements. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">CSS is used specifically for markup languages, in this case HTML. A markup language is used to apply structure to a website or text document. The \u201cmarkup\u201d in this case is a set of tags used to indicate the structure and format of the page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The &#8220;cascading&#8221; part of its name refers to how styles are inherited and applied to different elements on a web page based on their relationship to each other in the HTML document. Styles can be applied to a parent element, which will be passed down to its child elements.<\/span><\/p>\n<h3 id=\"html-vs-css\"><span style=\"font-weight: 400;\">HTML vs CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">If a website was a house, HTML would be the structure of the house, and CSS would be the paint. Similarly, HTML provides the skeleton and the content of the website and CSS is used to add the skin and styling to it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HTML stands for Hypertext Markup Language. It uses tags to give an outline of the structure of a website. Similar to our HTML example earlier, here is some regular HTML without styling:<\/span><\/p>\n<figure id=\"attachment_22647\" aria-describedby=\"caption-attachment-22647\" style=\"width: 1228px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-22647\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/HTML_without_styling.png\" alt=\"An example of HTML code without styling.\" width=\"1228\" height=\"428\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/HTML_without_styling.png 1228w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/HTML_without_styling-300x105.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/HTML_without_styling-1024x357.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/HTML_without_styling-768x268.png 768w\" sizes=\"auto, (max-width: 1228px) 100vw, 1228px\" \/><figcaption id=\"caption-attachment-22647\" class=\"wp-caption-text\">An example of HTML code without styling.<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">You can see our HTML content for our page goes within the <span style=\"color: #993300;\">&lt;body&gt;<\/span> tag. We use different elements to define what the content is. In this case, <span style=\"color: #993300;\">&lt;h1&gt;<\/span> for the main heading, <span style=\"color: #993300;\">&lt;p&gt;<\/span> for paragraph, <span style=\"color: #993300;\">&lt;h2&gt;<\/span> for a subheading, <span style=\"color: #993300;\">&lt;ul&gt;<\/span> to indicate a list and <span style=\"color: #993300;\">&lt;li&gt;<\/span> for each list item.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CSS defines the presentation for this structure. It gets rendered into a style tag in HTML, but can be separated into a separate file and imported.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s say we wanted all <span style=\"color: #993300;\">&lt;h2&gt;<\/span> subheadings to be gray and underlined on this page. We could do it by writing some CSS for h2 elements like so:<\/span><\/p>\n<figure id=\"attachment_22648\" aria-describedby=\"caption-attachment-22648\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-22648\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_for_styling.png\" alt=\"An example of CSS code applying styling to h2 elements.\" width=\"1224\" height=\"176\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_for_styling.png 1224w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_for_styling-300x43.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_for_styling-1024x147.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/CSS_for_styling-768x110.png 768w\" sizes=\"auto, (max-width: 1224px) 100vw, 1224px\" \/><figcaption id=\"caption-attachment-22648\" class=\"wp-caption-text\">An example of CSS code applying styling to h2 elements.<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">That CSS will be applied to all h2 headings on the page, rather than having to manually add the style into each HTML element\u2019s style tag.<\/span><\/p>\n<h3 id=\"css-vs-javascript\"><span style=\"font-weight: 400;\">CSS vs JavaScript<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We\u2019ve covered what CSS does for a website, it handles the presentation and styles. How is that different from JavaScript?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, JavaScript is responsible for how a website behaves. It\u2019s a programming language that allows you to implement complex features on a web page. For example, if you click a button to submit a form, Javascript will determine how the form works, take your data, and send it to the database. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you search for a product in an online shop, it will take your search query, send it to the database, get the matching responses back, and figure out how to display and sort them.<\/span><\/p>\n<h2 id=\"how-does-css-work\"><span style=\"font-weight: 400;\">3. How does CSS work?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We\u2019ve covered the basics of CSS\u2014what is CSS and how it relates to HTML and JavaScript. Now let\u2019s consider how the browser takes HTML and CSS and turns it into a webpage.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you first load a webpage, your browser looks at the HTML and loads it. After that the HTML is converted into the DOM (Document Object Model). This is how the computer stores the information in its memory.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A DOM is structured like a tree. Every component of the markup language (i.e. HTML)\u2014each element, attribute, and word\u2014becomes a DOM node in the tree structure. The relationships between the nodes and other DOM nodes define the nodes. Some elements have children, and the children have siblings.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once the DOM is stored, the browser fetches all the resources linked to that HTML document. This is your images, videos and in this case\u2026CSS! The CSS is analyzed and separates out based on the different types of selectors (i.e. your <span style=\"color: #993300;\">&lt;h1&gt;<\/span>, <span style=\"color: #993300;\">&lt;p&gt;<\/span>, etc.), different classes and ids. It then figures out which rules should be applied to which elements and attaches the style to them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After that, you see the style on the screen.<\/span><\/p>\n<h2 id=\"types-of-css\"><span style=\"font-weight: 400;\">4. Types of CSS<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s go through some different ways developers might structure their CSS into their projects:<\/span><\/p>\n<h3 id=\"external-css\"><span style=\"font-weight: 400;\">External CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">This follows the principle of having your content and presentation separate. With external CSS, your style will be in a separate CSS file, or style sheet. To use an external style sheet, add a link to it in the <span style=\"color: #993300;\">&lt;head&gt;<\/span> section of each HTML page like this:<\/span><\/p>\n<figure id=\"attachment_22649\" aria-describedby=\"caption-attachment-22649\" style=\"width: 1240px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-22649\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/external_CSS_example.png\" alt=\"A code example showing how to link to an external style sheet.\" width=\"1240\" height=\"338\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/external_CSS_example.png 1240w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/external_CSS_example-300x82.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/external_CSS_example-1024x279.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/external_CSS_example-768x209.png 768w\" sizes=\"auto, (max-width: 1240px) 100vw, 1240px\" \/><figcaption id=\"caption-attachment-22649\" class=\"wp-caption-text\">A code example showing how to link to an external style sheet.<\/figcaption><\/figure>\n<h3 id=\"internal-css\"><span style=\"font-weight: 400;\">Internal CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">With internal CSS, the CSS is defined within the<span style=\"color: #993300;\"> &lt;style&gt;<\/span> tag of an HTML document. In this case the CSS is separate, but still in the same HTML file. Here\u2019s an example:<\/span><\/p>\n<figure id=\"attachment_22650\" aria-describedby=\"caption-attachment-22650\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-22650\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/internal_CSS_example.png\" alt=\"A code example of how write internal CSS.\" width=\"1224\" height=\"770\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/internal_CSS_example.png 1224w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/internal_CSS_example-300x189.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/internal_CSS_example-1024x644.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/internal_CSS_example-768x483.png 768w\" sizes=\"auto, (max-width: 1224px) 100vw, 1224px\" \/><figcaption id=\"caption-attachment-22650\" class=\"wp-caption-text\">A code example of how write internal CSS.<\/figcaption><\/figure>\n<h3 id=\"inline-css\"><span style=\"font-weight: 400;\">Inline CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">With inline CSS, you put the css styles directly in the HTML elements. This is like our example at the beginning of the article, and looks like this:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22651\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/inline_CSS.png\" alt=\"A code example of inline CSS.\" width=\"1236\" height=\"64\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/inline_CSS.png 1236w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/inline_CSS-300x16.png 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/inline_CSS-1024x53.png 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/inline_CSS-768x40.png 768w\" sizes=\"auto, (max-width: 1236px) 100vw, 1236px\" \/><\/p>\n<h2 id=\"how-to-get-started-with-css\">5. How to get started with CSS<\/h2>\n<p>As its name suggests, all CSS files are written in <strong>style sheets<\/strong>. A style sheet tells the web browser how to render the document being viewed.<\/p>\n<p>One important concept to understand about CSS is that all style sheets are <strong>cascading.<\/strong>\u00a0Every web page is affected by at least one style sheet, even if there are no styles applied by the designer. The default styles added by the browser are contained in the <strong>User Agent stylesheet<\/strong>.<\/p>\n<p>As specified by the browser, HTML elements have certain default styles. Heading elements and containing elements typically span the page, for instance, while links sit in line without breaking up text. There is one default font, and some spacing added to each element for readability. Anything more than that requires CSS.<\/p>\n<p>If the designer decides to add styles to the document, the browser needs to know which ones get applied first. The term &#8220;cascading&#8221; refers to the order in which styles are applied to the document\u2014picture a waterfall, where the piece underneath is the most important..<\/p>\n<p>What I mean by this is that essentially, the browser will read them in the order specified to \u201cpaint\u201d the layout of the page. Styles specified lower down override those above them.<\/p>\n<p>An additional rule of thumb when defining styles for an element is that <strong>specificity wins<\/strong>. More specific styles will override less specific ones.<\/p>\n<p>For example, a style applied to (body {..}) is less specific than one applied to (h1 {..}) which is a specific element of the body. The h1 style overrides the body style.<\/p>\n<p>In most cases, it is best to link to a separate style sheet, as a single style sheet is far easier to manage than many inline styles. You can have an unlimited number of documents linking to a single style sheet, which makes editing styles much more efficient as opposed to editing countless HTML documents.<\/p>\n<p>It also makes the process much easier for anyone who needs to edit your documents in the future.<\/p>\n<p>In the following video, Abhi, one of our in-house web developers, gives you a brief introduction and demonstration of how to code with CSS:<\/p>\n<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style>\n<div class=\"embed-container\"><iframe src=\"https:\/\/www.youtube.com\/embed\/F_feF3-NGtQ\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<div style=\"display: block; height: 20px; width: 100%;\"><\/div>\n<h2 id=\"why-is-css-important\">6. Why is CSS important?<\/h2>\n<p>In short, CSS is one of the most powerful tools in a web designer\u2019s arsenal. With it, you can drastically alter the entire mood and user experience of a website. Some further benefits you\u2019ll find using CSS are:<\/p>\n<ul>\n<li><strong>Freedom to position HTML elements anywhere<\/strong> on a web page, while allowing you to keep your markup (HTML) clean and organized.<\/li>\n<li><strong>Ability to adjust for differences<\/strong> in the way browsers render a web page.<\/li>\n<li><strong>Endless customization options<\/strong> to a web page including fonts, colors, borders, hover and transition effects, etc.<\/li>\n<li><strong>CSS preprocessors\u00a0<\/strong>change the game entirely for developers, allowing them to create more complex layouts more efficiently and use tools such as loops, variables, and if\/else statements. You can learn more about it in <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/css-preprocessors\/\" target=\"_blank\" rel=\"noopener\">our guide to CSS preprocessors<\/a>.<\/li>\n<li><strong>Ability to easily create, update and maintain styles simultaneously<\/strong> for a large number of web pages.<\/li>\n<li><strong>Ability to use media queries and relative units<\/strong> (ems and %s) to create web pages which adapt to the user\u2019s screen size<span style=\"font-weight: 400;\">\u2014ideal for creating\u00a0<a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/responsive-vs-adaptive-design\/\" target=\"_blank\" rel=\"noopener\">mobile-responsive web pages<\/a>.<\/span><\/li>\n<\/ul>\n<h2 id=\"wrap-up\"><span style=\"font-weight: 400;\">Wrap-Up<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">By now you understand what is CSS, how it works, how it differs from HTML and JavaScript and some different ways you might use CSS in a project. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">CSS will be part of pretty much any site on the web, so it\u2019s a great tool in your toolkit when working on the frontend of a website. There are tons of <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/best-web-development-tutorials-for-beginners\/\" target=\"_blank\" rel=\"noopener\">web development tutorials<\/a> that will teach you more about the language and how it works, chief among them the<strong> <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/short-courses\/become-a-web-developer\/\">CareerFoundry free 5-day coding course<\/a><\/strong>. In it you&#8217;ll learn about what is CSS as you build a mobile-responsive frontend website.<\/span><\/p>\n<p>If you&#8217;d like to learn more about web development in general, check out these articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/7-benefits-of-learning-to-code\/\">7 Benefits You&#8217;ll Notice When You Start Learning to Code<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-a-tech-stack\/\">What is a Tech Stack?<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-web-development\/\">What is Web Development? The Complete Beginner\u2019s Guide<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>HTML and CSS; those two things everyone seems to put on their resume nowadays despite having no idea what they are. Stand out from the crowd by finding out and learning it.<\/p>\n","protected":false},"author":134,"featured_media":5685,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-4665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":{"homepage_category_featured":false,"cards_inner_programs_lists_left":"","cards_inner_programs_lists_right":"","related_plan_cards":""},"modified_by":"Rash SEO","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/134"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=4665"}],"version-history":[{"count":1,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4665\/revisions"}],"predecessor-version":[{"id":25418,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4665\/revisions\/25418"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/5685"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=4665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=4665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=4665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}