CSS Basics | LIS 458

01_what_is_css

1. What Is CSS?

CSS stands for Cascading Style Sheets. While HTML defines the structure of a page, CSS controls how it looks — colors, fonts, spacing, layout, and more.

The word cascading means that rules flow downward: if two rules target the same element, the one written later (or the more specific one) wins.

02_linking_stylesheet

2. Linking Your Stylesheet

CSS lives in a separate .css file. You connect it to your HTML using a <link> tag placed inside the <head> section:

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

rel="stylesheet" — Tells the browser what kind of file this is.
href="css/style.css" — The path to your CSS file. This path is relative to the HTML file.

If the link is wrong, your styles simply will not load — no error message, just an unstyled page.

03_rule_syntax

3. CSS Rule Syntax

A CSS rule has two parts: a selector (what to style) and a declaration block (how to style it).

selector {
    property: value;
    property: value;
}

/* Example */
h1 {
    color: navy;
    font-size: 2rem;
}

Each declaration ends with a semicolon (;). Forgetting one breaks all rules below it in the same block.
The entire block is wrapped in curly braces ({ }).
Text between /* and */ is a comment — the browser ignores it.

04_selectors

4. The Three Core Selectors

Selector Type	Syntax	Targets
Element	`p { }`	Every `<p>` on the page
Class	`.hero { }`	Any element with `class="hero"`
ID	`#main-nav { }`	The one element with `id="main-nav"`

Best practice: Use classes for styling (they are reusable). Reserve IDs for JavaScript hooks or anchor links. Avoid styling directly by ID — it creates specificity problems.

05_box_model

5. The Box Model

Every HTML element is a rectangular box. CSS controls four layers around the content:

┌─────────────────────────────────┐  ← margin (space outside the element)
│  ┌───────────────────────────┐  │
│  │  border                   │  │  ← border (the visible edge line)
│  │  ┌─────────────────────┐  │  │
│  │  │  padding             │  │  │  ← padding (space between border and content)
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   content     │  │  │  │  ← content (text, image, etc.)
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

margin — Pushes other elements away. Transparent.
border — The visible edge. You choose its width, style, and color.
padding — Breathing room between the border and content. Takes on the element's background color.
content — Your text or image.

Add box-sizing: border-box; to your CSS to make width calculations intuitive — padding and border are included in the element's width, not added on top of it.

06_common_properties

6. Commonly Used Properties

Property	Example Value	What It Controls
`color`	`navy`	Text color
`background-color`	`#f0f0f0`	Background fill
`font-size`	`1.2rem`	Text size
`font-family`	`'Georgia', serif`	Typeface
`margin`	`1rem 0`	Outside spacing
`padding`	`0.5rem 1rem`	Inside spacing
`width`	`100%`	Element width
`border`	`1px solid #ccc`	Border shorthand