21:null 22:["$","title",null,{"children":"CSS: An Art, a Science, a Nightmare (Everything You Should Know) | 深度碎片 | Observable"}] 27:Tdc6,{ if (optionIntro === "none") { return md `` } else { return md` Speaking CSS is like speaking English, or any other spoken language - there are many words, but you only end up using a small subset of them on a daily basis. Just like reading a dictionary isn't an efficient way to learn a language, looking at a [big list of properties](https://www.w3.org/Style/CSS/all-properties.en.html) isn't helpful to learn CSS. Some people think CSS is really hard and it's too much of a hassle to learn. Some people think that since it's not a programming language ([or is it?](https://notlaura.com/is-css-turing-complete/)), it's so easy that you don't even have to bother learning it. Ultimately, there's a lot to CSS, but it doesn't have to be overwhelming. If you learn a few key concepts, you should feel confident looking at or thinking of any design and turning it into reality. I'm going to go over some of the parts of CSS that are important on a daily basis, and give some of tips and tricks I've come to learn over the years. > If you just want some hints on how to make your design look pretty or consistent, check out [Design for Developers](https://www.taniarascia.com/design-for-developers/). I also think [Web Design in 4 Minutes](https://jgthms.com/web-design-in-4-minutes/) by [Jeremy Thomas](https://jgthms.com/) has an excellent, interactive introduction to the concepts of web design. #### Who is this article for? If you're a seasoned front end developer who already knows everything about CSS, please close this tab immediately and run as fast as you can to the nearest exit. If you've never heard of or used CSS before and don't know how to load CSS into an HTML page, this resource is also not for you. This article is for the middleground of people who have had to touch CSS a few times here and there but ultimately don't feel like they know what they're doing, or struggle with making basic layouts. #### Topics covered ##### HTML 101 - [HTML Fundamentals](https://www.taniarascia.com/overview-of-css-concepts/#html-fundamentals) ##### CSS 101 - [CSS Syntax](https://www.taniarascia.com/overview-of-css-concepts/#css-syntax) - [CSS Selectors](https://www.taniarascia.com/overview-of-css-concepts/#css-selectors) - [CSS Specificity](https://www.taniarascia.com/overview-of-css-concepts/#css-specificity) - [CSS Properties](https://www.taniarascia.com/overview-of-css-concepts/#css-properties) ##### Working with CSS - [Spacing Out](https://www.taniarascia.com/overview-of-css-concepts/#spacing-out-padding-and-margins) - \`padding\`, \`margin\`, \`border\` - [Box Model](https://www.taniarascia.com/overview-of-css-concepts/#box-model) - \`content-box\` vs. \`border-box\` - [Shorthand Properties](https://www.taniarascia.com/overview-of-css-concepts/#shorthand-properties) - [Layouts: Display](https://www.taniarascia.com/overview-of-css-concepts/#layouts-display) - \`inline\`, \`inline-block\`, \`block\` - [Layouts: Positioning](https://www.taniarascia.com/overview-of-css-concepts/#layouts-positioning) - \`static\`, \`fixed\`, \`absolute\`, \`relative\` - [Layouts: Flex](https://www.taniarascia.com/overview-of-css-concepts/#layouts-flex) - flex containers (\`flex\` display), flex items (\`flex\` property) - [Responsive: Media Queries](https://www.taniarascia.com/overview-of-css-concepts/#responsive-media-queries) - \`min-width\`, \`max-width\` - [Other Considerations](https://www.taniarascia.com/overview-of-css-concepts/#other-considerations) ` } }28:T484,{ if (optionHtml === "none") { return md``; } else { return md` Just as a recap, we'll be talking about how CSS applies to HTML a lot, so make sure you're familiar with what everything is referring to in HTML. - **Tag** - element name (*example:* \`a\`) - **Attribute** - HTML modifiers (*example:* \`href\`) - **Value** - value applied to an attribute (*example:* \`http://tania.dev\`) - **Element** - everything within the HTML tag - attributes, values, and content. Example: \`\`\`html element contents \`\`\` A real example: \`\`\`html Tania's WebRing \`\`\` This will link to my awesome WebRing. ### HTML Reference | Syntax | Example | | :-------- | :------------------------------------------------ | | Tag | \`a\`, \`img\`, \`h1\` | | Attribute | \`href\`, \`src\`, \`alt\` | | Value | \`http://tania.dev\`, \`avatar.png\`, \`Some alt text\` | | Element | \`\` | Now we can move on to CSS. ` } }29:T57e,{ if (optionCssSelectors === "none") { return md``; } else { return md` From **least specific** to **most specific** (more about that below), here are the main types of selectors: - [**Universal selector**](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) - selects all elements - [**Type selector**](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) - targets element(s) by HTML tag (includes [pseudo elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)) - [**Class selector**](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors), [**Attribute selector**](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) - targets element(s) by class or attribute, respectively (includes [pseudo classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)) - [**ID selector**](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) - targets an element by id \`\`\`css * { /* Universal selector */ } tag { /* Type selector */ } tag::before { /* Type selector (psuedo element) */ } .class { /* Class selector */ } .class:hover { /* Class selector (pseudo class) */ } [attr] { /* Attribute selector */ } #id { /* ID selector */ } \`\`\` > **Pseudo elements** have two colons (\`::\`, or \`::before\`) and **pseudo classes** have one colon (\`:\`, or \`:hover\`). ` } }2a:T947,{ if (optionSpec === "none") { return md``; } else { return md` CSS uses a number scale to determine specificity. You can also use [this specificity calculator](https://specificity.keegan.st/) to see how specific an element is. As we know, there are three sections: \`ID\`, \`Class\`, and \`Type\`. In the scale, all are represented by \`0\` initially. | ID | Class | Type | | :--- | :---- | :--- | | 0 | 0 | 0 | Any time your selector contains one of the selectors, you'll increase that bucket by 1. Add a type selector. Only a type selector \`\`\`css h1 { /* 001 */ } \`\`\` | ID | Class | Type | | :--- | :---- | :--- | | 0 | 0 | 1 | Add a class selector. Type selector plus class selector \`\`\`css .container h1 { /* 011 */ } \`\`\` | ID | Class | Type | | :--- | :---- | :--- | | 0 | 1 | 1 | Add an ID selector. Type, class, and ID selector \`\`\`css #landing-page .container h1 { /* 111 */ } \`\`\` | ID | Class | Type | | :--- | :---- | :--- | | 1 | 1 | 1 | You can think of this scale exactly the same as a base-10 number system. If just a tag is \`1\` (one), and a class and type is \`11\` (eleven), and an id, class, and tag is \`111\` (one-hundred and one), which one is the biggest? In this case, \`111\` is the biggest and therefore the most specific. > If you had more than 10 elements in a given bucket, like \`1\` id, \`15\` classes, and \`30\` types, this analogy doesn't work, but you could relate it to semantic numbering systems as well - it would be \`1.15.30\`. However, if you're using that many selectors, something has most likely gone horribly wrong. This means a class is an order of magnitude more specific than a type, and an id is an order of magnitude more specific than a class. In other words, if you had two ids and 0 classes vs. 1 id and 20 classes, the two ids would win. For example: This selector is more specific: (\`200\`, or two-hundred) Two ID selectors \`\`\`css #landing-page #about-section { /* 200 */ } \`\`\` | ID | Class | Type | | :--- | :---- | :--- | | 2 | 0 | 0 | This selector is less specific: (\`140\`, or one-hundred forty) An ID selector and many class selectors \`\`\`css #landing-page .foo.bar.baz.box { /* 140 */ } \`\`\` | ID | Class | Type | | :--- | :---- | :--- | | 1 | 4 | 0 | ` } } 2b:T75e,{ if (optionImportant === "none") { return md `` } else { return md` #### Inline styles An inline style is stronger than any combination of id, class, or type. Inline styles on an element \`\`\`html

I'm red! No selector can override me!

\`\`\` ### Important! Except an \`!important\` keyword on a property can override even that... Important keyword overriding inline styles on an element \`\`\`css div { color: blue !important; }

I've been overridden! I'm blue now!

\`\`\` Please, make very, very sparing use of \`!important\`. It becomes really hard to override. \`!important\` should only be used when absolutely necessary, like styling some third party you have no control over that is using inline styles, and in a few cases with JavaScript toggling display. To summarize, each level of hierarchy from type to \`!important\` is an order of magnitude stronger than the previous one. While \`!important\` is the strongest specificity modifier, an \`!important\` can be overridden by another \`!important\` that is otherwise higher (for example, \`!important\` + ID is stronger than \`!important\` plus class). ### Specificity hierarchy From least specific to most specific: | Selector | Example | Specificity | | :------------------------- | :---------------------------------- | :------------ | | Type selector | \`h1\` | \`0 0 0 1\` | | Class, attribute selectors | \`.class\`, \`[type="text"]\` | \`0 0 1 0\` | | ID selector | \`#contact\` | \`0 1 0 0\` | | Inline style | \`\` | \`1 0 0 0\` | | \`!important\` keyword | \`div { color: green !important }\` | Overrides all | ` } } 2c:Tb92,{ if (optionSpaceout === "none") { return md``; } else { return md` All of your spacing needs will be covered by two properties: \`padding\` and \`margin\`. - [**Padding**](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) is used to pad the inside of an element (*inside of the border*) - [**Margin**](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) is used to separate elements (*outside of the border*) > In Developer Tools, content is represented by blue, padding is represented by green and margins are represented by orange. [![padding1](https://www.taniarascia.com/static/ed32dd9a28dcfcb8fc3a87a64e295ef5/a9e6e/padding1.png)](https://www.taniarascia.com/static/ed32dd9a28dcfcb8fc3a87a64e295ef5/a9e6e/padding1.png) The order of nesting for an element is as follows: - Element content -> \`padding\` -> \`border\` -> \`margin\` So if I were to make an element that was a square with padding and margins, it would look like this: \`\`\`css .square { border: 1px solid gray; padding: 10px; margin: 10px; height: 50px; width: 50px; } \`\`\` [![padding2](https://www.taniarascia.com/static/1d8e8357bedaa65fc8072d1f7853bd9f/0c722/padding2.png)](https://www.taniarascia.com/static/1d8e8357bedaa65fc8072d1f7853bd9f/0c722/padding2.png) A few important notes: - **Margin** is always transparent; **padding** can have a background color - **Margins** collapse into each other; **padding** stacks on top of each other - **Margin** can have negative values; **padding** cannot have negative values - **Padding** adds to the area of an element that can be clicked; **margin** does not - **Padding** (and border) add to the total size of an element; **margin** does not What this means is that margins overlap each other, and padding never will. This comes up a lot in formatting of headings and paragraphs, for example. Using an example of an \`h2\` with a \`10px\` bottom margin and a \`p\` with a \`10px\` top margin, how much of a margin will separate the two elements? \`\`\`html

Heading

Paragraph

\`\`\` We'll see that there is a total \`10px\` margin between them, not \`20px\`. To use a real example, in [this example MVC todo app](https://taniarascia.github.io/mvc/) I made, each todo item is padded, and they're separated from each other by margins. [![padding3](https://www.taniarascia.com/static/cbadd897d97be4880876ac8605ac56ae/d19c0/padding3.png)](https://www.taniarascia.com/static/cbadd897d97be4880876ac8605ac56ae/d19c0/padding3.png) ### Padding vs. margin | Trait | Margin | Padding | | :---------------- | :----------------- | :------------- | | Background color | Always transparent | Set by element | | Collapse or stack | Collapse | Stack | | Negative values | Allowed | Not allowed | | Clickable | No | Yes | ` } } 2d:T896,{ const doc = md` [Box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)! It means one thing: do padding and borders count as part of the element's size, or not? - **Border box** says yes! Borders and padding are part of an element's size! - **Content box** says no! Borders and padding are not part of an element's size! My recommendation? Set \`box-sizing\` to \`border-box\` on everything (\`*\`). Always. Don't even think about it! On the rare occasion something needs to be \`content-box\`, you can override it. This is one of the few things IE got right - making \`border-box\` the default while the rest of the browsers use \`content-box\` as the default. ### Border box vs. content box? Let's use our square example above. With \`content-box\` applied, the element's total size is \`72px * 72px\`: Content box \`\`\`text 50px for content 2px (x) and 2px (y) for four 1px borders 20px for 10px padding all around = 72px square \`\`\` [![content box](https://www.taniarascia.com/static/be0681825820af03138e427aff18c9d8/91d6a/content-box.png)](https://www.taniarascia.com/static/be0681825820af03138e427aff18c9d8/91d6a/content-box.png) With \`border-box\` applied, the element's total size is \`50px * 50px\`. Border box \`\`\`text 28px for content 2px (x) and 2px (y) for four 1px borders 20px for 10px padding all around = 50px square \`\`\` [![border box](https://www.taniarascia.com/static/8c587007336394b95f11c7cbe8144666/719ca/border-box.png)](https://www.taniarascia.com/static/8c587007336394b95f11c7cbe8144666/719ca/border-box.png) If you're giving an element a \`height\` and \`width\` of \`50px\` each, would you prefer the element to be \`50px\` or \`72px\`? The most likely answer is that you want the height and width to match the size of the element. This will become very important when creating layouts, especially flex/grids that are set by percent. You can apply \`border-box\` to all elements like this: \`\`\`css * { box-sizing: border-box; } \`\`\` (Or [this way](https://www.paulirish.com/2012/box-sizing-border-box-ftw/) if you have a specific need for \`content-box\` somewhere.) `; return hide_display(optionBM, doc); } 2e:T75f,{ const doc = md` You see me use \`padding: 5px\` and \`margin: 5px\`. The \`padding\` property, for example, is actually a shorthand for four individual properties: \`\`\`css /* Shorthand property */ div { padding: 5px; } /* Individual properties */ div { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } \`\`\` Usually, you won't have to declare each side separately. In design, we like symmetry, so if you ever end up with a different value for all four sides, something has probably gone quite wrong and you might want to rethink your strategy. - **one** value applies to all four sides (\`padding: 5px\`) - **two** values apply to vertical (top and bottom) and horizontal (left and right) respectively (\`padding: 10px 0\`) - **four** values are applied **clockwise** from top to left (\`padding: 1px 2px 3px 4px\`) This applies to both \`padding\` and \`margin\`. The most common usage of an individual side property is when you're overriding something. For example, an element exists with \`padding: 5px\`, and you want it to have a different padding bottom value. The next most common shorthand applies to \`border\`. You will most commonly see border written like this: \`\`\`css div { border: border-width border-style border-color; } \`\`\` These can be written out individually as well. \`\`\`css div { border: 1px solid black; } /* Can also be written individually */ div { border-color: black; border-width: 1px; border-style: solid; } \`\`\` And just like \`padding\` and \`margin\`, each of these border modifiers has its own side property. \`\`\`css div { border-bottom-color: green; border-bottom-width: 2px; border-bottom-style: dashed; } \`\`\` So actually when you write \`border: 1px solid black\` you're writing shorthand for 12 properties combined. `; return hide_display(optionSP, doc); }2f:Td69,{ const doc = md` There are many \`display\` properties ([see this list](https://developer.mozilla.org/en-US/docs/Web/CSS/display)), but I think the most used and important to know are \`block\`, \`inline\`, \`inline-block\`, \`flex\` and \`none\`. Most elements by default are \`block\`, \`inline\`, or \`inline-block\`. The default \`block\` element is a \`div\`, and the default inline element is a \`span\`. Examples of default elements: - **Inline**: \`span\`, \`strong\`, \`em\`, \`img\` - **Inline-block**: \`button\`, \`select\`, (Chrome only: \`textarea\`, \`input\`) - **Block**: \`div\`, \`p\`, \`nav\`, \`section\` > There a few other obvious, specific ones, such as \`table\` elements having the \`table\` display, and \`li\` having the \`list-item\` display, but you will rarely decide to make some other element have that display type. #### Inline **Inline** elements are usually text formatting based: \`b\` or \`strong\`, which make text bold, or \`i\` and \`em\` which make text italic. They are on the same line - they do not create a new line. Inline elements are usually nested within block elements. Horizontal and vertical padding and margins are applied as expected, but vertical margins are not applied at all, and vertical padding is ignored by other elements. Inline element behavior \`\`\`html content content...span..content content span { /* inline by default */ padding: 15px; margin: 15px; } \`\`\` [![inline](https://www.taniarascia.com/static/a1b067d7decb06300dd160643244b4a1/4d3f1/inline.png)](https://www.taniarascia.com/static/a1b067d7decb06300dd160643244b4a1/e98df/inline.png) To be safe, inline elements should only be used for text formatting. #### Inline block **Inline-block** elements are like inline elements, except they can have vertical and horizontal padding and margins. They also appear next to each other horizontally by default, and do not stack on new lines. \`\`\`css span { display: inline-block; padding: 15px; margin: 15px; } \`\`\` [![inline block](https://www.taniarascia.com/static/714dbd3d90b7123fee7b4ac1c46e166f/4d3f1/inline-block.png)](https://www.taniarascia.com/static/714dbd3d90b7123fee7b4ac1c46e166f/d7a69/inline-block.png) #### Block **Block** elements span the full width of their containing element, and stack on top of each other in new lines of the document. Block element behavior \`\`\`html content content...

div

..content content \`\`\` [![block element](https://www.taniarascia.com/static/c6c21c4df290719c73e7f5b98ae42988/4d3f1/block-element.png)](https://www.taniarascia.com/static/c6c21c4df290719c73e7f5b98ae42988/9d4f3/block-element.png) #### None An element with **none** applied will not appear in the document at all. This is most commonly used for hiding/displaying content for mobile. ### Display Reference | Display | Behavior | | :------------- | :----------------------------------------------------------- | | \`inline\` | used primarily for text formatting, appear next to each other horizontally | | \`inline-block\` | appear next to each other horizontally with vertical padding and margins applied | | \`block\` | spans the full width of the container, stack vertically | | \`none\` | does not appear in the document | `; return hide_display(optionLD, doc); }30:T1f4a, md` The `position` property, while important, is not what you should be using for the majority of layout related decisions. Changing `position` from it's default value (`static`) should be reserved for a few specific situations. There are three that are mainly used: `fixed`, `absolute`, and `relative`. A positioned element is affected by `top`, `left`, `right`, `bottom` and `z-index`. ### Normal flow If you do not modify the `position` of any element, everything pertains to the [Normal flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow) of the document. All this means is that: - block level elements will take up the **full width** of their **container**, and the height of their content - block level elements will stack on top of each other vertically, from top to bottom - inline elements are as tall and wide as their content - all elements are aware of each other, and margins will collapse ### Static The default state of `position` is `static`. It means your element stays in the normal flow of the document. If you have three static `div`s next to each other, they will all be aware of each other and stack on top of each other. ```html

