Introduction
When you visit a website, what catches your attention first? It’s usually not just the text, but the way the page looks, the colors, the fonts, the spacing, and how neatly everything is arranged. All of this is possible because of CSS (Cascading Style Sheets). Without CSS, websites would appear as plain text and simple structures, with little or no design.
CSS is one of the core technologies of the web, alongside HTML and JavaScript. While HTML provides the structure and content of a webpage, CSS is responsible for presentation. It separates style from content, giving developers the power to control design consistently across multiple pages. In this lecture, we’ll break down what CSS is, how it works, why it matters, and how students in Class 9 can begin applying it in practical web development projects.
Full Definitions
Definition of CSS
CSS (Cascading Style Sheets) is a style sheet language used to control the presentation and design of web pages. It allows developers to define how HTML elements should be displayed by specifying properties like colors, fonts, layout, spacing, and backgrounds.
Definition of CSS Rule
A CSS rule or basic structure of CSS is a set of instructions that tells the browser how to style specific HTML elements. It consists of:
- Selector: the HTML element to target.
- Declaration block: one or more style rules inside
{ }
. - Declaration: each contains a property and its value.
Example: h1 { color: red; font-size: 24px; }
Integrating CSS in HTML
There are 3 ways to add CSS to HTML:
- Inline CSS: Applied directly to a single element using the
style
attribute. Best for quick styling but not for large projects.
<h1 style="color: blue;">Hello World</h1>
- Internal CSS: Written inside the
<style>
tag in the<head>
section. Applies to that specific page only.
<style> h1 { color: yellow; } </style>
- External CSS: Stored in a separate
.css
file and linked with the<link>
tag. Best for large projects.
<link rel="stylesheet" href="styles.css">
Definition of Fonts in CSS
Fonts in CSS control the appearance of text. Properties include:
- font-family: sets typeface (e.g., Arial, Times New Roman).
- font-size: sets text size (px, em, %, rem).
- font-weight: normal, bold, lighter.
- font-style: normal, italic, oblique.
Definition of Backgrounds in CSS
Backgrounds in CSS define the color, image, position, and size of a webpage’s background. Common properties:
- background-color: sets a solid background color.
body { background-color: blue; }
- background-image: sets an image as background.
body { background-image: url("image.jpg"); }
- background-repeat: repeat, no-repeat.
body { background-repeat: repeat; }
- background-position: sets image position (top, center, bottom).
body { background-position: center; }
- background-size: auto, cover, contain.
body { background-size: cover; }
Quick Notes – Styling with CSS
Definition: CSS (Cascading Style Sheets) is used to style and format HTML elements, separating design from content. It controls colors, fonts, layouts, spacing, and overall look of webpages.
Basic Structure of CSS
A CSS rule has two parts:
- Selector: chooses the HTML element(s).
- Declaration: property + value.
Example: h1 { color: red; font-size: 24px; }
Ways to Add CSS in HTML
- Inline CSS: added inside the HTML element using the
style
attribute. Best for small changes.
Example:<h1 style="color: blue;">Hello</h1>
- Internal CSS: written inside
<style>
tag in the<head>
. Affects the whole page. - External CSS: written in a separate
.css
file and linked with<link>
tag. Best for large projects.
Styling Fonts
- font-family: changes font type (Arial, Times New Roman, etc.).
- font-size: sets text size.
- font-weight: normal, bold.
- font-style: normal, italic.
Example: p { font-family: Arial; font-size: 16px; font-weight: bold; font-style: italic; }
Backgrounds in CSS
Backgrounds in CSS define the color, image, position, and size of the background of a webpage or an element.
Styling Backgrounds
- background-color: sets solid background color.
body { background-color: blue; }
- background-image: sets an image as background.
body { background-image: url("image.jpg"); }
- background-repeat: repeat, no-repeat.
body { background-repeat: repeat; }
- background-position: sets image position (top, center, bottom).
body { background-position: center; }
- background-size: auto, cover, contain.
body { background-size: cover; }
MCQs
- CSS stands for:
a) Cascading Style Structure
b) Cascading Style Sheets ✅
c) Creative Style System
d) Computer Styling Source - Which of the following is NOT a way to integrate CSS with HTML?
a) Inline CSS
b) Internal CSS
c) External CSS
d) Procedural CSS ✅ - In CSS, which part selects the HTML element to be styled?
a) Declaration
b) Selector ✅
c) Property
d) Value - What is the correct syntax for a CSS rule?
a) selector { property = value; }
b) selector { property: value; } ✅
c) selector ( property: value )
d) selector : property = value; - Inline CSS is written using which attribute?
a) style ✅
b) css
c) font
d) design - The <style> tag is used in which section of an HTML document?
a) <body>
b) <footer>
c) <head> ✅
d) <title> - Which is the most efficient method for large projects to apply CSS?
a) Inline CSS
b) Internal CSS
c) External CSS ✅
d) Embedded CSS - Which CSS property is used to change the text color?
a) text-color
b) background-color
c) color ✅
d) font-color - If you want a background image to cover the entire page, which property do you use?
a) background-fill
b) background-position
c) background-size: cover ✅
d) background-repeat - Which of the following is TRUE about CSS?
a) CSS mixes content and style in the same file.
b) CSS makes webpages responsive and reusable. ✅
c) CSS can only be used for colors, not layouts.
d) CSS is mandatory for all webpages.
Why CSS is Important
Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]CSS is important for many reasons. It improves user experience, makes websites visually appealing, and enables efficient maintenance.
- Separation of concerns: CSS keeps presentation separate from HTML content. This makes your HTML cleaner and easier to read.
- Consistency: With external CSS, you can change the look of your whole website by changing a single file. This keeps style consistent across pages.
- Performance: External CSS is cached by browsers, so pages load faster after the first visit.
- Accessibility: Proper use of CSS can improve readability for users with visual impairments (larger fonts, contrast, spacing).
- Responsive design: CSS enables websites to adapt to different screen sizes, from phones to desktops.
- Design freedom: You can create complex layouts, animations, and visual effects without changing HTML structure.
CSS Selectors in Detail
Selectors are the heart of CSS. They choose which elements to style. Understanding selectors gives you control and precision.
Common selector types
- Type selector: targets elements by tag name. Example:
p {}
,h1 {}
. - Class selector: targets elements with a class attribute. Starts with a dot. Example:
.highlight {}
. Multiple elements can share a class. - ID selector: targets one unique element with an id. Starts with a hash. Example:
#header {}
. IDs should be unique per page. - Attribute selector: selects elements with a specific attribute. Example:
a[target="_blank"] {}
. - Descendant selector: targets elements inside another element. Example:
nav a {}
(targets links inside nav). - Child selector: selects direct children only. Example:
ul > li {}
. - Pseudo-classes: style elements in special states, e.g.,
a:hover
,input:focus
. - Pseudo-elements: style sub-parts of elements, e.g.,
p::first-line
,::before
,::after
.
Specificity and cascade
When multiple rules apply to the same element, CSS uses the cascade and specificity to decide which rule wins:
- Inline styles (style="") have highest priority.
- ID selectors are stronger than class selectors.
- Class selectors are stronger than type selectors.
- Later rules override earlier rules if specificity is equal.
Example: Combining selectors
/* style all paragraphs inside .article */
.article p { line-height: 1.6; }
/* highlight links inside nav when hovered */
nav a:hover { text-decoration: underline; }
The CSS Box Model
The box model is a core concept that describes how elements are sized and spaced. Every HTML element is treated as a rectangular box composed of:
- Content – the text or media inside the box.
- Padding – space between content and border.
- Border – the line around the padding (optional).
- Margin – space outside the border separating elements.
Why it matters
Understanding the box model helps you control spacing and layout precisely. For example, two elements with margins can collapse (margin collapse), affecting layout unexpectedly unless you anticipate it.
Example:
div.card {
padding: 16px; /* space inside card */
border: 1px solid #ccc;
margin-bottom: 12px; /* space outside card */
}
Responsive Web Design with CSS
Responsive design ensures your website looks good on devices of all sizes. CSS provides tools to build responsive layouts without separate mobile sites.
Key techniques
- Fluid layouts: Use percentages instead of fixed pixels for widths so elements scale with the screen.
- Flexible images: Make images responsive with
max-width: 100%;
so they shrink inside containers. - Media queries: Apply different styles at different screen widths. Example:
@media (max-width: 600px) { ... }
. - Responsive units: Use
em
,rem
,vw
, andvh
units for scalable typography and spacing. - Mobile-first approach: Write styles for mobile first, then add media queries for larger screens.
Simple media query example
/* default mobile styles */
.container { padding: 12px; }
/* larger screens */
@media (min-width: 768px) {
.container { padding: 24px; max-width: 900px; margin: 0 auto; }
}
Best Practices for Writing CSS
Good habits make CSS easier to maintain and less error-prone. Here are practical tips:
- Use external stylesheets for site-wide consistency.
- Name classes meaningfully (e.g.,
.btn-primary
rather than.red
), so styles describe purpose, not appearance. - Keep selectors specific but not too specific — avoid overly long selector chains that are hard to override.
- Organize stylesheet logically (reset/base → layout → components → utilities).
- Use comments to explain non-obvious decisions:
/* card layout */
. - Prefer classes for reusable styles instead of styling tags directly.
- Avoid inline styles except for quick testing; they’re harder to maintain.
- Use CSS variables (custom properties) for repeated values like colors and spacing:
:root { --main-color: #2a7ae2; }
. - Test across browsers and use vendor prefixes only when necessary (or tools like Autoprefixer).
- Keep accessibility in mind: ensure sufficient color contrast and readable font sizes.
FAQs on CSS
1. What is the difference between HTML and CSS?
HTML provides the structure of a webpage (headings, paragraphs, links, images), while CSS defines the styling (colors, fonts, spacing, layout). Together, they create a complete and visually appealing webpage.
2. Why is CSS called "Cascading" Style Sheets?
CSS is called cascading because styles are applied in a priority order — inline styles override internal styles, and internal styles override external styles unless overridden with !important
. This "cascade" determines which rules take effect when conflicts occur.
3. Can CSS be used without HTML?
No, CSS cannot work on its own. It must be applied to HTML (or XML/other markup languages). CSS describes how markup elements should appear in the browser.
4. Which is better: Inline, Internal, or External CSS?
For small projects, internal CSS is fine. For quick fixes, inline CSS may be used. But for professional, large projects, external CSS is always recommended because it keeps design separate from structure and allows reusability across pages.
5. How does CSS improve website performance?
By using external stylesheets, browsers can cache CSS files, reducing load times for repeated visits. It also keeps code organized, making it easier to update styles without editing each HTML file individually.
6. What are CSS Selectors?
CSS selectors are patterns used to target HTML elements for styling. Examples include element selectors (p
), class selectors (.classname
), ID selectors (#id
), and attribute selectors (input[type="text"]
).
7. What is the difference between relative units (em, rem, %) and absolute units (px)?
Pixels (px) are fixed-size units, while relative units (em, rem, %) scale based on parent or root element size. Relative units help make designs more flexible and responsive.
8. What is the difference between CSS2 and CSS3?
CSS3 introduced many new features like rounded corners (border-radius
), transitions, animations, shadows, gradients, and responsive media queries. CSS2 was more limited to basic styling without these advanced visual features.
9. Can CSS be used for animations?
Yes! CSS supports animations and transitions. For example, transition: all 0.3s ease;
can animate color or size changes smoothly. Full animations can be created using @keyframes
.
10. Is learning CSS still important in 2025?
Absolutely. While frameworks (like Tailwind, Bootstrap) exist, they are all built on CSS. A strong understanding of CSS fundamentals is necessary to customize designs, fix issues, and build professional websites.