25:["$","title",null,{"children":"CSS | jpt | Observable"}] 49:Tb9b,

Web Languages: CSS

James

This is a post that explains CSS.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

4a:T78f,## Positioning CSS is an incredibly robust & comprehensive tool. As with most web things, MDN is the best resource for learning CSS & looking up properties. While this guide can't cover most attributes, it is worth understanding the various positioning options available to you. ### Screen Coordinates Screen coordinates in computer graphics typically place (0, 0) the **upper left** corner, with a Y axis that is inverted from what you may expect: ![](https://kagi.com/proxy/images?c=_m3km2RjA3G0qleowsZXHZb9NEn0fSsEYIHbKzMDyAFb4nUPIanknmQV_g0rmdCI57w4qKw3t1Q7t2fZMzM8INHC-Vrui0ZlO9LJwB1b_7ajhT4kc_BZb3zWBNBLjT7_eoe9JYMFUM_Mkl0InwUafg%3D%3D) ### CSS Box Model [The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) describes how each element can control the display of its immediate area. Every element has a content area, defined by the content itself and properties like `width` and `height`. In addition, from closest to the content heading out: - padding: elements can define padding on their top, bottom, left, and right sides. This creates a buffer between the content and any border. - border: as seen in examples above, can be used to define a drawn line on any/all of the four sides of the box. - margin: similar to padding, but outside the border, creates spacing between this element and adjacent ones. ![](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model/box-model.png ### Absolute vs. Relative Positioning By default, coordinates are relative to the parent element: If a `

` is positioned at (100, 100). An element within it positioned at (10, 10) would wind up at screen coordinates (110, 110). It is possible to create elements that are fixed on the page using absolute positioning as well, see for examples. )4b:T84e,## Where does the CSS go? There are three ways to add CSS to your HTML. We've seen two: - adding `style` attributes directly to elements for specific overrides. - adding a `","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"## \"Modern\" CSS Positioning: Flexbox & Grid\n\nIn the last decade, CSS has evolved two new layout models, `display: flex;` and `display: grid;`\n\nFlexbox is a model that allows defining how elements reflow within their parent element\n\n\n\nGrid does what the name says, it provides a way to create a consistent grid, where a parent element is divided into proportional columns and/or rows.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null