div

div { border: 1px solid black; padding: 15px; margin: 15px; } ``` [![div](https://www.taniarascia.com/static/16af13724d9ba12965e46d368101476b/4d3f1/div.png)](https://www.taniarascia.com/static/16af13724d9ba12965e46d368101476b/9199c/div.png) `static` elements are not positioned, and therefore not affected by `top`, `left`, `right`, `bottom`, or `z-index`. > **Note:** Just because elements have a `static` position does not always mean they will stack each other vertically. The `display` property might modify this, with `inline-block`, `grid`, or `flex`, but they will still be part of the regular document flow and other elements will be aware of them. ### Fixed A `fixed` element is the easiest position to understand: it is always visible and positioned according to the viewport. A few common uses of `fixed` positioning: - a stick-to-top **navigation bar** - a **back to top** button in the bottom right of the screen - a **popup modal** that is in the center of the viewport ```css nav { position: fixed; } ``` A few things to know about `fixed` elements: - their position on the screen is determined by `top`, `left`, `right`, and `bottom` properties. `top: 0` means it will stick to the top of the viewport, and `top: 10px` means it will be `10px` from the top of the viewport - other elements are **not aware** of the existence of a `fixed` element. This generally means you must account for the space they would occupy by **adding margins** to the elements around them. - `fixed` elements are no longer part of the flow and do not have a containing element, and therefore do not expand to fill their container like a normal (block) element would. This means if all we do is set our `nav` to fixed with no other properties, it will not expand the full width of the viewport. ```html

