{"id":3,"date":"2007-11-13T20:55:27","date_gmt":"2007-11-14T02:55:27","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=3"},"modified":"2007-11-13T20:55:27","modified_gmt":"2007-11-14T02:55:27","slug":"what-is-this-css-thing-anyway","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/what-is-this-css-thing-anyway\/","title":{"rendered":"What is this CSS thing, anyway?"},"content":{"rendered":"<p>So you\u2019ve been hanging around the web gurus long enough to know that \u201cCSS\u201d is something big and important in the web design world. You might even know that it has something to do with making pages pretty, or more Web 2.0, or something like that. And that\u2019s true (to an extent). But what does CSS <em>really mean?<\/em><\/p>\n<p>CSS is an acronym that stands for <strong>C<\/strong>ascading <strong>S<\/strong>tyle <strong>S<\/strong>heet. Not as illuminating as you hoped? Well, let\u2019s break that definition down into its important parts:<\/p>\n<p class=\"pullquote\">&ldquo;Style sheets have been around for longer than the web.&rdquo;<\/p>\n<p><strong>CSS is a Style Sheet.<\/strong> This is a useful starting point, because style sheets have been around for longer than the web. Back in the golden days of the business world, a style sheet was quite literally a sheet (or more often a document) which described, in excruciating detail, how documents created by a particular company should look. Style sheets dictated the typefaces used in press releases, the specific colors used in the masthead, the placement of the logo, and every other element you could imagine (and many you can&rsquo;t imagine). It was a way of maintaining consistency across a wide range of documents created by any number of writers. Though the production of the individual documents was disparate, they created a consistent, cohesive whole.<\/p>\n<p>Style Sheets in the web sense of the word serve the same purpose. CSS exists in a document (or series of documents) for the purpose of creating consistency across any number of web pages. Using CSS, you can say something like, \u201cI want all of my paragraphs to be indented half an inch. And be set in 14 point double-spaced Comic Sans. With a lime-green background.\u201d I\u2019d rather you didn\u2019t do those things, but the point is that the potential is there. You set up those rules in your CSS, and viola! All of your paragraphs can instantly look the same across your entire web site, no matter how many pages might exist. This is a powerful tool.<\/p>\n<p><strong>CSS Cascades. <\/strong>This is a trickier concept to master, because there isn\u2019t an equivalent from the days of Business Yore. Not that any self-respecting CEO wouldn\u2019t have given his mother\u2019s right arm for such a feature&#8230; but sadly, it\u2019s something that computers are naturally very good at and humans&#8230; well, not so much.<\/p>\n<p>So what does cascading mean, exactly? Let\u2019s say you\u2019ve set a very simple rule that says all paragraphs should be double-spaced. Simple enough. But now you take that paragraph, and you put it inside of a table cell, which is inside of a table, which is on a completely different page. Guess you have to write a new rule, huh? Nope! The Cascade part of CSS means that your general rules (paragraphs should do such-and-such) cascade through every document you\u2019ve linked to the style sheet, changing every possible tag it can.<\/p>\n<p>But what happens if you didn\u2019t want your paragraphs inside of tables to look the same as all the other paragraphs? No problem. Just make a slightly more specific rule regarding that particular usage and suddenly all paragraphs within all tables are behaving differently. That is powerful functionality.<\/p>\n<p>So to summarize, CSS is a powerful tool with some powerful functionality. It allows you to create a single style sheet, and from that document implement seamless brand consistency across any number of documents. And that functionality has hidden benefits, too. Let\u2019s say you\u2019ve got a web site running CSS, and suddenly it hits you: Comic Sans was not the best typeface choice for your legal documents. All you have to do is make one change in one document, and that potentially devastating problem just evaporates.<\/p>\n<p>Which brings us to our third important component: CSS is something that helps you sleep better at night.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>So you\u2019ve been hanging around the web gurus long enough to know that \u201cCSS\u201d is something big and important in the web design world. You might even know that it has something to do with making pages pretty, or more Web 2.0, or something like that. And that\u2019s true (to an extent). But what does CSS <em>really mean?<\/em> [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/what-is-this-css-thing-anyway\/\" title=\"Click to read 'What is this CSS thing, anyway?'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[175],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}