{"id":266529,"date":"2018-02-14T07:14:24","date_gmt":"2018-02-14T14:14:24","guid":{"rendered":"http:\/\/css-tricks.com\/?p=266529"},"modified":"2018-02-21T15:45:26","modified_gmt":"2018-02-21T22:45:26","slug":"css-basics-second-s-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-basics-second-s-css\/","title":{"rendered":"CSS Basics: The Second “S” in CSS"},"content":{"rendered":"

CSS is an abbreviation for Cascading Style Sheets. <\/p>\n

While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don’t talk a whole lot about is the sheet<\/em> part of the language. So let’s give that lonely second “S” a little bit of the spotlight and understand what we mean when we say CSS is a style sheet<\/em>.<\/p>\n

<\/p>\n

The Sheet Contains the Styles<\/h3>\n
The cascade describes how styles interact with one another. The styles make up the actual code. Then there’s the sheet that contains that code. Like a sheet of paper that we write on, the “sheet” of CSS is the digital file where styles are coded.<\/p>\n
If we were to illustrate this, the relationship between the three sort of forms a cascade:<\/p>\n
$\"\"$
The sheet holds the styles.<\/figcaption><\/figure>\n
There can be multiple sheets all continuing multiple styles all associated with one HTML document. The combination of those and the processes of figuring out what styles take precedence to style what elements is called the cascade (That first “C” in CSS). <\/p>\n
The Sheet is a Digital File<\/h3>\n
The sheet is such a special thing that it’s been given its own file extension: `.css<\/code>. You have the power to create these files on your own. Creating a CSS file can be done in any text editor. They are literally text files. Not “rich text” documents or Word documents, but plain ol’ text.<\/p>\n`
`If you’re on Mac, then you can fire up TextEdit to start writing CSS. Just make sure it’s in “Plain Text” mode.<\/p>\n`
<\/figure>\nIf you’re on Windows, the default Notepad app is the equivalent. Heck, you can type styles in just about any plain text editor to write CSS, even if that’s not what it says it was designed to do.<\/p>\n Whatever tool you use, the key is to save your document as a .css<\/code> file. This can usually be done by simply add that to your file name when saving. Here’s how that looks in TextEdit:<\/p>\n <\/figure>\nSeriously, the choice of which text editor to use for writing CSS is totally up to you. There are many, many to choose from, but here are a few popular ones:<\/p>\n \nSublime Text<\/a><\/li>\n Atom<\/a><\/li>\n VIM<\/a><\/li>\n PhpStorm<\/a><\/li>\n Coda<\/a><\/li>\n Dreamweaver<\/a><\/li>\n<\/ul>\nYou might reach for one of those because they’ll do handy things for you like syntax highlight the code (colorize different parts to help it be easier to understand what is what). <\/p>\n Hey look I made some files completely from scratch with my text editor:<\/p>\n<\/figure>\nThose files are 100% valid in any web browser, new or old. We’ve quite literally just made a website.<\/p>\nThe Sheet is Linked Up to the HTML<\/h3>\nWe do need to connect the HTML and CSS though. As in make sure the styles we wrote in our sheet get loaded onto the web page.<\/p>\n A webpage without CSS is pretty barebones:<\/p>\nSee the Pen Style-less Webpage<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n Once we link up the CSS file, voila!<\/em><\/p>\n See the Pen Webpage With Styles<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n How did that happen? if you look at the top of any webpage, there’s going to be a <head><\/code> tag that contains information about the HTML document:<\/p>\n <!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t\r\n\t<\/head>\r\n\r\n\t<body>\r\n\t\t\r\n\t<\/body>\r\n\r\n<\/html><\/code><\/pre>\nEven though the code inside the <head><\/code> might look odd, there is typically one line (or more, if we’re using multiple stylesheets) that references the sheet. It looks something like this:<\/p>\n<head>\r\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\" \/>\r\n<\/head><\/code><\/pre>\nThis line tells the web browser as it reads this HTML file:<\/p>\n\nI’d like to link up a style sheet<\/li>\nHere’s where it is located<\/li>\n<\/ol>\nYou can name the sheet whatever you want:<\/p>\n\nstyles.css<\/li>\n global.css<\/li>\nseriously-whatever-you-want.css<\/li>\n<\/ul>\nThe important thing is to give the correct location of the CSS file, whether that’s on your web server, a CDN<\/abbr> or some other server altogether.<\/p>\n Here are a few examples:<\/p>\n<head>\r\n \r\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n\r\n \r\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"\/css\/styles.css\">\r\n\r\n \r\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/some-other-site\/path\/to\/styles.css\">\r\n<\/head><\/code><\/pre>\nThe Sheet is Not Required for HTML<\/h3>\nYou saw the example of a barebones web page above. No web page is required<\/em> to use a stylesheet.<\/p>\n Also, we can technically write CSS directly in the HTML using the HTML style<\/code> attribute. This is called inline styling<\/em> and it goes a little something like this if you imagine you’re looking at the code of an HTML file:<\/p>\n<h1 style=\"font-size: 24px; line-height: 36px; color: #333333\">A Headline<\/h1>\r\n<p style=\"font-size: 16px; line-height: 24px; color: #000000;\">Some paragraph content.<\/p>\r\n<\/code><\/pre>\nWhile that’s possible, there are three serious strikes against writing styles this way:<\/p>\n \nIf you decide to use a stylesheet later, it is extremely difficult to override inline styles with the styles in the HTML. Inline styles take priority over styles in a sheet.<\/li>\n Maintaining all of those styles is tough if you need to make a “quick” change and it makes the HTML hard to read.<\/li>\n There’s something weird about saying we’re writing CSS inline when there really is no cascade or sheet. All we’re really writing are styles.<\/li>\n<\/ol>\nThere is a second way to write CSS in the HTML and that’s directly in the <head><\/code> in a <style><\/code> block:<\/p>\n <head>\r\n\t<style>\r\n \th1 {\r\n \t\tcolor: #333;\r\n \t\tfont-size: 24px;\r\n \t\tline-height: 36px;\r\n \t}\r\n\r\n \tp {\r\n \t\tcolor: #000;\r\n \t\tfont-size: 16px;\r\n \t\tline-height: 24px;\r\n \t}\r\n\t<\/style>\r\n<\/head><\/code><\/pre>\nThat does indeed make the HTML easier to read, already making it better than inline styling. Still, it’s hard to manage all styles this way because it has to be managed on each and every webpage of a site, meaning one “quick” change might have to be done several times, depending on how many pages we’re dealing with.<\/p>\n An external sheet that can be called once in the <head><\/code> is usually your best bet.<\/p>\n The Sheet is Important<\/h3>\nI hope that you’re starting to see the importance of the sheet by this point. It’s a core part of writing CSS. Without it, styles would be difficult to manage, HTML would get cluttered, and the cascade would be nonexistent in at least one case.<\/p>\n The sheet is the core component of CSS. Sure, it often appears to play second fiddle to the first “S” but perhaps that’s because we all have an quiet understanding of its importance.<\/p>\n Leveling Up<\/h3>\nNow that you’re equipped with information about stylesheets, here are more resources you jump into to get a deeper understanding for how CSS behaves:<\/p>\n \nSpecifics on Specificity<\/a> – The cascade is a confusing concept and this article breaks down the concept of specificity, which is a method for how to manage it.<\/li>\n The latest ways to deal with the cascade, inheritance and specificity<\/a> – That’s a lot of words, but the this article provides pro tips on how to manage the cascade, including some ideas that may be possible in the future.<\/li>\n Override Inline Styles with CSS<\/a> – This is an oldie, but goodie. While the technique is probably not best practice today, it’s a good illustration of how to override those inline styles we mentioned earlier.<\/li>\n When Using !important is The Right Choice<\/a> – This article is a perfect call-and-response to the previous article about why that method may not be best practice.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"CSS is an abbreviation for Cascading Style Sheets. While most of the discussion about CSS on the web (or even […]<\/p>\n","protected":false},"author":2508,"featured_media":267368,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[896,478,1384,17249,1380],"class_list":["post-266529","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-cascade","tag-css","tag-css-basics","tag-inheritance","tag-specificity"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/sheet-cascade-2.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":342930,"url":"https:\/\/css-tricks.com\/inherit-initial-unset-revert\/","url_meta":{"origin":266529,"position":0},"title":"inherit, initial, unset, revert","author":"Chris Coyier","date":"June 22, 2021","format":false,"excerpt":"There are four keywords that are valid values for any CSS property (see the title). Of those, day to day, I'd say I see the inherit used the most. Perhaps because it's been around the longest (I think?) but also because it makes logical sense (\"please inherit your value from\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":372576,"url":"https:\/\/css-tricks.com\/using-css-cascade-layers-to-manage-custom-styles-in-a-tailwind-project\/","url_meta":{"origin":266529,"position":1},"title":"Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project","author":"Ollie Williams","date":"August 24, 2022","format":false,"excerpt":"If a utility class only does one thing, chances are you don\u2019t want it to be overridden by any styles coming from elsewhere. One approach is to use !important to be 100% certain the style will be applied, regardless of specificity conflicts. The Tailwind config file has an !important option\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/tailwind-layers.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/tailwind-layers.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/tailwind-layers.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/tailwind-layers.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/tailwind-layers.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":278596,"url":"https:\/\/css-tricks.com\/the-c-in-css-the-cascade\/","url_meta":{"origin":266529,"position":2},"title":"The “C” in CSS: The Cascade","author":"Thomas Yip","date":"November 13, 2018","format":false,"excerpt":"Following up from Geoff\u2019s intro article on The Second \"S\" in CSS, let\u2019s now move the spotlight to the \"C\" in CSS \u2014 what we call the Cascade. It\u2019s where things start to get messy, and even confusing at times. Have you ever written a CSS property and the value\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/cascade-bubbles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/cascade-bubbles.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/cascade-bubbles.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/cascade-bubbles.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/cascade-bubbles.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":363766,"url":"https:\/\/css-tricks.com\/css-cascade-layers\/","url_meta":{"origin":266529,"position":3},"title":"Cascade Layers Guide","author":"Miriam Suzanne","date":"February 21, 2022","format":false,"excerpt":"This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you\u2026","rel":"","context":"In "Guides"","block_context":{"text":"Guides","link":"https:\/\/css-tricks.com\/category\/guides\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/cascade-layers-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/cascade-layers-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/cascade-layers-guide.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/cascade-layers-guide.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/cascade-layers-guide.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":384306,"url":"https:\/\/css-tricks.com\/organizing-design-system-component-patterns-with-css-cascade-layers\/","url_meta":{"origin":266529,"position":4},"title":"Organizing Design System Component Patterns With CSS Cascade Layers","author":"Ryan Trimble","date":"February 10, 2025","format":false,"excerpt":"I enjoy organizing code and find cascade layers a fantastic way to organize code explicitly as the cascade looks at it. The neat part is, that as much as it helps with \"top-level\" organization, cascade layers can be nested, which allows us to author more precise styles based on the\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/signup-buttons.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/signup-buttons.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/signup-buttons.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/signup-buttons.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/signup-buttons.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":367283,"url":"https:\/\/css-tricks.com\/how-i-added-scroll-snapping-to-my-twitter-timeline\/","url_meta":{"origin":266529,"position":5},"title":"How I Added Scroll Snapping To My Twitter Timeline","author":"\u0160ime Vidas","date":"August 5, 2022","format":false,"excerpt":"CSS Scroll Snap allows websites to snap the web page or any other scroll container to a specific scroll position when the user performs a scrolling operation. This feature has been supported in all modern browsers for over two years, but many websites that could benefit from it are still\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/scroll-snap-distance.png?fit=1200%2C666&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/scroll-snap-distance.png?fit=1200%2C666&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/scroll-snap-distance.png?fit=1200%2C666&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/scroll-snap-distance.png?fit=1200%2C666&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/scroll-snap-distance.png?fit=1200%2C666&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=266529"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266529\/revisions"}],"predecessor-version":[{"id":266946,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/266529\/revisions\/266946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/267368"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=266529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=266529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=266529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

The Sheet is Linked Up to the HTML<\/h3>\nWe do need to connect the HTML and CSS though. As in make sure the styles we wrote in our sheet get loaded onto the web page.<\/p>\nA webpage without CSS is pretty barebones:<\/p>\n