Absolute vs. Relative Length Units

Length units fall into two categories: absolute and relative. Absolute units (e.g., in, mm, cm) relate to physical measurements, but may vary across screens due to resolution differences. Relative units (e.g., em, rem, vw, vh) derive values from other elements—em scales with parent font size, making it useful for responsive typography. Viewport units (vw, vh) adjust based on browser window size, ideal for fluid layouts.

CSS Specificity Hierarchy

Styles override based on specificity: !important (highest) > inline styles > ID selectors > class/attribute/pseudo-class selectors > element/pseudo-element selectors > inherited styles.

CSS Custom Properties

Define variables with -- prefix:

.container {
  --theme-primary: #2563eb; /* Custom variable */
}

Use via var():

.button {
  background: var(--theme-primary);
  border: 2px solid var(--theme-primary, #1d4ed8); /* Fallback value */
}

Anchor Links

Link to page sections using id:

<a href="#contact-section">Contact</a>
<!-- ... -->
<h2 id="contact-section">Get in Touch</h2>

Form Elements

Send data via <form> with action and method:

<form action="/api/submit-form" method="POST">
  <fieldset>
    <legend>User Details</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="user_name" pattern="[A-Za-z0-9]{6,}" required>
    
    <label for="newsletter">Subscribe:</label>
    <input type="checkbox" id="newsletter" name="subscribe" checked>
  </fieldset>
  <button type="submit">Submit</button>
</form>

• <fieldset> groups related inputs; <legend> labels the group.
• <select> options require value attributes for server submission.
• <textarea> uses rows/cols for initial size.
• object-fit controls image scaling: contain (preserve ratio, fit within container), cover (fill container, crop excess), scale-down (shrink if neeeded).

Radio/Checkbox Groups

Associate labels with inputs via for/id; group with shared name:

<label for="theme-light">Light Mode</label>
<input type="radio" id="theme-light" name="theme" value="light" checked>

<label for="notifications">Enable Alerts</label>
<input type="checkbox" id="notifications" name="alerts" value="on">

Media Queries

Apply styles conditionally:

/* Mobile-first: base styles for small screens */
.card { padding: 1rem; }

/* Tablet (≥768px) */
@media (min-width: 768px) {
  .card { padding: 2rem; max-width: 600px; margin: 0 auto; }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

Visual Design Techniques

• Text Alignment: text-align: justify aligns lines (except last) to both edges.
• Horizontal Rule: <hr> creates a full-width divider; style with margins: hr.divider { margin: 2rem 0; border: 0; border-top: 1px solid #e5e7eb; }.
• Box Shadow: Add depth with box-shadow: offset-x offset-y blur-radius spread-radius color:

  .card {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  }
  

• Opacity: opacity: 0.7 (semi-transparent); applies to all child content.
• Text Transform: text-transform: uppercase (all caps), capitalize (first letter per word).

Element Positioning

• Block vs. Inline: Block elements (div, p, h1-h6) stack vertically; inline (span, a, strong) flow horizontally.
• Relative: position: relative offsets element from normal flow without affecting siblings.
• Absolute: position: absolute removes from flow; positions relative to nearest positioned ancestor (or viewport if none).
• Fixed: position: fixed anchors to viewport; stays visible during scrolling.

Gradients & Transforms

• Linear Gradient: background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) (135° angle, color stops).
• Transform: Scale, rotate, or skew elements:

  .box {
    transform: scale(1.2) rotate(5deg) skewX(-5deg);
  }
  

Pseudo-elements

::before/::after insert content via content property:

.divider::before {
  content: "";
  display: block;
  height: 1px;
  background: #d1d5db;
  margin: 1rem 0;
}

Keyframe Animations

Define with @keyframes and apply via animation:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.button {
  animation: pulse 2s ease-in-out infinite;
}

Accessibility

• Alt Text: Describe images for screen readers: <img src="chart.png" alt="Bar chart showing Q3 sales growth">.
• Figure/Figcaption: Group images with captions:

  <figure>
    <img src="diagram.jpg" alt="System architecture diagram">
    <figcaption>Component interaction overview</figcaption>
  </figure>
  

• Tabindex: Make non-interactive elements focusable: <div tabindex="0">Focusable content</div>.
• Screen Reader Only: Hide content visually but keep accessible:

  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
  

• Accesskey: Keyboard shortcuts: <button accesskey="s">Save</button>.

Responsive Principles

• Fluid Images: img { max-width: 100%; height: auto; } prevents overflow.
• Retina Images: Use srcset for high-DPI displays: <img src="img-1x.jpg" srcset="img-2x.jpg 2x" alt="High-res image">.
• Viewport Typography: font-size: clamp(1rem, 2.5vw, 1.5rem) sets min/max with fluid scaling.

Flexbox Layout

• Container: display: flex; flex-direction: row (default) or column.
• Alignment: justify-content (main axis) and align-items (cross axis):

  .flex-container {
    display: flex;
    justify-content: space-between; /* Distribute space between items */
    align-items: center; /* Vertically center items */
  }
  

• Wrapping: flex-wrap: wrap allows items to move to new lines.
• Sizing: flex: 1 0 200px (grow:1, shrink:0, basis:200px).
• Order: order: -1 repositions items (default: 0).

Grid Layout

• Container: display: grid; define columns/rows with grid-template-columns: repeat(3, 1fr).
• Spacing: gap: 1rem (row/column), or row-gap/column-gap.
• Item Placement: grid-column: 1 / span 2 (span 2 columns), grid-row: 2 / 4 (rows 2-3).
• Areas: Name regions with grid-template-areas:

  .grid-container {
    grid-template-areas: 
      "header header"
      "sidebar main"
      "footer footer";
  }
  .header { grid-area: header; }
  

• Responsive Grids: Combine with media queries:

  @media (min-width: 768px) {
    .grid-container { grid-template-columns: 250px 1fr; }
  }
  

• Auto Layout: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) creates flexibel columns.