div

div { border: 1px solid black; padding: 15px; margin: 15px; background: white; } nav { position: fixed; background: gray; } ``` [![nav](https://www.taniarascia.com/static/e8e5eff5e855842eef21a32d93c752cc/4d3f1/nav.png)](https://www.taniarascia.com/static/e8e5eff5e855842eef21a32d93c752cc/65d02/nav.png) So we can update it to be full width, and stick to the top and left of the viewport: ```css nav { position: fixed; top: 0; left: 0; padding: 20px; width: 100%; background: gray; z-index: 2; } ``` [![nav2](https://www.taniarascia.com/static/e41dd6f0f3aeccb88f276085f1508f9e/4d3f1/nav2.png)](https://www.taniarascia.com/static/e41dd6f0f3aeccb88f276085f1508f9e/a0d55/nav2.png) We're adding the `z-index` property, which affects the z-axis of the element. Since we intend this element to always be completely visible, we give it a `z-index` greater than `0` to ensure it's always "above" any element in our document. As we can see, there's one last issue, which is that the `nav` is overlapping the content. As mentioned previously, you *must* add space (margins) to `static` elements to make space for the `fixed` element. Simply adding a `margin-bottom` to the `nav` won't have any effect. ```html

div

section { margin-top: 80px; } ``` [![nav3](https://www.taniarascia.com/static/dc89f59585ed11cbda5417582da73e70/4d3f1/nav3.png)](https://www.taniarascia.com/static/dc89f59585ed11cbda5417582da73e70/a5d5c/nav3.png) So now we have that all taken care of and `fixed` positioning should make sense. ### Absolute and relative `absolute` and `relative` positions go hand in hand. Take everything you just learned about `fixed` elements and apply them to `absolute` elements. They behave almost exactly the same: other elements don't know about `absolute` elements, they're affected by the directional properties and `z-index`. The difference is instead of being positioned relative to the viewport (browser window), they're positioned relative to the nearest element that is not `static` - so a `fixed`, `absolute`, or `relative` element. `relative` elements, on the other hand, behave almost exactly the same as a `static` element - they are part of the document flow, and simply setting `relative` to an element will not change its appearance at all. The difference is a `relative` element *can* use the directional properties - `top`, `left`, `right`, and `bottom`. However, the most common usage of `relative` and `absolute` is that a `relative` element is treated as `static`, but as an **anchor point** for some other `absolute` element. I'll make an example with a `section` (red) that has a nested `div` (blue). ```html

