CSS3 gives power to make websites modern, interactive, beautiful, and professional.
Earlier websites looked simple like plain paper.
Now with CSS3, webpages can glow like neon, move like waves, and adapt like water.
Think of CSS3 as:
- HTML = Structure of house
- CSS = Paint and decoration
- CSS3 Advanced Features = Luxury interior design
1. Advanced Selectors
Selectors are used to target HTML elements.
Basic selectors:
p {
color: blue;
}
But CSS3 gives advanced selectors for more control.
A) Universal Selector *
Targets everything.
Example
* {
margin: 0;
padding: 0;
}
Logic
Browsers add default spacing.
This selector removes all default spacing.
B) Group Selector ,
Apply same style to multiple elements.
Example
h1, h2, p {
font-family: Arial;
}
Output
All headings and paragraphs use Arial font.
C) Descendant Selector space
Targets elements inside another element.
HTML
<div>
<p>Hello World</p>
</div>
CSS
div p {
color: red;
}
Logic
Only <p> inside <div> becomes red.
D) Child Selector >
Targets direct child only.
HTML
<div>
<p>Direct Child</p>
<section>
<p>Nested Child</p>
</section>
</div>
CSS
div > p {
color: green;
}
Output
Only first paragraph becomes green.
E) Attribute Selector []
Targets elements using attributes.
Example
input[type="text"] {
border: 2px solid blue;
}
Logic
Only text input gets blue border.
2. Pseudo Classes
Pseudo classes define a special state of an element.
Syntax:
selector:pseudo-class
A) :hover
When mouse moves over element.
Example
button:hover {
background-color: black;
color: white;
}
Logic
Creates interactive effect.
Real Example
E-commerce websites change button color on hover.
B) :focus
When user clicks inside input field.
Example
input:focus {
border: 2px solid green;
}
Output
Input glows when typing starts.
C) :first-child
Targets first child element.
HTML
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
CSS
li:first-child {
color: red;
}
Output
Apple becomes red.
D) :last-child
Targets last child.
li:last-child {
color: blue;
}
E) :nth-child()
Targets specific numbered element.
Example
li:nth-child(2) {
color: green;
}
Output
Second list item becomes green.
3. Pseudo Elements
Pseudo elements style specific parts of elements.
Syntax:
selector::pseudo-element
A) ::before
Adds content before element.
Example
h1::before {
content: "🔥 ";
}
Output
🔥 Welcome
B) ::after
Adds content after element.
Example
h1::after {
content: " 🚀";
}
Output
Welcome 🚀
C) ::first-letter
Styles first letter.
Example
p::first-letter {
font-size: 40px;
color: red;
}
Real Example
Used in newspapers and blogs.
D) ::first-line
Styles first line.
p::first-line {
font-weight: bold;
}
4. Advanced Background Properties
Background makes webpage visually attractive.
A) Background Image
Example
body {
background-image: url("nature.jpg");
}
B) Background Size
Example
background-size: cover;
Logic
Image covers full area.
C) Background Position
Example
background-position: center;
Logic
Image stays centered.
D) Background Repeat
Example
background-repeat: no-repeat;
Logic
Prevents repeating image.
E) Multiple Backgrounds
Example
background-image:
url("star.png"),
url("sky.jpg");
Logic
Layer multiple images together.
5. Border Effects
Borders are not just lines anymore in CSS3.
A) Rounded Borders
Example
div {
border-radius: 20px;
}
Output
Smooth rounded corners.
Real Example
Modern cards and buttons.
B) Circle Shape
img {
border-radius: 50%;
}
Output
Round profile image.
C) Gradient Borders
Example
div {
border: 5px solid transparent;
border-image: linear-gradient(red, blue) 1;
}
Output
Colorful modern border.
6. Shadows
Shadows create depth.
Without shadow:
- Flat design
With shadow:
- 3D professional look
A) Box Shadow
Example
div {
box-shadow: 5px 5px 10px gray;
}
Understanding Values
box-shadow:
horizontal vertical blur color;
Example
box-shadow: 0 0 20px black;
Creates glowing effect.
Real Example
Cards in:
- Amazon
- YouTube
- Dashboards
B) Text Shadow
Example
h1 {
text-shadow: 2px 2px 5px gray;
}
Output
Stylish glowing text.
7. Filters
Filters apply visual effects like photo editing apps.
A) Blur
Example
img {
filter: blur(3px);
}
Output
Blurry image.
B) Brightness
filter: brightness(150%);
Makes image brighter.
C) Grayscale
filter: grayscale(100%);
Converts image to black & white.
D) Contrast
filter: contrast(200%);
Increases color difference.
E) Drop Shadow
filter: drop-shadow(5px 5px 10px black);
Creates shadow around image.
Complete Real Example
HTML
<div class="card">
<img src="nature.jpg">
<h2>Beautiful Nature</h2>
<p>
Nature teaches peace and patience.
</p>
<button>Read More</button>
</div>
CSS
.card {
width: 300px;
padding: 20px;
background: white;
border-radius: 20px;
box-shadow: 0 0 15px gray;
transition: 0.3s;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 0 25px black;
}
.card img {
width: 100%;
border-radius: 15px;
filter: grayscale(20%);
}
button {
background: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 10px;
}
button:hover {
background: black;
}
Output Features
This single project uses:
- Border radius
- Hover effect
- Shadows
- Filters
- Transitions
- Advanced styling
Result: A modern professional card design.
Real World Uses of Advanced CSS3
| Feature | Real Usage |
|---|---|
| Hover Effects | Buttons, menus |
| Shadows | Cards, popups |
| Filters | Image galleries |
| Pseudo Elements | Decorative icons |
| Advanced Selectors | Form styling |
| Border Radius | Modern UI |
| Background Effects | Hero sections |
Learning Outcome
After learning Advanced CSS3 Features, students will be able to:
✅ Create modern professional websites
✅ Add interactive effects
✅ Build attractive UI components
✅ Use smart selectors efficiently
✅ Design responsive stylish layouts
✅ Improve user experience visually
Final Thought
Old websites were static like printed posters.
Modern CSS3 websites breathe, glow, react, and communicate.
A skilled frontend developer does not only write code.
He crafts experience, emotion, and elegance through design.
