Module 4 — CSS Styling Fundamentals

Learning Objectives

Explain the purpose of CSS and where it fits in the web stack.
Apply CSS using inline, internal and external methods and understand best practice.
Use selectors, specificity and inheritance to target elements effectively.
Understand the box model: margin, border, padding and content box.
Create responsive spacing, typography, colors, and simple layouts.

Key Terms & Definitions

CSS: Cascading Style Sheets — used to describe presentation of HTML documents.
Selector: Part of a rule that identifies which elements the styles apply to (.class, #id, element).
Property: The name of a style you set (e.g., color, margin).
Value: The value for a property (e.g., #333, 16px).
Declaration: A single property:value pair inside a rule.
Rule: A selector with one or more declarations ({ ... }).
Specificity: Determines which rule wins when multiple rules target the same element.
Inheritance: Some properties are passed from parent to child elements (e.g., font-family).
Cascade: Order of precedence for CSS rules (importance, specificity, source order).
Box model: Layout model: content, padding, border and margin.
Margin: Space outside the border of an element.
Padding: Space between content and border inside an element.
Border: Edge between padding and margin; can have width, style, color.
Display: Property that controls how elements are rendered: block, inline, inline-block, none.
Position: Controls element positioning: static, relative, absolute, fixed, sticky.
Flexbox: Layout model for 1D layouts (row/column alignment).
Grid: Layout model for 2D layouts (rows and columns).
Viewport: The visible area of a web page in the browser.
Responsive: Design adapting to different screen sizes and devices.
Media query: CSS rule for applying styles at certain viewport widths.
Unit: Measurements like px, em, rem, %, vw, vh.
Rem: Relative unit based on root font-size — useful for scalable typography.
Em: Relative unit based on the current element's font-size.
Viewport units: Units relative to viewport size (vw, vh).
Typography: Design of text: font-family, size, weight, line-height, letter-spacing.
Contrast: Difference between text and background colors — important for accessibility.
Pseudo-class: Special states like :hover, :focus, :nth-child().
Pseudo-element: Selectors that target part of an element, e.g., ::before, ::after.
CSS Reset: A stylesheet to normalize browser defaults for consistent styling.
Critical CSS: CSS needed to render above-the-fold content quickly for performance.

Detailed Theory — CSS Fundamentals (concepts, examples, best practices)

4.1 What CSS does and where it lives

CSS controls visual presentation. It sits alongside HTML and can be applied inline (style="..."), inside a <style> tag in the <head>, or in external .css files linked with <link rel="stylesheet"> (best practice).

4.2 Anatomy of a CSS rule

selector { property: value; property2: value2; }

Example:

h1 { font-size: 2rem; color: #111; }

4.3 Selectors & specificity

Selectors target elements. Specificity determines which rule applies. Specificity order (low to high): element < class < id < inline styles. Use classes for styling and avoid overusing ids for style rules.

/* element */ p { ... }
/* class */ .card { ... }
/* id */ #main { ... }

4.4 Cascade and source order

If two rules have the same specificity, the later rule in the stylesheet wins. Use a logical order: base styles, layout, components, utilities.

4.5 Box Model deeply explained

Every element is a box. The total space an element takes equals content width + padding + border + margin. box-sizing: border-box makes width include padding and border which simplifies layouts.

/* recommended */ * { box-sizing: border-box; }

4.6 Display and flow

Block elements take full width and start on a new line. Inline elements flow within text. Inline-block combines inline flow with block sizing. Use display to change behavior and float only for legacy support.

4.7 Typography and readability

Set readable font sizes and comfortable line-height. Use relative units (rem) for font sizes so users can scale text. Example:

html { font-size: 100%; } /* usually 16px */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
h1 { font-size: 2rem; }

4.8 Colors and contrast

Choose accessible color pairs with sufficient contrast. Tools like the WebAIM contrast checker are helpful.

4.9 Spacing, margin collapsing and layout pitfalls

Understand margin collapsing between adjacent vertical margins and prefer padding inside containers when spacing is needed. Use utility classes for consistent spacing across components.

4.10 Positioning basics

Position: static (default), relative (offset from normal), absolute (positioned relative to nearest positioned ancestor), fixed (viewport), sticky (sticks within parent on scroll). Use sparingly and prefer modern layout systems.

4.11 Responsive units

Use %, vw/vh for layout; rem and em for typography. Avoid fixed pixel sizes for full responsiveness.

4.12 Debugging CSS

Use DevTools to inspect computed styles, box model, and layout issues. Toggle properties live to experiment and use the element inspector to find specificity conflicts.

Interactive Playground — HTML + CSS Try-it

Edit the HTML and CSS in the left pane. Press Run to preview the result on the right. This runs fully offline using a Blob URL.

Editor (HTML + CSS)

Preview

Practical Tasks — Step-by-step

Lab 1 — Style a Personal Profile

Create profile.html and link to css/style.css.
Implement a card component with avatar, name and short bio. Use box-shadow, border-radius, and responsive width (max-width + 100%).
Make the avatar responsive and ensure text wraps correctly without overflow.

Lab 2 — Build a simple responsive layout

Create a two-column layout that collapses to one column under 720px. Use percentages or flexbox.
Test using the browser resize and DevTools device toolbar.

Lab 3 — CSS specificity and debug exercise

Create conflicting rules (.card p {color:blue} and #profile p {color:red}) and practice changing specificity to fix the intended style.
Use DevTools to locate which rule is applied and experiment with order, specificity, and !important (use sparingly).

Advanced Tips (mastery)

Use custom properties (CSS variables) for theme tokens: colors, spacing and font sizes.
Structure styles: base, layout, components, utilities to keep sheets maintainable.
Use responsive type scale: base font-size with rem-based headings for consistent scaling.
Prefer min-width media queries for mobile-first design.

Faith Corner

"Whatever you do, work heartily, as for the Lord and not for men." — Colossians 3:23. Create with excellence — attention to detail reflects character.

ARISE AFRICA NETWORK VOCATIONAL COURSE (AAN)