WebDev HTML Elements

1.0 - Cascading Style Sheets

Cascading Style Sheets (CSS) provide a declarative language used to control presentation and design of web pages. HTML provides structure and semantic meaning of content, CSS defines how that content looks: its colors, layout, typography, spacing, and overall visual style.

By separating content from presentation, CSS makes it possible to maintain clean code and apply consistent design across many pages at once. For example, you can define font family, size, and color for all paragraphs in a single stylesheet instead of repeating the same attributes in every HTML element.

CSS works with selectors and rules. A selector targets specific elements in a page's HTML such as all <h1> headings, or a <div> with a certain class and applies a set of declarations to them.

Each declaration consists of a property (like color or margin) and a value (like blue or 20px). Then browser page build interprets the rules and renders content accordingly. Because multiple rules can apply to the same element, CSS uses a system called specificity and a cascading order to determine which rule takes precedence.

CSS provides powerful layout systems. The Flexbox module is designed for one-dimensional layouts, arranging items along a single row or column and making it easy to align and distribute space dynamically. The Grid module is built for two-dimensional layouts, allowing authors to define rows and columns simultaneously and place items in precise areas. Together, these systems support creation of responsive designs that adapt to different screen sizes and devices without relying heavily on fixed pixel dimensions.

Modern CSS also supports advanced features like custom properties (CSS variables), media queries for responsive design, transitions and animations for interactivity, and functions like clamp() and minmax() for fluid layouts. This makes it a central tool for building accessible, visually appealing, and adaptable websites.

This page's contents focus on CSS with an opening summary definition. Specific details are presented in a set of boxes with dropdown details, one for each topic area like selectors and flex containers.

CSS Definition

Cascading Style Sheets (CSS3) specifications, CSS3 specification - MDN

