Content ITV PRO
This is Itvedant Content department
CSS Foundations and Text Styling
Getting Started With CSS
Learning Outcome
5
Explain cascade, inheritance, and specificity.
4
Use DevTools to inspect webpage styles.
3
Apply inline, internal, and external CSS.
2
Write CSS using correct syntax rules.
1
Understand the purpose and benefits of CSS.
Imagine you have built your dream bungalow...
The structure includes -
Windows
Walls
Doors
Rooms
Roof
Everything is structurally complete.
Now let me ask you a question...
Would you be excited to live in it if it looked like this?
Plain gray walls
No paint
No curtains
No furniture
No lighting
No decoration
Technically, the bungalow is complete.
You can enter it, live in it, and use all its rooms.
Probably not.
But...
Does it look attractive?
Does it feel welcoming?
Does it reflect your personality?
So What Happens Next?
To make the bungalow beautiful, you start adding:
Now the same bungalow looks elegant, attractive, and pleasant to live in.
Websites Work Exactly the Same Way
When we create a webpage using HTML, we build its structure.
To make the plain webpage visually appealing and attractive, we use CSS.
But HTML alone creates a very plain webpage.
But HTML alone creates a very plain webpage.
What is CSS & Why Use It
CSS stands for Cascading Style Sheets.
It is used to style and design HTML webpages.
WITHOUT CSS
WITH CSS
What is CSS & Why Use It
CSS stands for Cascading Style Sheets.
It is used to style and design HTML webpages.
Controls
Fonts
Colors
Layouts
Spacing
Borders
Alignment
WITHOUT CSS
WITH CSS
Advantages of CSS
Faster Styling
Style multiple elements simultaneously with less code.
Reusable Design
Write once, apply everywhere across the website.
Cleaner HTML
Separation of concerns makes HTML readable.
Consistency
Uniform look and feel across all webpages.
Responsive
Adapt layout seamlessly to different screen sizes.
CSS Syntax
h1 { color : blue } ;
CSS Syntax
h1 { color : blue } ;
Selector - Selects the HTML element to style.
CSS Syntax
h1 { color : blue } ;
Property - Defines what style should be changed
CSS Syntax
h1 { color : blue } ;
Value - Defines the style value.
Declaration & Comments
Declaration / Declaration block
style.css
h1{
color : blue ;
font-size : 30px ;
}
A single CSS rule is called declaration.
Declaration & Comments
Declaration / Declaration block
style.css
h1{
color : blue ;
font-size : 30px ;
}
Declaration Block - Multiple declarations written inside { }.
Declaration & Comments
Declaration / Declaration block
style.css
h1{
color : blue ;
font-size : 30px ;
}
Declaration
Single rule
Declaration block
Multiple rules
CSS Comments
-
Comments are notes written inside CSS code.
-
Browser ignores comments during execution.
Syntax
/* This is a CSS comment */
Types of CSS
Inline CSS
Internal CSS
External CSS
Applied directly inside HTML elements using the style="" attribute.
Quick fixes
Single page styles
Best practice
Defined within a <style> tag inside the HTML file's <head>.
Written in a separate .css file and linked to the HTML document.
//Index.html
<style>
h1{
color:blue;
}
</style>Internal css
External css
//Index.html
<head>
<link rel="stylesheet"
href="style.css">
</head>Links to
//style.css
h1{
color:blue;
}Inline css
//Index.html
<h1 style="color:red">
Welcome
</h1>Understanding Browser DevTools
Browser developer tools (DevTools) are built-in toolkits found in all modern web browsers. They allow you to inspect the HTML, CSS, and JavaScript of any webpage, monitor network traffic, and test responsiveness across different device sizes
Method 1
Right click -> Inspect
Method 2
Keyboard -> Press F12
How to open Devtools
Cascade & Inheritance
Cascade
" A process where multiple styles are applied, and the browser decides which style should take priority."
Cascade & Inheritance
When multiple styles apply, CSS follows a priority order:
Inline CSS
Highest
Cascade
" A process where multiple styles are applied, and the browser decides which style should take priority."
Internal CSS
Medium
External CSS
Lowest
Inheritance
Inheritance is a feature in CSS where some properties applied to a parent element are automatically passed to its child elements.
Parent element
body
color: darkgray;
font-family: Arial;
Child element
<p> tag inherits
color: darkgray;
font-family: Arial;
Commonly Inherited Properties
Font styles
Text color
Line-height
Visibility
Specificity Basics
Specificity is the rule CSS uses to determine which style should be applied when multiple CSS selectors target the same element.
Highest
ID Selector
Class Selector
High
Medium
Low
Inline CSS
Element Selector
Summary
5
Specificity determines which style gets applied.
4
CSS can be inline, internal, external.
3
Selectors target elements using CSS rules.
2
CSS improves design, layout, and consistency.
1
CSS styles and beautifies HTML webpages.
Quiz
What does CSS stand for?
A. Computer Style Sheets
B. Cascading Style Sheets
C. Creative Style Sheets
D. Color Style Sheets
What does CSS stand for?
A. Computer Style Sheets
B. Cascading Style Sheets
C. Creative Style Sheets
D. Color Style Sheets
Quiz-Answer
Web design - Getting Started With CSS
By Content ITV
