INTRODUCTION TO CSS
Notes
Dr. Arun Silivery
7th January, 2026
1. What is CSS, and why do we use it?
2.Is CSS a programming language or a styling language?
3.Where do we write CSS — in the browser, HTML file,
or a separate file?
4.What is the basic syntax of CSS?
5.What is the Cascade in CSS?
6.Can you mention a few types of selectors?
1
Introduction to CSS
What is CSS, and why do we use it?
CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance
and layout of content written in HTML.
While HTML defines the structure and meaning of a webpage (what the content is), CSS
defines how it looks — colors, fonts, spacing, alignment, sizes, animations, and page layout.
✅ Why we use CSS
We use CSS because it allows us to:
● Separate content from design → HTML handles structure, CSS handles styling
● Improve maintainability → change one CSS file instead of editing every page
● Make websites responsive → so they work on mobiles, tablets, and desktops
🧩 Example
Without CSS → plain, unstyled page
With CSS → visually appealing, readable, professional website
2
Is CSS a programming language or a styling language?
CSS is a (stylesheet) styling language, not a programming
language. CSS is designed to describe the presentation of a
webpage. CSS does not control logic or behavior — it only controls
visual styling.
Even though modern CSS has features like variables and functions
(e.g., calc(), var()), they are used only for styling purposes, not for
programming logic.
Where do we write CSS — in the browser, HTML file, or a
separate file?
We can write CSS in three ways:
1. Inline CSS – inside an HTML element <p style="color: blue; ">
2. Internal CSS – inside a <style> tag in the HTML <head>
3. External CSS (recommended) – in a separate .css file linked
to HTML
3
What is the basic syntax of CSS?
selector {
property-name: value;
}
Example : p{
color: red;
}
· Selector → selects the HTML element
· Property → style attribute you want to change
· Value → setting applied to the property
· Declaration → property: value; A colon ( : ) separates property and value.
· Declaration block → inside { } Curly braces group all declarations belonging to a
selector.
What is the Cascade in CSS?
When multiple rules apply to the same element, the last rule usually wins.
p { color: blue; }
p { color: red; } /* final style = red */
Can you mention a few types of selectors?
4
1. Universal Selector (*)
The universal selector * selects all elements on the page.
HTML:
* {
margin: 0;
padding: 0;
}
5
2. Type / Tag Selector
Targets elements by HTML tag name.
HTML:
p {
color: green;
}
3. Class Selector (.)
Used to style multiple elements with the same class.
HTML:
.note {
color: blue;
font-weight: bold;
}
<p class="note">Important Info</p>
<p class="note">Read Carefully</p>
4. ID Selector (#)
Targets a single unique element.
HTML:
#title {
color: red;
}
<h1 id="title">Welcome</h1>
6
5. Group Selector (,)
Apply the same style to multiple selectors.
HTML:
h1, h2, h3 {
font-family: Arial;
}
6. Descendant Selector (Space)
Targets elements inside another element.
HTML:
div p {
color: brown;
}
7. Child Selector (>)
Selects only direct children.
HTML:
ul > li {
list-style: square;
}
8. Attribute Selector
Targets elements based on attributes.
HTML:
input[type="text"] {
border: 2px solid blue;
}
7
9. Pseudo-Class Selector (:)
Styles special states of elements.
HTML:
a:hover {
color: orange;
}
10. Pseudo-Element Selector (::)
Styles parts of an element.
p::first-line {
font-weight: bold;
}