CSS Learning Documentation
A fill-in-ready, structured template
🔎

1. Introduction

Overview Purpose

CSS, which stands for Cascading Style Sheets, is a styling language used to design and enhance the appearance of web pages. While HTML provides the structure and content of a page—such as headings, paragraphs, images, and links—CSS is responsible for controlling how those elements look, including their colors, fonts, spacing, and layouts. In other words, HTML builds the skeleton of a website, and CSS adds the design layer that makes it visually appealing and user-friendly. CSS works hand in hand with HTML and can be applied in three main ways. The first is Inline CSS, where styles are applied directly to individual elements using the style attribute inside an HTML tag. This approach is useful for quick, one-off styling but not recommended for large projects since it becomes difficult to maintain.
Example: Attach CSS to HTML 
<!-- External stylesheet -->
<link rel="stylesheet" href="styles.css">

<!-- Internal stylesheet -->
<style>
  body { font-family: system-ui; }
</style>

<!-- Inline style -->
<p style="color: crimson">Hello CSS</p>

2. Types of CSS

2.1 Inline CSS

The main advantage of inline CSS is its simplicity—changes apply instantly to the element without needing extra files. However, the downsides are significant: it mixes content with design (making code harder to maintain), bloats HTML, and makes it difficult to keep styles consistent across a site. If you want to update the look of multiple elements, you would need to edit each inline style one by one, which is inefficient.

<p style="color: red; font-weight: 700;">Inline CSS example</p>

2.2 Internal CSS

[Explain the <style> tag in the <head>, scope to a single page.]

<style>
  p { color: steelblue; }
</style>

2.3 External CSS

[Explain linking external .css files, caching benefits, scalability.]

<link rel="stylesheet" href="styles.css">

3. CSS Selectors

3.1 Basic Selectors

p { color: #ddd; }
.note { font-size: 1rem; }
#hero { background: #222; }

3.2 Combinators

[Descendant, child (>), adjacent sibling (+), general sibling (~)]

article p { color: #9ad; }
nav > a { text-decoration: none; }
h2 + p { margin-top: 0; }
label ~ small { color: #888; }

3.3 Pseudo-classes

a:hover { color: salmon; }
input:focus { outline: 2px solid var(--accent); }

3.4 Pseudo-elements

p::first-line { font-weight: 700; }
button::after { content: " →"; }

3.5 Attribute Selectors

input[type="text"] { border: 1px solid #334; }
img[alt~="logo"] { filter: drop-shadow(0 2px 6px #0007); }

4. CSS Properties

4.1 CSS Font

[Explain font-family, font-size, font-weight, line-height, @font-face.]

p { font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.6; }

4.2 CSS Color and Background

[Explain color formats (hex, rgb, hsl), background-color/image/repeat/size/position.]

body { color: #eaeef5; background: linear-gradient(90deg, #0f2027, #203a43, #2c5364); }

4.3 CSS Borders

div.card { border: 2px solid #223; border-radius: 12px; }

4.4 CSS Margin and Padding

.box { margin: 1rem 2rem; padding: 12px 16px; }

4.5 CSS Text

p { text-align: center; letter-spacing: .02em; text-transform: uppercase; }

4.6 CSS Height/Width

.panel { width: 320px; max-width: 100%; height: 200px; }

4.7 CSS Position and Float

.sticky { position: sticky; top: 0; }
img.figure { float: right; margin: 0 0 1rem 1rem; }

4.8 CSS Overflow

.scroll { width: 240px; height: 120px; overflow: auto; }

4.9 CSS Box Model

[Insert a diagram of content → padding → border → margin.]

Box Model Example 
.box-model {
  margin: 20px;   /* outside */
  border: 4px solid #334; /* border */
  padding: 12px;  /* inside border */
  background: #12192e;    /* content area */
}

4.10 CSS Navigation Bar

Simple Horizontal Nav 
nav ul { list-style: none; display: flex; gap: 16px; padding: 0; }
nav a { color: #cfd6e6; text-decoration: none; padding: 8px 10px; border-radius: 8px; }
nav a:hover { background: #141a2b; }

5. CSS Advanced Properties

5.1 CSS Rounded Corners

.chip { border-radius: 999px; }

5.2 CSS Border Images

.fancy { border: 16px solid transparent; border-image: url(border.png) 30 round; }

5.3 CSS Text Effects

h1.title { text-shadow: 2px 2px 10px #0008; filter: drop-shadow(0 6px 18px #0007); }

5.4 CSS Gradients

.gradient { background: linear-gradient(120deg, #7c5cff, #4cc9f0); }

5.5 CSS Shadows

.card { box-shadow: 0 10px 30px rgba(0,0,0,.25); }

6. CSS Measurement Units

6.1 Absolute Units

6.2 Relative Units

p { font-size: 1.125rem; margin: 5%; max-width: 65ch; }

7. CSS Website Layout

7.1 Flexbox

Common Flex Patterns 
.row { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.center { display: flex; align-items: center; justify-content: center; }

7.2 Grid

Two-column Grid 
.grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }

7.3 Responsive Design

[Describe fluid layouts, mobile-first strategy, responsive images.]

7.4 Media Queries

@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
}

Notes / To‑Do