Cascading Style Sheets (CSS) provide a declarative language for specifying styles to apply to HTML elements. Each style is a list of key-value pairs. Styles are applied based on selectors that identify particular HTML elements or classes of elements. Style Sheets are collections of styles of the form:

  selectors { style-property : value; ... }

  example: body { padding:5%; background-color: #ddd; }

Selectors are combinations of:

  htmltags:         body, div, span, img, ...
  custom-tags:      nav-keys, spacer-10, ... 
  .classnames:      .indent, .undent, .photo, ...
  #idnames:         #placeHolder, #mastheadPhoto, ...
  psuedo-classes:   a:link, a:hover, ...
  psuedo-elements:  p::first-letter, p::first-line, ...  
  attributes:       [attr], [attr=value], ...

Selectors can be combined:

  s1, s2, ...      applied to s1 and s2 and ...
  s1 s2            applied to s2 if it has s1 ancestor
  s1 > s2          applied to s2 if it has s1 parent
  s1 + s2          applied to s2 if it has adjacent sibling s1
  s1 ~ s2          applied to s2 if it has sibling s1

Examples:

  ol, ul { margin-top:10px; margin-bottom: 10px; }  // all ordered and unordered lists
  div li { background-color: #dddddd; }             // all list items with div ancestor 
  div.indent > p { color: #333333; }                // all paragraphs that are children
                                                    //   of div with class indent

Note: If any part of a style specification is invalid, the whole specification is invalid and will not be applied to it's selectors. So styles can silently fail.

CSS styles are key : value pairs like { display: block }. As an example, consider a user-defined HTML element "<t-b>". That defines a block of text with a maximum of 60 characters per line. I've defined it entirely in CSS:

t-b {
  display: block;
  max-width: 60ch;
  margin-bottom: 0.75rem;
}

and use it like a paragraph that limits line length for readability. The text you are reading was inserted in a <t-b> block.

CSS Styles

Group	Property / Context	Predefined CSS Keywords (aka “built-in styles”)
Global values (work on almost all properties)
Global	(any property)	`inherit`, `initial`, `unset`, `revert`, `revert-layer`
Layout: display & positioning
Display	`display`	`none`, `contents`, `block`, `inline`, `inline-block`, `list-item`, `flow-root`, `table`, `inline-table`, `table-row`, `table-cell`, `flex`, `inline-flex`, `grid`, `inline-grid`, `ruby`
Positioning	`position`	`static`, `relative`, `absolute`, `fixed`, `sticky`
Overflow	`overflow`	`visible`, `hidden`, `clip`, `scroll`, `auto`
Visibility	`visibility`	`visible`, `hidden`, `collapse`
Box sizing	`box-sizing`	`content-box`, `border-box`
Borders, outlines & text decoration
Border/Outline style	`border-style`, `outline-style`	`none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`
Text decoration style	`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`
Text decoration line	`text-decoration-line`	`none`, `underline`, `overline`, `line-through`
Backgrounds & images
Background repeat	`background-repeat`	`repeat`, `repeat-x`, `repeat-y`, `no-repeat`, `space`, `round`
Background attachment	`background-attachment`	`scroll`, `fixed`, `local`
Background size	`background-size`	`auto`, `cover`, `contain`
Object fit	`object-fit`	`fill`, `contain`, `cover`, `none`, `scale-down`
Typography
Generic families	`font-family`	`serif`, `sans-serif`, `monospace`, `cursive`, `fantasy`, `system-ui`, `ui-serif`, `ui-sans-serif`, `ui-monospace`, `ui-rounded`, `emoji`, `math`, `fangsong`
Font style	`font-style`	`normal`, `italic`, `oblique` (`oblique <angle>` optional)
Font weight	`font-weight`	`normal` (400), `bold` (700), `lighter`, `bolder`, `100`–`900`
Font stretch	`font-stretch`	`ultra-condensed`, `extra-condensed`, `condensed`, `semi-condensed`, `normal`, `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`
Font kerning	`font-kerning`	`auto`, `normal`, `none`
Text transform	`text-transform`	`none`, `capitalize`, `uppercase`, `lowercase`, `full-width`, `full-size-kana`
Text align	`text-align`	`start`, `end`, `left`, `right`, `center`, `justify`, `match-parent`
White space	`white-space`	`normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line`, `break-spaces`
Word break	`word-break`	`normal`, `break-all`, `keep-all`, `break-word` (legacy alias)
Hyphens	`hyphens`	`none`, `manual`, `auto`
Text overflow	`text-overflow`	`clip`, `ellipsis`
Lists
List style type	`list-style-type`	`none`, `disc`, `circle`, `square`, `decimal`, `lower-roman`, `upper-roman`, `lower-alpha`, `upper-alpha` (and many others)
List position	`list-style-position`	`inside`, `outside`
Floats & clears
Float	`float`	`inline-start`, `inline-end`, `left`, `right`, `none`
Clear	`clear`	`inline-start`, `inline-end`, `left`, `right`, `both`, `none`
Writing modes
Writing mode	`writing-mode`	`horizontal-tb`, `vertical-rl`, `vertical-lr`
Text direction	`direction`	`ltr`, `rtl`
Text orientation	`text-orientation`	`mixed`, `upright`, `sideways`
Table layout
Border collapse	`border-collapse`	`separate`, `collapse`
Table layout	`table-layout`	`auto`, `fixed`
Empty cells	`empty-cells`	`show`, `hide`
Effects & misc
Pointer events	`pointer-events` (HTML content)	`auto`, `none`
Image rendering	`image-rendering`	`auto`, `crisp-edges`, `pixelated`
Mix blend mode	`mix-blend-mode`	`normal`, `multiply`, `screen`, `overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`, `hue`, `saturation`, `color`, `luminosity`
Filter	`filter` (keyword)	`none` (otherwise uses functions like `blur()`, `grayscale()`)
Caret color	`caret-color`	`auto` (or any color)
Resize	`resize`	`none`, `both`, `horizontal`, `vertical`, `block`, `inline`
Outline width	`outline-width`	`thin`, `medium`, `thick`
Cursor	`cursor` (common)	`auto`, `default`, `pointer`, `text`, `move`, `wait`, `crosshair`, `not-allowed`, `help`, `progress` …

Selectors can target elements based on tagname, class, id, attribute, layout order, and meta descriptors like :hover and :first-child.

Selectors

Name	Description	Example
Universal (*)	Selects all elements	`* { margin:0; }`
Type (element)	Selects all instances of an element	`p { color:blue; }`
Class (.class)	Selects elements with a given class	`.note { font-style:italic; }`
ID (#id)	Selects a single element with the given ID	`#header { background:gray; }`
[attr]	Elements with the given attribute	`[title] { border:1px solid; }`
[attr=value]	Elements where attr equals value	`input[type="text"] { width:200px; }`
[attr^=value]	Attr value starts with given string	`a[href^="https"] { color:green; }`
[attr$=value]	Attr value ends with given string	`a[href$=".pdf"] { color:red; }`
[attr*=value]	Attr value contains given substring	`[class*="warning"] { color:orange; }`
Descendant (A B)	Selects B inside A (any level)	`div p { line-height:1.5; }`
Child (A > B)	Selects B if it is a direct child of A	`ul > li { list-style:none; }`
Adjacent sibling (A + B)	Selects B if immediately after A	`h1 + p { font-size:1.2em; }`
General sibling (A ~ B)	Selects B if preceded by A (not necessarily adjacent)	`h1 ~ p { color:gray; }`
:hover	Element under mouse pointer	`a:hover { text-decoration:underline; }`
:first-child	First child of its parent	`p:first-child { font-weight:bold; }`
:last-child	Last child of its parent	`p:last-child { color:blue; }`
:nth-child(n)	nth child of its parent (pattern)	`li:nth-child(2n) { background:#eee; }`
:not(selector)	Excludes elements matching selector	`p:not(.note) { color:black; }`
:checked	Checked form elements (radio, checkbox)	`input:checked { outline:2px solid blue; }`
::before	Content inserted before element’s content	`p::before { content:"→ "; }`
::after	Content inserted after element’s content	`p::after { content:" ★"; }`
::first-line	Styles only the first line of text	`p::first-line { font-weight:bold; }`
::first-letter	Styles only the first letter	`p::first-letter { font-size:2em; }`
::selection	Styles text selected by user	`::selection { background:yellow; }`

CSS user-select, Css display property, HTML DOM parentElement property

Selector combinations can get complicated. The browser defines some default styles, libraries used by the page may style some specific elements, and the page may apply styles from a block and also inline styles.

That means that an HTML element may have several conflicting style declarations. These can lead to designs that don't seem to work as expected.

Conflicts can often be sorted out by using borders and background-colors to visualize an element's design. Also browser web tools have inspectors that identify which CSS rules are being applied. To use them you have to sort through the page's elements to find the right one.

Selector Combinations

Rule	Description	Example
Importance	Declarations marked with `!important` override all other rules (except inline styles also marked `!important`). Should be used sparingly.	`p { color:blue !important; }`
Origin	Styles come from different origins: User agent (browser default) User styles (if defined) Author styles (your CSS) Author styles normally override user-agent defaults.	`body { margin:0; }` overrides browser’s default margin.
Specificity	Each selector has a "weight": Inline styles: highest (1000) ID selectors: 100 Class/attribute/pseudo-class: 10 Type/pseudo-element: 1 More specific selectors override less specific ones.	`#id { }` beats `.class { }` `div.note { }` beats `div { }`
Source Order	If selectors have the same specificity and importance, the later rule in the CSS file wins.	`p { color:red; }` `p { color:blue; }` → Paragraph text is blue
Cascade	The overall process combining all the above (importance → origin → specificity → order) to decide the final style applied.	Think: "last resort tiebreaker is order"
Inheritance	Some properties (like `font`, `color`) are inherited from parent to child by default. Others (like `margin`, `border`) are not.	`body { color:green; }` → all child text is green unless overridden

Element.classList is defined in the DOM standard and is available on all Element objects. It manages, at run-time, the element's class attribute as a tokenized list.

It is commonly used in JavaScript to add or remove a class from an element. The "Pages" button, below, uses classList to toggle the "hidden" class of a container of page links.

classList

Kind	Member (signature)	Returns / Type	Notes / Small example
Element property
Property	`element.classList`	`DOMTokenList`	Tokenized view of the element’s `class` attribute.
DOMTokenList methods (used via `element.classList`)
Method	`add(...tokens)`	`void`	`el.classList.add('active','wide')`
Method	`remove(...tokens)`	`void`	`el.classList.remove('hidden','wide')`
Method	`toggle(token[, force])`	`boolean`	Returns true if present after call. `el.classList.toggle('open', true)`
Method	`replace(oldToken, newToken)`	`boolean`	`el.classList.replace('old','new')`
Method	`contains(token)`	`boolean`	`el.classList.contains('active')`
Method	`item(index)`	`string \| null`	`el.classList.item(0)` → first class or `null`
Method	`forEach(callback[, thisArg])`	`void`	`el.classList.forEach(c => console.log(c))`
Method	`entries()`	`Iterator<[index, token]>`	`for (const [i,t] of el.classList.entries()) {...}`
Method	`keys()`	`Iterator<index>`	`[...el.classList.keys()]`
Method	`values()`	`Iterator<token>`	`[...el.classList.values()]`
Method	`toString()`	`string`	Space-separated classes. `el.classList.toString()`
Method*	`supports(token)`	`boolean`	*Only applies to token lists with defined supported tokens (e.g., `link.relList`), not typical `classList`.
DOMTokenList properties
Property	`length`	`number`	Count of tokens. `el.classList.length`
Property	`value`	`string`	Get/set space-separated value. `el.classList.value = 'a b c'`

Web page positions can be measured in pixels (px), relative to font-size (em), width of letter "o" (ch), percentage of viewport size (vw, vh), and many more.

In this site I use rem, vh, vw, dvh, dvw, %, and occasionally px.

Units of Measure

Unit	Category	Description / Example
px	Absolute length	Pixels (CSS reference pixels). Example: `width:200px;`
cm, mm, in	Absolute length	Centimeters, millimeters, inches. Example: `margin:1in;`
pt, pc	Absolute length	Points (1/72 inch), picas (12pt = 1pc). Example: `font-size:12pt;`
em	Relative length	Relative to element font size. Example: `padding:2em;`
rem	Relative length	Relative to root element font size. Example: `font-size:1.5rem;`
ex	Relative length	Height of lowercase “x”. Example: `line-height:2ex;`
ch	Relative length	Width of “0” glyph. Example: `width:40ch;`
vw, vh	Relative to viewport	1% of viewport width/height. Example: `height:100vh;`
vmin, vmax	Relative to viewport	1% of smaller/larger viewport dimension. Example: `font-size:5vmin;`
%	Relative	Relative to parent property context. Example: `width:50%;`
deg	Angle	Degrees. Example: `transform:rotate(45deg);`
rad	Angle	Radians (2π = full circle). Example: `rotate(1.57rad);`
grad	Angle	Gradians (400 = full circle). Example: `rotate(100grad);`
turn	Angle	Turns (1 = full circle). Example: `rotate(.5turn);`
s, ms	Time	Seconds / milliseconds. Example: `transition:all 300ms;`
dpi, dpcm, dppx	Resolution	Dots per inch, centimeter, or CSS pixel. Example: `@media (min-resolution:2dppx)`
calc()	Functional	Performs math. Example: `width:calc(100% - 2rem);`
min(), max(), clamp()	Functional	Choose or constrain values. Example: `font-size:clamp(1rem, 2vw, 2rem);`
dvh, dvw	Relative to dynamic viewport	1% of the current viewport height/width. Adjusts automatically as browser UI appears/disappears. Example: `main { min-height:100dvh; }`
lvh, lvw	Relative to large viewport	1% of the largest possible viewport height/width. Ignores dynamic UI like mobile address bars (represents max available space). Example: `header { height:100lvh; }`
svh, svw	Relative to small viewport	1% of the smallest possible viewport height/width. Includes any space taken by dynamic UI (represents min available space). Example: `aside { height:100svh; }`
dvmin, dvmax	Relative to dynamic viewport	1% of the smaller/larger of `dvh` and `dvw`. Useful for responsive scaling. Example: `section { font-size:5dvmin; }`

Of the three platforms: Windows 11, macOS, and Linux, most of the system fonts are not shared with the other two. If you want to make browser text rendering as consistent as possible, use one of the imported font libraries.

Right now, I'm using the Google fonts.

Selection of Google Fonts

Font Family	Sample Text
Roboto	These are fonts from the googleapis --- 0123456789
Open Sans	These are fonts from the googleapis --- 0123456789
Lato	These are fonts from the googleapis --- 0123456789
Montserrat	These are fonts from the googleapis --- 0123456789
Inter	These are fonts from the googleapis --- 0123456789
Source Sans Pro	These are fonts from the googleapis --- 0123456789
Varela Round	These are fonts from the googleapis --- 0123456789
Nunito	These are fonts from the googleapis --- 0123456789
Poppins	These are fonts from the googleapis --- 0123456789
Rubik	These are fonts from the googleapis --- 0123456789
Work Sans	These are fonts from the googleapis --- 0123456789
Barlow	These are fonts from the googleapis --- 0123456789
Oswald	These are fonts from the googleapis --- 0123456789
Anek Devanagari	These are fonts from the googleapis --- 0123456789
Noto Sans	These are fonts from the googleapis --- 0123456789
Playfair Display	These are fonts from the googleapis --- 0123456789
Source Serif Pro	These are fonts from the googleapis --- 0123456789
Alegreya	These are fonts from the googleapis --- 0123456789
Merriweather	These are fonts from the googleapis --- 0123456789
Bitter	These are fonts from the googleapis --- 0123456789

System Fonts

Font Name	Sample
Windows 11
Segoe UI Variable	system fonts --- 0123456789
Segoe UI	system fonts --- 0123456789
Calibri	system fonts --- 0123456789
Cambria	system fonts --- 0123456789
Georgia	system fonts --- 0123456789
Arial	system fonts --- 0123456789
Verdana	system fonts --- 0123456789
Tahoma	system fonts --- 0123456789
Trebuchet MS	system fonts --- 0123456789
Consolas (mono)	system fonts --- 0123456789
Courier New (mono)	system fonts --- 0123456789
macOS
-apple-system (San Francisco)	system fonts --- 0123456789
Helvetica Neue	system fonts --- 0123456789
Helvetica	system fonts --- 0123456789
Arial	system fonts --- 0123456789
Avenir	system fonts --- 0123456789
Georgia	system fonts --- 0123456789
Times	system fonts --- 0123456789
Menlo (mono)	system fonts --- 0123456789
Monaco (mono)	system fonts --- 0123456789
Ubuntu Linux
Ubuntu	system fonts --- 0123456789
Ubuntu Condensed	system fonts --- 0123456789
Ubuntu Mono (mono)	system fonts --- 0123456789
DejaVu Sans	system fonts --- 0123456789
DejaVu Serif	system fonts --- 0123456789
DejaVu Sans Mono (mono)	system fonts --- 0123456789
Noto Sans	system fonts --- 0123456789
Noto Serif	system fonts --- 0123456789
Cantarell	system fonts --- 0123456789

Generic Fonts

Generic Family	Sample
system-ui	generic fallback fonts --- 0123456789
ui-sans-serif	generic fallback fonts --- 0123456789
ui-serif	generic fallback fonts --- 0123456789
ui-monospace	generic fallback fonts --- 0123456789
ui-rounded	generic fallback fonts --- 0123456789
sans-serif	generic fallback fonts --- 0123456789
serif	generic fallback fonts --- 0123456789
monospace	generic fallback fonts --- 0123456789
cursive	generic fallback fonts --- 0123456789
fantasy	generic fallback fonts --- 0123456789
emoji	generic fallback fonts --- 0123456789
math	generic fallback fonts --- 0123456789
fangsong	generic fallback fonts --- 0123456789

Flexbox provides a mechanism for laying out a sequence of elements by row or column. Rows, by default, break when there is not enought space of an additional element.

Flexbox containers are very effective for building flexible page layouts. They provide rules for how container elements will resize when media width or browser environment changes.

There is one small gotcha related to the use of flexbox. Element margins do not collapse while they do everywhere else.

Margin collapse means that if two elements are adjacent and have margin specifiers the distance between the two will be the larger margin, not the sum of margins.

Flexbox Containers

A Complete Guide to Flexbox – CSS-Tricks

Property / Concept	Applies to	Purpose / Common Values	Small Example
display	Container	Enable flex formatting context. Values: `flex`, `inline-flex`.	`.row { display:flex; }`
Main / Cross Axis	Concept	Main axis follows `flex-direction`; cross axis is perpendicular.	`row → main=x, cross=y column → main=y, cross=x`
flex-direction	Container	Direction of main axis: `row` \| `row-reverse` \| `column` \| `column-reverse`.	`.row { flex-direction:row; }`
flex-wrap	Container	Wrap items: `nowrap` \| `wrap` \| `wrap-reverse`.	`.row { flex-wrap:wrap; }`
flex-flow	Container	Shorthand for direction + wrap. `<flex-direction> <flex-wrap>`.	`.row { flex-flow:row wrap; }`
justify-content	Container	Distribute along main axis: `flex-start` \| `center` \| `flex-end` \| `space-between` \| `space-around` \| `space-evenly`.	`.row { justify-content:space-between; }`
align-items	Container	Align items on cross axis: `stretch` \| `flex-start` \| `center` \| `flex-end` \| `baseline`.	`.row { align-items:center; }`
align-content	Container (multi-line)	Align lines on cross axis when wrapping: same values as `justify-content`.	`.row { align-content:space-around; }`
gap / row-gap / column-gap	Container	Spacing between items/lines; no side margins needed.	`.row { gap:.75rem; }`
order	Item	Controls visual order (default 0). Lower shows first.	`.item:first-child { order:2; }`
flex-grow	Item	Share remaining space along main axis (ratio). `0` = don’t grow.	`.item { flex-grow:1; }`
flex-shrink	Item	Shrink when overflowing (ratio). `0` = don’t shrink.	`.item { flex-shrink:0; }`
flex-basis	Item	Initial main-size before grow/shrink. Common: `auto`, `0`, lengths (e.g., `12rem`, `30%`).	`.card { flex-basis:16rem; }`
flex	Item	Shorthand: `flex: <grow> <shrink> <basis>`. Handy presets: • `flex:1` → `1 1 0` • `flex:auto` → `1 1 auto` • `flex:none` → `0 0 auto`	`.fill { flex:1 1 0; }`
align-self	Item	Override `align-items` per item: `auto` \| `flex-start` \| `center` \| `flex-end` \| `stretch` \| `baseline`.	`.logo { align-self:flex-end; }`
Equal columns	Recipe	Make children share width equally.	`.row{display:flex}.row>*{flex:1 1 0}`
Fixed + fluid	Recipe	Sidebar fixed, content fills remaining.	`.side{flex:0 0 12rem}.main{flex:1 1 0}`
Center box	Recipe	Center one item both axes.	`.center{display:flex;justify-content:center;align-items:center}`
Right-align last	Recipe	Push trailing item to the end.	`.row{display:flex}.last{margin-left:auto}`
Min-size traps	Tip	Items can refuse to shrink due to min-content. Use `min-width:0` (row) or `min-height:0` (column) on items or parents.	`.item{min-width:0}`
Overflow scrolling	Tip	For scrollable flex children, set `min-height:0` on parent and `overflow:auto` on the child.	`.parent{min-height:0}.pane{overflow:auto}`

Grid containers have flexible rules for laying out two dimensional grids of elements.

Grid Containers

A Complete Guide to Grid – CSS-Tricks

Property / Concept	Applies to	Purpose / Common Values	Small Example
display	Container	Enable grid formatting context. Values: `grid`, `inline-grid`.	`.grid { display:grid; }`
grid-template-columns / grid-template-rows	Container	Define track sizes. Values: lengths, %, `fr`, `auto`, functions (`repeat()`, `minmax()`).	`.grid { grid-template-columns:200px 1fr; }`
grid-template-areas	Container	Name areas for semantic placement.	`"header header" "side main"`
grid-template	Container	Shorthand for rows / columns / areas.	`.grid { grid-template: "h h" 60px "s m" 1fr / 200px 1fr; }`
grid-auto-rows / grid-auto-columns	Container	Size for tracks auto-created by content.	`.grid { grid-auto-rows:minmax(100px,auto); }`
grid-auto-flow	Container	How items fill unassigned cells: `row` \| `column` \| `dense` variations.	`.grid { grid-auto-flow:row dense; }`
gap / row-gap / column-gap	Container	Spacing between rows/columns.	`.grid { gap:1rem; }`
justify-items	Container	Align items in their cell (inline axis): `start` \| `center` \| `end` \| `stretch`.	`.grid { justify-items:center; }`
align-items	Container	Align items in their cell (block axis).	`.grid { align-items:start; }`
justify-content	Container	Align the whole grid within container (inline axis). Values: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`.	`.grid { justify-content:space-between; }`
align-content	Container	Align the whole grid within container (block axis).	`.grid { align-content:center; }`
place-items	Container	Shorthand for `align-items` + `justify-items`.	`.grid { place-items:center; }`
place-content	Container	Shorthand for `align-content` + `justify-content`.	`.grid { place-content:center space-between; }`
grid-column / grid-row	Item	Place item by grid line numbers or names: `start / end`.	`.item { grid-column:1 / 3; grid-row:2; }`
grid-area	Item	Assign to a named area or shorthand for row/column placement.	`.header { grid-area:header; }`
justify-self	Item	Align a single item in its cell (inline axis).	`.item { justify-self:end; }`
align-self	Item	Align a single item in its cell (block axis).	`.item { align-self:center; }`
place-self	Item	Shorthand for `align-self` + `justify-self`.	`.item { place-self:start stretch; }`
Basic 2-col layout	Recipe	Sidebar + content columns.	`.grid { display:grid; grid-template-columns:200px 1fr; }`
12-col responsive	Recipe	Equal-width flexible columns.	`.grid { grid-template-columns:repeat(12,1fr); gap:1rem; }`
Auto-fill cards	Recipe	Responsive card layout with wrapping.	`.grid { grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:1rem; }`
Named areas	Recipe	Define semantic regions.	`.grid { grid-template-areas:"header header" "side main"; }`

These are some of my favorite resources for information about CSS.

Popular Articles and Blogs from css-tricks.com

Article	Link
A Complete Guide to Flexbox	https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Grid	https://css-tricks.com/snippets/css/complete-guide-grid/
Perfect Full Page Background Image	https://css-tricks.com/perfect-full-page-background-image/
The Shapes of CSS	https://css-tricks.com/the-shapes-of-css/
Media Queries for Standard Devices	https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Using Grid Named Areas to Visualize (and Reference) Your Layout	https://css-tricks.com/using-grid-named-areas-to-visualize-and-reference-your-layout/
My Dumbest CSS Mistakes	https://css-tricks.com/my-dumbest-css-mistakes/
Designing for Long-Form Articles	https://css-tricks.com/designing-for-long-form-articles/
GIFs Without the .gif: The Most Performant Image and Video Options Right Now	https://css-tricks.com/gifs-without-the-gif/
Responsive Grid Magazine Layout in Just 20 Lines of CSS	https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/
Thank You (2022 Edition)	https://css-tricks.com/thank-you-2022-edition/
Thank You (2021 Edition)	https://css-tricks.com/thank-you-2021-edition/
Timeless Web Dev Articles	https://css-tricks.com/timeless-web-dev-articles/
The Best of CSS-Tricks (Refind community)	https://refind.com/publications/css

w3shools has very nice interactive tutorials for CSS and many other things as well.

Mozilla Developer's Network (MDN) has most of the details you will eventually need.

Tutorials

Tutorial - w3schools.com, Intro to CSS - MDN, Tutorial - tutorialspoint.com, CSS Tutorial - w3.org

Again, w3shools and MDN are my preferences here.

References

CSS Reference - w3schools.com, CSS Reference - MDN, cssreference.io, CSS - tympanus.net

Understanding is a collection of links that, after learning, helps us understand the how and why.

Understanding

units of measure - W3C
Box Shadow, Introduction to CSS Shapes
Learn CSS Grid, CSS-Tricks Snippets
Guide to Flexbox
Learn CSS Grid, CSS Grid by Example, Complete Guide to Grid
Things I learded reading the CSS Grid Spec , The CSS Fractional Unit (fr)

Building Things has links to project examples and components that are helpful for implementing projects.

Building Things

Image Viewer
Stacked Content
CSS dropdown menus, Hoverable Dropdown, Dropdown menu - w3schools.com
Simple manual slide show - w3schools.com, Auto play slide show

Specifications contains a table listing CSS Module Specifications from MDN and W3C.

Specifications

Module	Purpose	Status
Selectors (MDN)	Define patterns to target elements (classes, attributes, pseudo-classes like :hover, :nth-child, etc.).	Level 3: REC Level 4: Working Draft
Selectors (W3C)		Level 3: REC Level 4: Working Draft
Cascade & Inheritance (MDN)	How style conflicts are resolved (specificity, importance, source order); inheritance rules for properties.	Level 3: REC Level 4: Working Draft
Cascade & Inheritance (W3C)		Level 3: REC Level 4: Working Draft
Box Model & Display (MDN)	Defines content, padding, border, margin, and how elements are displayed (block, inline, inline-block, etc.).	REC (CSS2.1) Draft updates ongoing
Box Model & Display (W3C)		REC (CSS2.1) Draft updates ongoing
Backgrounds & Borders (MDN)	Properties for background images, gradients, borders, border-radius, and multiple backgrounds.	Level 3: REC Level 4: Working Draft
Backgrounds & Borders (W3C)		Level 3: REC Level 4: Working Draft
Color (MDN)	Color values and spaces: named colors, RGB, HSL, HWB, Lab, LCH, alpha transparency, color-mix().	Level 3: REC Level 4: Working Draft
Color (W3C)		Level 3: REC Level 4: Working Draft
Values & Units (MDN)	Core units: px, em, rem, %, vh/vw, fr; math functions: calc(), min(), max(), clamp().	Level 3: REC Level 4: Working Draft
Values & Units (W3C)		Level 3: REC Level 4: Working Draft
Media Queries (MDN)	Adapts styles to device characteristics like width, resolution, orientation, light/dark mode.	Level 3: REC Level 4: Candidate Rec
Media Queries (W3C)		Level 3: REC Level 4: Candidate Rec
Flexbox (MDN)	One-dimensional layout model: distributes space, aligns items, handles responsive resizing.	Level 1: REC
Flexbox (W3C)		Level 1: REC
Grid Layout (MDN)	Two-dimensional layout model: rows & columns with explicit/implicit placement.	Level 1: REC Level 2: Working Draft
Grid Layout (W3C)		Level 1: REC Level 2: Working Draft
Transforms & Animations (MDN)	2D/3D transforms (rotate, scale, translate), transitions, keyframe animations.	Level 1: REC Level 2: Working Draft
Transforms & Animations (W3C)		Level 1: REC Level 2: Working Draft
Fonts & Text (MDN)	Web fonts (@font-face), font-variant, OpenType features, text decoration, line breaking.	REC (various levels) Updates in draft
Fonts & Text (W3C)		REC (various levels) Updates in draft
Scroll & Overflow (MDN)	Controls overflow behavior, scrollbars, scroll snapping, overscroll handling.	Level 3: REC Level 4: Working Draft
Scroll & Overflow (W3C)		Level 3: REC Level 4: Working Draft

For this dropdown Libraries are CSS only and Frameworks are libraries with both CSS and JavaScript

Libraries and Frameworks

Library	CSS-only?	Notes
General frameworks
Bootstrap	No	Interactive components require JS.
Foundation	No	Many components need JS.
Bulma	Yes	Modern, flexbox-first, no JS.
Tailwind CSS	Yes	Utility classes; typical build step, no runtime JS.
Tachyons	Yes	Functional utility classes.
UIkit	No	Component behavior provided via JS.
Pure.css	Yes	Very lightweight modules, CSS only.
Skeleton	Yes	Tiny starter for basic layouts.
Milligram	Yes	Minimal, clean defaults.
Spectre.css	Yes	Lightweight components; CSS only.
Classless / semantic-first
Pico.css	Yes	Classless styles for semantic HTML.
Water.css	Yes	Auto dark/light themes; CSS only.
MVP.css	Yes	Zero classes; drop-in defaults.
new.css	Yes	Opinionated classless theme.
awsm.css	Yes	Readable classless theme.
Resets & normalizers
Normalize.css	Yes	Standardize cross-browser defaults.
modern-normalize	Yes	Modernized slim normalize.
sanitize.css	Yes	Normalize + opinionated defaults.
The New CSS Reset	Yes	Hard reset you rebuild from.
Animation & effects
Animate.css	Yes	Keyframe animations via CSS classes.
Hover.css	Yes	Hover transitions; CSS only.
Magic.css	Yes	Extra animation presets (CSS).
AOS (Animate On Scroll)	No	Scroll reveals require JS runtime.
Layout & grids
Flexbox Grid	Yes	Responsive grid built on flexbox.
Simple Grid	Yes	Minimal responsive grid.
Gridlex	Yes	Flexbox-based grid utility.
Neat (Bourbon Neat)	Yes	SCSS mixins compile to CSS; no JS.
Utilities / tokens
Open Props	Yes	CSS custom properties (colors, easings, etc.).
CSSTools PostCSS presets	No (tooling)	PostCSS plugins/polyfills at build time.
Material & components
Materialize	No	Interactive components use JS.
Material Design Lite	No	MDL components rely on JS (legacy).
Shoelace	No	Web components (JS) themed via CSS vars.
Typography & long-form
Typebase.css	Yes	Typographic defaults; CSS only.
Tufte CSS	Yes	Beautiful long-form essay styling.
Icons
Font Awesome	Yes*	Works with CSS + font/SVG; JS optional for advanced features.
Material Icons	Yes	Icon font/SVG with CSS; no JS required.
Bootstrap Icons	Yes	SVG/CSS icons; no JS required.

WebDev Bites: Cascading Style Sheets (CSS)

selectors, selector grouping

1.0 - Cascading Style Sheets