Overview of what CSS (Cascading Style Sheets) is, its importance in web development, and how it is used to style HTML elements on a webpage.
Introduction to CSS (Cascading Style Sheets)
Version: CSS 3 – current standard
| Aspect | Description |
|---|---|
| Definition | A language that describes how HTML (or XML) elements should be rendered on screen, paper, or other media. |
| Purpose | Separates content (HTML) from presentation (styles), enabling: • Consistent look across pages • Faster development & maintenance • Re‑usable design components |
| Key Idea | Cascading – multiple style rules can apply to the same element; the final appearance is determined by a hierarchy of origins, specificity, and source order. |
selector {
property: value; /* declaration */
property2: value2; /* another declaration */
}
/* comment text */| Category | Example | What It Targets |
|---|---|---|
| Element | p {} |
All <p> tags |
| Class | .menu {} |
Elements with class="menu" |
| ID | #header {} |
Element with id="header" (unique) |
| Attribute | input[type="text"] {} |
<input> elements whose type attribute equals text |
| Descendant | nav ul li {} |
<li> inside <ul> inside <nav> |
| Child | ul > li {} |
Direct child <li> of <ul> |
| Pseudo‑class | a:hover {} |
Links when mouse hovers |
| Pseudo‑element | p::first-line {} |
First line of every <p> |
| Group | h1, h2, h3 {} |
All three heading levels |
| Universal | * {} |
Every element (rarely used) |
Origin (order of importance)
!important) override all but later !important rules.Specificity (weight of a selector)
a=1, b=0, c=0 (most specific)0,1,00,0,10,0,0,1Higher specificity wins; if equal, later rule in the stylesheet wins.
| Method | Syntax | Typical Use |
|---|---|---|
| Inline | <p style="color:red;">Text</p> |
Quick test, rarely for production |
| Embedded | <style> p { color:red; } </style> placed in <head> |
Small projects, single‑page demos |
| External | <link rel="stylesheet" href="styles.css"> |
Production‑ready, reusable across many pages |
| Import | @import url("theme.css"); inside a CSS file |
Modularizing |