P2.1: CSS Selectors & Rules
CSS (Cascading Style Sheets) brings your structural HTML webpages to life. In this lesson, we will master how to declare styles and target elements using selectors and cascading rules.
Advertisement
LESSON SLIDES
1 / 8
Advertisement
Nextsem Academy
Lesson: p2-1-selectors
Slide 1 / 8
P2.1: CSS Selectors & Rules
CSS (Cascading Style Sheets) brings your structural HTML webpages to life. In this lesson, we will master how to declare styles and target elements using selectors and cascading rules.
Slide 2 / 8
1. How CSS Works
CSS works by associating rules with HTML elements. A CSS rule contains two main parts: a selector (which points to the HTML elements to style) and a declaration (which contains styling properties and values).
Example
/* Selector */
h1 {
/* Property : Value */
font-family: Arial;
color: #4ade80;
}
- Property: The visual aspect you want to change (e.g.
color,font-size,border). - Value: The setting for that property (e.g.
red,12px,solid). - Declarations are enclosed in curly brackets
{ }and must end with a semicolon;.
Slide 3 / 8
2. Dynamic Styling Engagement
Clean, modular CSS stylesheets decouple presentation logic from document structure, improving code maintainability.
CSS Architecture Optimization Benefits
Relative improvement in page load speed and stylesheet file size.
Slide 4 / 8
RoleTechnical Writer & CSS WG Member
Salary₹80 Lakhs/yr equivalent
CompanySmashing Magazine / W3C
Slide 5 / 8
3. Applying CSS to Webpages
You can add CSS rules to your HTML in three different ways:
External CSS (Recommended)
Places all CSS rules in a separate file (e.g., styles.css) and links to it in the HTML <head>. This separates content from presentation and allows multiple pages to share the same stylesheet.
Example
<link rel="stylesheet" type="text/css" href="css/styles.css" />
Internal CSS
Places CSS rules directly inside a <style> element in the HTML <head>. Ideal for one-off single-page layouts.
Example
<head>
<style type="text/css">
body { background-color: #0f172a; }
</style>
</head>
Inline CSS
Applies styles directly to individual tags using the style attribute.
[!WARNING] Inline styles should generally be avoided because they blend content and presentation, making it harder to maintain styling across large websites.
Example
<p style="color:red; font-size:12px;">This is inline styled text.</p>
Slide 6 / 8
4. CSS Selectors Reference
Selectors tell the browser which HTML elements a rule applies to. You can target elements based on their type, nesting, or attributes.
| Selector Type | Syntax | Meaning | Example |
| :--- | :--- | :--- | :--- |
| Universal | * | Targets all elements on the page. | * { margin: 0; } |
| Type | h1, p | Matches HTML element names. | p { line-height: 1.5; } |
| Class | .note | Matches elements with the specified class. | .note { color: gray; } |
| ID | #intro | Matches the unique element with the specified id. | #intro { font-weight: bold; } |
| Child | li > a | Matches direct children of a parent element. | li > a { color: blue; } |
| Descendant | p a | Matches nested elements, regardless of depth. | p a { text-decoration: none; } |
| Adjacent Sibling | h1 + p | Matches the first sibling immediately after an element. | h1 + p { margin-top: 10px; } |
| General Sibling | h1 ~ p | Matches any sibling element that follows. | h1 ~ p { color: slate; } |
Slide 7 / 8
3. The
5. CSS Cascade & Specificity
When multiple rules target the same element, browsers resolve conflicts using the cascade, which determines precedence based on three principles:
1. Last Rule
If two selectors are identical in specificity and target the same element, the rule that appears last in the stylesheet overrides previous ones.
Example
i { color: green; }
i { color: red; } /* Wins! text will be red */
2. Specificity
More specific selectors override more general selectors. Specificity is calculated using a scoring system:
- Inline style = 1000
- ID selector = 100
- Class / Attribute selector = 10
- Type selector (HTML tag) = 1
- Universal selector = 0
Example
p { color: white; } /* Specificity: 1 */
.note { color: gray; } /* Specificity: 10 (Wins!) */
p#intro { color: green; } /* Specificity: 101 (Wins over class!) */
3. The !important Flag
You can write !important after any property value to override all specificity and ordering calculations. Use this flag sparingly, as it makes debugging layout rules extremely difficult.
Example
p { color: red !important; } /* Overrides all specific classes or IDs */
Slide 8 / 8The
6. CSS Inheritance
Some CSS properties are inherited by child elements. For example, if you set font-family or color on the <body> element, all paragraphs and headings inside the body will inherit that font and color automatically.
However, layout-based properties (like background-color, border, margin, and padding) are not inherited to prevent visual clutter.
The inherit Keyword:
You can force any property to inherit a value from its parent by using the inherit value:
Example
.page {
/* Inherits padding dimensions set on parent <body> */
padding: inherit;
}
Advertisement