section

div

``` With no positioning applied, the `div` is contained inside of the `section`. [![absolute1](https://www.taniarascia.com/static/973437fb2fd3a20a41e6e37a67b4f24f/4d3f1/absolute1.png)](https://www.taniarascia.com/static/973437fb2fd3a20a41e6e37a67b4f24f/a3bc3/absolute1.png) Now imagine I have a bunch of card elements that are always `100px` tall, regardless of the content contained within, and I want a button to always exist at the same spot on the bottom right. Using `relative` and `absolute`, the `div` will always be in the same spot on any card. ```css section { position: relative; height: 100px; } div { position: absolute; bottom: 15px; right: 15px; } ``` [![absolute2](https://www.taniarascia.com/static/59ad2d1e21bdc78cb2d2852ef0b95d85/4d3f1/absolute2.png)](https://www.taniarascia.com/static/59ad2d1e21bdc78cb2d2852ef0b95d85/e3c01/absolute2.png) To summarize, use `relative` when you want something else to be anchored to an element but you don't want that element itself to move or be affected at all, and use `absolute` on the element to be anchored. A common usage of this is card-like elements. This [card element](https://taniarascia.github.io/card/) is an example of absolute coming in handy to make sure they're always the same size but the buttons line up. [![absolute3](https://www.taniarascia.com/static/3fe8f91943c60678bd9cc4040f942904/4d3f1/absolute3.png)](https://www.taniarascia.com/static/3fe8f91943c60678bd9cc4040f942904/b054d/absolute3.png) ### Positioning Reference | Position | Behavior | In Document Flow | | :--------- | :----------------------------------------------------------- | :--------------- | | `static` | default behavior; elements stack in order and are aware of each other | Yes | | `relative` | positioned relative to its original position in the flow | Yes | | `fixed` | positioned relative to the viewport | No | | `absolute` | positioned relative to closest non-static (`fixed`, `relative`, `absolute`) element | No | `31:[] 25:{"id":"97803e0bc7a69387","slug":"css-an-art-a-science-a-nightmare-everything-you-should-know","title":"CSS: An Art, a Science, a Nightmare (Everything You Should Know)","thumbnail":"665eb3df815906103acf541ac4d37cad6fb7ca7d52837c270d1af8204999d8fa","access_level":"public","create_time":"$D2019-12-11T03:13:32.551Z","update_time":"$D2019-12-12T03:00:40.612Z","view_time":null,"first_public_time":"$D2019-12-11T08:20:01.111Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7a6719735624fc09","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":"starter_2024"},"version":349,"publish_version":349,"role":null,"authored":false,"authors":[{"type":"individual","id":"663c75dba82999cc","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":null}],"members":[{"type":"individual","id":"663c75dba82999cc","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CSS: An Art, a Science, a Nightmare (Everything You Should Know)","cells":[{"id":0,"value":"md`# CSS: An Art, a Science, a Nightmare (Everything You Should Know)\n\na great post by the amazing Tania Rascia https://www.taniarascia.com/overview-of-css-concepts/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof optionIntro = DOM.select([\"none\", \"doc\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`## HTML Fundamentals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof optionHtml = DOM.select([\"none\", \"doc\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`## CSS Syntax`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof optionCssSyntax = DOM.select([\"none\", \"doc\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"{\n if (optionCssSyntax === \"none\"){\n return md``;\n } else {\n return md`\n\n\n\nThere are three main parts of CSS - selectors, properties, and values.\n\n- **Selectors** - the element(s) being selected\n- **Properties** - the aspect of the element being styled\n- **Values** - the style being applied\n\nExample:\n\n\\`\\`\\`css\nselector {\n property: value;\n}\n\\`\\`\\`\n\nA real example:\n\n\\`\\`\\`css\nh1 {\n color: blue;\n}\n\\`\\`\\`\n\nThis will make all \\`h1\\` elements blue.\n\n`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`## CSS Selectors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof optionCssSelectors = DOM.select([\"none\", \"doc\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md `### CSS and JavaScript`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof optionCssJS = DOM.select([\"none\", \"doc\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"{\n if (optionCssJS === \"none\") {\n return md``;\n } else {\n return md`\n\n\n\nNote that even if you don't care much about CSS, learning about selectors will help you write (vanilla) JavaScript, as the DOM selectors in a JavaScript document query are the same.\n\nThis query to get all elements that match a selector:\n\n.js\n\n\\`\\`\\`js\ndocument.querySelectorAll('article h2')\n\\`\\`\\`\n\nTargets all the same elements as this CSS to style all elements that match a selector:\n\n.css\n\n\\`\\`\\`css\narticle h2 {\n}\n\\`\\`\\`\n\n> **Note:** All selectors may target one or more elements except IDs, which can only apply to a single element.\n\n\n`\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"html`\n

I am an article-h3

I am another article-h3

I'm targeted

\n\\`\\`\\`\n\nThe second one targets a \\`bar\\` that is a descendent of a \\`foo\\`.\n\n.foo .bar example\n\n\\`\\`\\`css\n.foo .bar {\n /* with a space */\n}\n

I'm targeted

\n\\`\\`\\`\n\nThere are other selectors that can be used instead of a space to modify the selector, such as \\`>\\`, \\`+\\`, and \\`~\\`. These all have different meanings. They are not used incredibly often so you can learn them as needed.\n\n\n`\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"html`\n\n

I'm targeted

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`### Selector Reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"viewof optionRef = DOM.select([\"none\", \"doc\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"{\n if (optionRef === \"none\") {\n return md``;\n } else {\n return md`\n\n\n| Selector | Targets | Example |\n| :----------------- | :---------------------- | :-------------------------------------------------- |\n| Universal selector | All elements | \\`*\\` |\n| Type selector | Tags, pseudo elements | \\`h1\\`, \\`div\\`, \\`li::before\\` |\n| Class selector | Classes, pseudo classes | \\`.page-header\\`, \\`.page-content\\`, \\`.list-item:hover\\` |\n| Attribute selector | Attributes | \\`[alt]\\`, \\`[type=\"text\"]\\`, \\`[lang=\"en\"]\\` |\n| ID selector | IDs | \\`#toggle\\`, \\`#getting-started\\`, \\`#about\\` |\n\n\n\n`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`\n\n## CSS Specificity\n\nWhat does \"specificity\" mean in CSS?\n\n### Order\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof optionOrder = DOM.select([\"none\", \"doc\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"{\n if (optionOrder === \"none\") {\n return md``;\n } else {\n return md`\nFirst, all things being equal, the order in which you use two selectors in the stylesheet matters. So if we have a stylesheet with two classes:\n\nComparing two selectors weighted equally\n\n\\`\\`\\`css\n.foo {\n color: blue;\n}\n\n.bar {\n color: red;\n}\n\\`\\`\\`\n\nand you have both of those classes on the same element:\n\nAn example of one element using both selectors\n\n\\`\\`\\`html\n

What color am I?

\n\\`\\`\\`\n\n...then the one closest to the bottom wins. So in this case, the element's color is red, because \\`.bar\\` appears closest to the bottom of the stylesheet.\n`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"html`\n

What color am I?

I've been overridden! I'm red now!

I've been overridden! I'm blue now!

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`---\n## CSS Properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof optionProps = DOM.select([\"none\", \"doc\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"{\n if (optionProps === \"none\") {\n return md``;\n } else {\n return md`\n\nHere's a list of all properties that I think are absolutely essential to knowing CSS. The equivalent of knowing the most basic verbs and nouns in English that you can get by with.\n\nThe minimum to be able to do anything:\n\n- \\`padding\\`, \\`margin\\`, \\`border\\`\n- \\`background\\`\n- \\`color\\`, \\`font-family\\`, \\`font-weight\\`, \\`font-size\\`, \\`line-height\\`\n- \\`width\\`, \\`height\\`, \\`max-width\\`, \\`max-height\\`\n\nLayout essentials:\n\n- \\`position\\`, \\`z-index\\`, \\`top\\`, \\`right\\`, \\`bottom\\`, \\`left\\`\n- \\`display\\`, \\`flex\\`, \\`align-items\\`, \\`justify-content\\`\n- \\`@media\\`\n\nGood to know, but not quite as essential as the rest:\n\n- \\`grid\\`, \\`grid-template-columns\\`, \\`grid-template-rows\\`\n- \\`transform\\`, \\`transition\\`\n\nWe'll go into these more in a moment. Now we should have enough of the basics down to discuss some applications of the knowledge.\n`\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`## Spacing Out: Padding and Margins`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof optionSpaceout = DOM.select([\"none\", \"doc\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"html`

Heading

Paragraph

\n` // open devtools to see the padding and margin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`\n---\n## Box Model`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"viewof optionBM = DOM.select(none_doc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`\n---\n## Shorthand Properties\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"viewof optionSP = DOM.select(none_doc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"md`---\n## Layouts: Display\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"viewof optionLD = DOM.select(none_doc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`---\n## Layouts: Positioning\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"viewof optionLP = DOM.select(none_doc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`---\n## imports and utils\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"viewof c = color()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"import {color} from \"@embracelife/tutorial-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"viewof optionTry = DOM.select(none_doc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"{\n const doc = md`my docs`;\n return hide_display(optionTry, doc);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"none_doc = [\"none\", \"doc\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"function hide_display(option, doc) {\n if (option === \"none\") {\n return md``;\n } else {\n return doc;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`### Todos\n\n- mark a section to be revisited and send it to the top of the notebook\n- mark a section and record the number of times it has been reviewed\n\nReact can rescue here!!!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 26:"$25:body"