Lecture 9: CSS Units & Advanced Selectors

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-09

Lecture 9

CSS Units & Advanced Selectors

Week 3 | Unit II: CSS Styling & JavaScript
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

  • Understand absolute vs relative CSS units
  • Master responsive sizing with relative units
  • Write advanced CSS selectors
  • Combine selectors for precise targeting
  • Optimize CSS for readability and maintainability

Absolute CSS Units

Fixed size units (don’t change):

body { font-size: 16px; }      /* pixels */
h1 { font-size: 96pt; }        /* points (print) */
p { font-size: 12mm; }         /* millimeters (print) */
div { width: 10cm; }           /* centimeters (print) */

Best for: - Print stylesheets - Pixel-perfect designs - Fixed layouts (not recommended anymore)

Relative CSS Units (Recommended)

em & rem

p { font-size: 1em; }
/* 1em = current font size */

h1 { font-size: 2rem; }
/* 1rem = root (html) size */

Perfect for scaling

Percentages

width: 100%;
/* 100% of parent */

height: 50%;
/* 50% of parent */

Great for responsive layouts

Viewport-based Units

Units based on screen size:

width: 100vw;        /* 100% of viewport width */
height: 100vh;       /* 100% of viewport height */
font-size: 5vw;      /* 5% of viewport width */
padding: 2vh;        /* 2% of viewport height */

Perfect for: - Full-screen sections - Responsive typography - Hero images

Unit Comparison Chart

px (pixels)     → Fixed size, precise
em             → Relative to parent element
rem            → Relative to root (html)
%              → Relative to parent
vw/vh          → Relative to viewport

Example:

<html> <!-- root = 16px -->
  <body style="font-size: 20px;">
    <p style="font-size: 1em;">
      This is 20px (1em = parent)
    </p>
    <p style="font-size: 1rem;">
      This is 16px (1rem = root)
    </p>
  </body>
</html>

Type (Element) Selectors

Select all elements of a type:

p { color: blue; }          /* All paragraphs */
h1 { font-size: 32px; }     /* All h1 headings */
body { background: white; } /* Body element */

Group selectors:

h1, h2, h3 {
    color: #333;
    font-weight: bold;
}
/* Applies to all h1, h2, and h3 */

Class and ID Selectors

/* Class selector (multiple use) */
.highlight {
    background-color: yellow;
}

/* ID selector (unique) */
#header {
    background-color: navy;
    color: white;
}

In HTML:

<p class="highlight">Highlighted text</p>
<div id="header">Page Header</div>

Descendant & Child Selectors

Descendant selector (any nested element):

article p { color: #666; }
/* All <p> inside <article>, no matter how deep */

Child selector (direct children only):

article > p { color: blue; }
/* Only <p> that are direct children of <article> */

Sibling selector:

h1 + p { font-weight: bold; }
/* <p> that comes right after <h1> */

Attribute Selectors

Select by HTML attributes:

input[type="text"] { border: 1px solid blue; }
a[target="_blank"] { color: red; }
img[alt] { opacity: 0.9; }
a[href^="https"] { color: green; } /* Starts with */
a[href$=".pdf"] { color: orange; }  /* Ends with */

Very powerful for styling specific elements!

Pseudo-classes

Special selector states:

a:hover { color: red; }           /* On mouse hover */
input:focus { border: 2px blue; } /* When focused */
p:first-child { font-weight: bold; } /* First child */
li:last-child { margin-bottom: 0; }  /* Last child */
p:nth-child(2n) { background: #f0f0f0; } /* Every 2nd */

Pseudo-elements

Create virtual elements:

p::first-letter { font-size: 2em; } /* First letter */
p::first-line { font-weight: bold; } /* First line */
a::before { content: "[Link] "; }  /* Before content */
a::after { content: " →"; }        /* After content */

Common use:

/* Add decorative content */
li::before {
    content: "→ ";
    color: blue;
}

CSS Specificity & Cascade

How CSS decides which rule wins:

ID selectors        → 100 points  (#header)
Class selectors     → 10 points   (.highlight)
Element selectors   → 1 point     (p, h1)

Example:

/* 1 point */
p { color: blue; }

/* 10 points - wins! */
.highlight { color: red; }

/* 100 points - always wins */
#main { color: green; }

Tip: Avoid !important - use specificity instead

Combining Selectors for Power

/* Descendant */
.container p { color: blue; }

/* Child */
.container > p { font-weight: bold; }

/* Multiple classes */
.container.active { background: yellow; }

/* Attribute + class */
input[type="text"].error { border: red; }

Real-world Selector Example

/* Style all links */
a { color: #0066cc; }

/* External links differently */
a[target="_blank"] { color: #ff9900; }

/* Links in navigation */
nav a { text-decoration: none; }

/* Links when user hovers */
nav a:hover { text-decoration: underline; }

/* First link in navigation */
nav a:first-child { font-weight: bold; }

Resources & References

Questions?

Next: Lecture 10 - CSS Box Model & Positioning