CSS uses selectors to target HTML elements and apply styles. The most common selector is the class selector (.classname), which targets elements with a specific class attribute. You can also use element selectors (p, div), ID selectors (#id), and combinators to select nested elements.
Properties define what aspect of the element to style. Common properties include color for text color, background for backgrounds, padding for internal spacing, and margin for external spacing. Each property accepts specific value types like colors, lengths, or keywords.
Flexbox is a one-dimensional layout system for arranging items in rows or columns. Apply display: flex to a container to enable it. Child elements become flex items that can grow, shrink, and align automatically.
Control alignment with justify-content (main axis: flex-start, center, space-between) and align-items (cross axis: stretch, center, flex-end). The gap property adds consistent spacing between items without margins.
CSS Grid is a two-dimensional layout system for creating complex row and column layouts. Enable it with display: grid, then define columns using grid-template-columns. The repeat() function creates multiple tracks, and fr units distribute available space proportionally.
Grid excels at page layouts and card grids. Use grid-template-columns: repeat(3, 1fr) for three equal columns, or repeat(auto-fill, minmax(250px, 1fr)) for responsive columns that wrap automatically.
HTML5 introduced semantic elements that convey meaning about content structure. Use <header> for introductory content, <nav> for navigation links, <main> for primary content, <article> for self-contained compositions, <section> for thematic groupings, and <footer> for closing content.
Semantic markup improves accessibility—screen readers announce element roles. It also helps SEO as search engines better understand your content hierarchy. Replace generic <div> containers with appropriate semantic elements whenever possible.
Tailwind CSS is a utility-first CSS framework that takes a radically different approach to styling. Instead of writing custom CSS classes like .card or .button, you compose designs using small, single-purpose utility classes directly in your HTML: class="p-4 bg-white rounded shadow".
This approach solves common CSS problems: no more specificity battles, no unused styles, no inventing class names. Tailwind's consistent spacing scale (p-1 through p-12), color palette (blue-500, gray-100), and responsive prefixes (md:, lg:) make building consistent, responsive interfaces fast and predictable.
For the underlying CSS concepts, see the CSS Section and CSS Reference.
See also: Flexbox Reference | Grid Reference | Selectors Reference
`, selectors: ` @@ -1448,6 +1455,8 @@ const referenceContent = {* (0 points)Practice: Basic Selectors Lessons | Advanced Selectors
`, flexbox: ` @@ -1520,6 +1529,8 @@ const referenceContent = { .main { flex: 1; }Practice: Flexbox Lessons | Compare: CSS Grid
`, grid: ` @@ -1607,6 +1618,8 @@ const referenceContent = { }Practice: Grid Lessons | Compare: Flexbox
`, html: ` @@ -1723,6 +1736,8 @@ const referenceContent = { + +Learn: HTML Section | Style with: CSS Properties
` }; diff --git a/src/index.html b/src/index.html index f21cf4e..0e895af 100644 --- a/src/index.html +++ b/src/index.html @@ -103,8 +103,9 @@- Every exercise teaches skills you'll use in real projects—flexbox layouts, form styling, responsive design, and - modern CSS techniques. + Every exercise teaches skills you'll use in real projects—flexbox layouts, + form styling, responsive design, and modern + CSS techniques.
+ Jump to: CSS | HTML | Tailwind | + Reference +
diff --git a/src/main.css b/src/main.css index fee3aa5..756169c 100644 --- a/src/main.css +++ b/src/main.css @@ -1394,6 +1394,25 @@ input:checked + .toggle-slider::before { border: 1px solid var(--border-color); } +.help-nav-links { + font-size: 0.9rem; + color: var(--light-text); + padding: var(--spacing-sm) var(--spacing-md); + background: var(--bg-color); + border-radius: var(--border-radius-sm); + margin-top: var(--spacing-sm); +} + +.help-nav-links a { + color: var(--primary-color); + text-decoration: none; + font-weight: 500; +} + +.help-nav-links a:hover { + text-decoration: underline; +} + .dialog-actions { display: flex; justify-content: flex-end; @@ -1894,6 +1913,36 @@ input:checked + .toggle-slider::before { transform: translateX(3px); } +/* Secondary reference link in topic sections */ +.topic-ref { + display: block; + margin-top: 0.75rem; + color: var(--light-text); + font-size: 0.9rem; + text-decoration: none; +} + +.topic-ref:hover { + color: var(--primary-color); + text-decoration: underline; +} + +/* See-also in section overviews */ +.section-see-also { + margin-top: var(--spacing-md); + font-size: 0.9rem; + color: var(--light-text); +} + +.section-see-also a { + color: var(--primary-color); + text-decoration: none; +} + +.section-see-also a:hover { + text-decoration: underline; +} + /* Inline code in topic text */ .topic-text code { background: var(--primary-bg-light); @@ -2065,9 +2114,14 @@ input:checked + .toggle-slider::before { } .ref-section { + margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); } +.ref-section:first-of-type { + margin-top: 0; +} + .ref-section h2 { font-size: 1.2rem; margin-bottom: var(--spacing-md); @@ -2142,6 +2196,25 @@ input:checked + .toggle-slider::before { margin: var(--spacing-md) 0; } +/* Cross-reference links in reference pages */ +.ref-see-also { + margin-top: var(--spacing-lg); + padding-top: var(--spacing-md); + border-top: 1px solid var(--border-color); + font-size: 0.9rem; + color: var(--light-text); +} + +.ref-see-also a { + color: var(--primary-color); + text-decoration: none; + font-weight: 500; +} + +.ref-see-also a:hover { + text-decoration: underline; +} + /* Responsive reference tables */ @media (max-width: 600px) { .ref-table {