---
title: "Cascading Style Sheets (CSS)"
subject: "Web Technology"
chapter: 2
key: "semester_7/web_technology:css-explained"
source: https://www.bctengineer.com/q/semester_7/web_technology/css-explained
site: BCT Engineering
---

# Cascading Style Sheets (CSS)

Web Technology · Chapter 2: Web basics

- Asked in: 2076 Chaitra, 3 marks; year not given, 2.5 marks
- Video: [Cascading Style Sheets (CSS) | Web Development Concepts](https://www.youtube.com/watch?v=BqjUf85nzvM) — JomaClass
- Answer checked by Claude Opus 5.5 (high effort) on 2026-10-14
- Page: https://www.bctengineer.com/q/semester_7/web_technology/css-explained
- Whole chapter: https://www.bctengineer.com/md/semester_7/web_technology/chapter-2

## Question

Explain CSS (Cascading Style Sheet).

## Short answer

CSS is a stylesheet language controlling presentation (colors, layout, fonts) separately from HTML. Rules cascade by specificity and order; it can be inline, internal, or external. CSS enables consistent styling across pages, faster loading, and responsive design.

## Answer

**CSS (Cascading Style Sheets)** is a style sheet language used to control the presentation of HTML/XML documents: colours, fonts, spacing, layout and responsiveness. It separates **content (HTML)** from **presentation (CSS)**. "Cascading" means that when several rules apply to an element, the browser resolves conflicts using a defined order of priority.

#### Syntax
```css
selector {
  property: value;
}
h1 { color: blue; font-size: 24px; }
```

#### Ways of applying CSS
1. **Inline:** `<p style="color:red">Text</p>` (highest priority, affects one element).
2. **Internal:** rules inside a `<style>` element in `<head>`.
3. **External:** a separate `.css` file linked with `<link rel="stylesheet" href="style.css">` (best for many pages).

#### Selectors
Element (`p`), class (`.note`), id (`#header`), group (`h1, h2`), descendant (`div p`), attribute and pseudo-class (`a:hover`).

#### Cascade order
Priority is decided by origin and importance (`!important`), then **specificity** (id > class > element), then the order of appearance (the last rule wins). Some properties are **inherited** from parent to child.

#### Advantages
- Same look across many pages from one file; easy site-wide changes.
- Smaller, cleaner HTML and faster loading (CSS is cached).
- Different styles for different media (screen, print, mobile) using media queries.
- Better accessibility and layout control (Flexbox, Grid, box model).

## Check yourself

The answer's key points as multiple-choice questions, with the correct option and why.

1. What does CSS separate?
   A. Content (HTML) from presentation
   B. Client from server
   C. Data from database
   D. Scripts from images
   Answer: A. CSS controls look; HTML holds content. (Key point: Separation)

2. Which selector type has the highest specificity in the cascade (after importance)?
   A. Element selector
   B. id selector
   C. Class selector
   D. Group selector
   Answer: B. Specificity order is id > class > element. (Key point: Specificity)

3. Why is an external stylesheet best for many pages?
   A. It overrides inline styles always
   B. It is written in JavaScript
   C. One file controls the look of all pages and is cached
   D. It works only on one page
   Answer: C. Linking one .css file gives site-wide consistency and faster loading by caching. (Key point: External CSS)

## Related in Web Technology

- [CSS box model margin and padding](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Acss-box-model-layout) — Web Technology, chapter 2

## Related in other subjects

- [Parallel plate sheets, field in regions](https://www.bctengineer.com/question.md?key=semester_3%2Felectromagnetism%3Aparallel-plate-sheets-three-regions) — Electromagnetism, chapter 2