` elements | | `.class` | `.intro { }` | Selects all elements with `class="intro"` | | `#id` | `#firstname { }` | Selects the element with `id="firstname"` | | `element.class` | `p.intro { }` | Selects `
` elements with `class="intro"` | ### Grouping | Selector | Example | Description | |---|---|---| | `sel1, sel2` | `div, p { }` | Selects all `
` elements | ### Combinator Selectors | Selector | Example | Description | |---|---|---| | `ancestor descendant` | `div p { }` | Selects all `
` inside `
` that are direct children of `
` immediately after `
` that are siblings after `
Text
``` ### The Cascade, Specificity, and Inheritance - **Cascade**: When multiple rules target the same element, later rules override earlier ones (all else being equal). - **Specificity**: More specific selectors override less specific ones. Specificity ranking (low to high): - Type selectors (`p`, `div`) and pseudo-elements - Class selectors (`.intro`), attribute selectors, and pseudo-classes - ID selectors (`#main`) - Inline styles - `!important` (overrides all, use sparingly) - **Inheritance**: Some properties (mostly text-related) are inherited by child elements; others (mostly layout-related) are not. ### Values and Units | Unit | Type | Description | |---|---|---| | `px` | Absolute | Pixels (most common absolute unit) | | `em` | Relative | Relative to parent element font size | | `rem` | Relative | Relative to root element font size | | `%` | Relative | Percentage of parent element's value | | `vw` / `vh` | Relative | 1% of viewport width / height | | `vmin` / `vmax` | Relative | 1% of the smaller/larger viewport dimension | | `ch` | Relative | Width of the `0` character | | `fr` | Fraction | Fraction of available space (Grid only) | ### Color Values ```css color: red; /* Named color */ color: #ff0000; /* Hex */ color: #f00; /* Hex shorthand */ color: rgb(255, 0, 0); /* RGB */ color: rgba(255, 0, 0, 0.5); /* RGB with alpha */ color: rgb(255 0 0 / 50%); /* Modern RGB syntax */ color: hsl(0, 100%, 50%); /* HSL */ color: hsla(0, 100%, 50%, 0.5); /* HSL with alpha */ color: hsl(0 100% 50% / 50%); /* Modern HSL syntax */ ``` --- ## 6. The Box Model > Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model ### The Four Layers Every CSS element is surrounded by a box with four layers (inside to outside): 1. **Content Box** -- where content is displayed; sized with `width` and `height` 2. **Padding Box** -- space around content; sized with `padding` 3. **Border Box** -- wraps content and padding; sized with `border` 4. **Margin Box** -- outermost space around the element; sized with `margin` ### Standard vs. Alternative Box Model **Standard (default -- `content-box`):** ```css .box { width: 350px; /* Content width only */ padding: 25px; border: 5px solid black; margin: 10px; } /* Total rendered width: 350 + 25 + 25 + 5 + 5 = 410px */ ``` **Alternative (`border-box`):** ```css .box { box-sizing: border-box; width: 350px; /* Includes padding and border */ padding: 25px; border: 5px solid black; margin: 10px; } /* Total rendered width: 350px (content area shrinks to fit) */ ``` **Recommended global reset:** ```css html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } ``` ### Block vs. Inline vs. Inline-Block | Behavior | Block | Inline | Inline-Block | |---|---|---|---| | Breaks onto new line | Yes | No | No | | Respects `width`/`height` | Yes | No | Yes | | Padding/margin push others away | Yes | Left/right only | Yes | | Fills container width by default | Yes | No | No | | Common elements | `div`, `p`, `h1`-`h6`, `section` | `a`, `span`, `em`, `strong` | -- (set via CSS) | ### Margin Collapsing When vertical margins of adjacent block elements touch, they collapse: - **Two positive margins**: The larger value wins - **Two negative margins**: The smallest (most negative) value wins - **One positive + one negative**: They are subtracted from each other ```css .one { margin-bottom: 50px; } .two { margin-top: 30px; } /* Result: 50px gap between them (not 80px) */ ``` ### Shorthand Notation ```css /* All four sides */ margin: 10px; /* All sides 10px */ margin: 10px 20px; /* Vertical 10px, Horizontal 20px */ margin: 10px 20px 30px; /* Top 10px, Horizontal 20px, Bottom 30px */ margin: 10px 20px 30px 40px; /* Top, Right, Bottom, Left (clockwise) */ ``` --- ## 7. Flexbox Layout > Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox Flexbox is a **one-dimensional** layout method for arranging items in rows or columns. ### Axes - **Main Axis**: The direction items are laid out (default: horizontal) - **Cross Axis**: Perpendicular to the main axis (default: vertical) ### Container Properties ```css .container { display: flex; /* or inline-flex */ /* Direction */ flex-direction: row; /* row | row-reverse | column | column-reverse */ /* Wrapping */ flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */ /* Shorthand for direction + wrap */ flex-flow: row wrap; /* Main axis alignment */ justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */ /* Cross axis alignment */ align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */ /* Multi-line cross axis alignment (when wrapping) */ align-content: stretch; /* stretch | flex-start | flex-end | center | space-between | space-around */ /* Spacing */ gap: 10px; /* row-gap and column-gap shorthand */ } ``` ### Item Properties ```css .item { /* Growth/shrink behavior (shorthand) */ flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */ flex: 1 200px; /* flex-grow: 1, flex-basis: 200px */ /* Individual properties */ flex-grow: 0; /* How much the item grows (0 = don't grow) */ flex-shrink: 1; /* How much the item shrinks (0 = don't shrink) */ flex-basis: auto; /* Default size before space distribution */ /* Visual ordering */ order: 0; /* Lower values appear first; default is 0 */ /* Individual cross-axis alignment */ align-self: auto; /* auto | flex-start | flex-end | center | baseline | stretch */ } ``` ### Common Patterns ```css /* Equal-width columns */ .item { flex: 1; } /* Centering an item vertically and horizontally */ .container { display: flex; justify-content: center; align-items: center; } /* Responsive wrapping layout */ .container { display: flex; flex-wrap: wrap; gap: 1rem; } .item { flex: 1 1 300px; /* Grow, shrink, min-width 300px */ } /* Sticky footer layout */ body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } ``` --- ## 8. Grid Layout > Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids CSS Grid is a **two-dimensional** layout system for organizing content into rows and columns. ### Container Properties ```css .container { display: grid; /* or inline-grid */ /* Define columns and rows */ grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; /* Using repeat() */ grid-template-columns: repeat(3, 1fr); /* Responsive auto-fill / auto-fit */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Named areas */ grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; /* Gaps between tracks */ gap: 20px; column-gap: 20px; row-gap: 20px; /* Size for implicitly created tracks */ grid-auto-rows: minmax(100px, auto); grid-auto-columns: 1fr; /* Auto-placement algorithm */ grid-auto-flow: row; /* row | column | dense */ /* Align all items within their cells */ justify-items: stretch; /* start | end | center | stretch */ align-items: stretch; /* start | end | center | stretch */ /* Align the grid within its container */ justify-content: start; /* start | end | center | stretch | space-between | space-around | space-evenly */ align-content: start; } ``` ### Key Functions | Function | Description | |---|---| | `repeat(count, size)` | Repeats a track definition (e.g., `repeat(3, 1fr)`) | | `minmax(min, max)` | Sets a minimum and maximum size for a track | | `auto-fill` | Creates as many tracks as fit the container (empty tracks remain) | | `auto-fit` | Creates as many tracks as fit, then collapses empty tracks | | `fit-content(max)` | Sizes track to content, up to a maximum | ### The `fr` Unit The `fr` unit represents one fraction of available space: ```css grid-template-columns: 2fr 1fr 1fr; /* First column gets 50%, others get 25% each */ ``` ### Item Properties ```css .item { /* Placement by line numbers */ grid-column: 1 / 3; /* Start at line 1, end at line 3 */ grid-row: 1 / 2; /* Placement by span */ grid-column: 1 / span 2; /* Start at line 1, span 2 columns */ /* Full-width item */ grid-column: 1 / -1; /* Line 1 to the last line */ /* Placement by named area */ grid-area: header; /* Self-alignment within cell */ justify-self: center; /* start | end | center | stretch */ align-self: center; } ``` ### Named Grid Areas Example ```css .container { display: grid; grid-template-columns: 1fr 3fr; grid-template-areas: "header header" "sidebar content" "footer footer"; gap: 20px; } header { grid-area: header; } aside { grid-area: sidebar; } main { grid-area: content; } footer { grid-area: footer; } ``` ### Subgrid A grid item can inherit its parent's track definitions: ```css .nested { display: grid; grid-template-columns: subgrid; } ``` ### Explicit vs. Implicit Grid - **Explicit grid**: Tracks defined by `grid-template-columns` / `grid-template-rows` - **Implicit grid**: Auto-generated tracks for content that overflows; controlled by `grid-auto-rows` / `grid-auto-columns` --- ## 9. Media Queries > Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries ### Syntax ```css @media media-type and (media-feature) { /* CSS rules */ } ``` ### Media Types | Type | Description | |---|---| | `all` | All devices (default) | | `screen` | Screens (monitors, phones, tablets) | | `print` | Print preview and printed pages | ### Common Media Features | Feature | Description | Example | |---|---|---| | `width` / `min-width` / `max-width` | Viewport width | `(min-width: 768px)` | | `height` / `min-height` / `max-height` | Viewport height | `(min-height: 600px)` | | `orientation` | Portrait or landscape | `(orientation: landscape)` | | `hover` | Can the user hover? | `(hover: hover)` | | `pointer` | Pointing device precision | `(pointer: fine)` or `(pointer: coarse)` | | `prefers-color-scheme` | User's color scheme preference | `(prefers-color-scheme: dark)` | | `prefers-reduced-motion` | User prefers reduced motion | `(prefers-reduced-motion: reduce)` | | `aspect-ratio` | Viewport aspect ratio | `(aspect-ratio: 16/9)` | | `resolution` | Device pixel density | `(min-resolution: 2dppx)` | ### Logical Operators ```css /* AND -- all conditions must be true */ @media screen and (min-width: 600px) and (orientation: landscape) { } /* OR -- comma-separated; any condition can be true */ @media (min-width: 600px), (orientation: landscape) { } /* NOT -- negates the entire query */ @media not screen and (min-width: 600px) { } /* Range syntax (modern) */ @media (30em <= width <= 50em) { } ``` ### Mobile-First Responsive Design Start with mobile styles, then add complexity for larger screens: ```css /* Base styles (mobile) */ .container { width: 90%; margin: 0 auto; } /* Medium screens (tablets) */ @media screen and (min-width: 40em) { .container { display: grid; grid-template-columns: 3fr 1fr; gap: 20px; } nav ul { display: flex; } } /* Large screens (desktop) */ @media screen and (min-width: 70em) { .container { max-width: 1200px; } } ``` ### Viewport Meta Tag (Required) Always include this in your HTML `` for responsive design to work on mobile: ```html ``` ### Common Breakpoints While there are no universal breakpoints, commonly used values include: | Label | Breakpoint | |---|---| | Small phones | `< 576px` | | Phones / large phones | `>= 576px` | | Tablets | `>= 768px` | | Desktops | `>= 992px` | | Large desktops | `>= 1200px` | | Extra large | `>= 1400px` | **Best practice**: Do not target specific devices. Instead, add breakpoints where your content needs them -- when line lengths get too long or layouts break. ### Responsive Without Media Queries Modern CSS layout methods can be inherently responsive: ```css /* Auto-responsive grid -- no media query needed */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } /* Fluid typography */ h1 { font-size: clamp(1.5rem, 4vw, 3rem); } ``` ### Print Styles ```css @media print { nav, .sidebar, footer { display: none; } body { font-size: 12pt; color: black; background: white; } a[href]::after { content: " (" attr(href) ")"; } } ``` ### Dark Mode Support ```css @media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a1a; --text-color: #e0e0e0; } body { background-color: var(--bg-color); color: var(--text-color); } } ``` --- ## Quick Syntax Cheat Sheet ```css /* Variables (Custom Properties) */ :root { --primary: #3498db; --spacing: 1rem; } .element { color: var(--primary); padding: var(--spacing); } /* Nesting (modern CSS) */ .card { background: white; & .title { font-size: 1.5rem; } &:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } } /* Logical Properties */ margin-inline: auto; /* left + right margin */ margin-block: 1rem; /* top + bottom margin */ padding-inline-start: 1rem; /* left in LTR, right in RTL */ /* Container Queries */ .card-container { container-type: inline-size; } @container (min-width: 400px) { .card { flex-direction: row; } } /* Scroll Snap */ .scroll-container { scroll-snap-type: x mandatory; } .scroll-item { scroll-snap-align: start; } ``` --- *This reference was compiled from content at w3schools.com and developer.mozilla.org (MDN Web Docs). For full details, visit the source URLs listed above each section.*