Introduction to CSS
HTML creates the structure of a webpage, but CSS makes it attractive. In this chapter, you will learn how CSS changes colors, fonts, spacing, backgrounds, borders and layouts.
Design
CSS adds colors, fonts, backgrounds and visual beauty.
Spacing
CSS controls margin, padding, width, height and alignment.
Layout
CSS helps arrange sections, cards, menus and grids.
Responsive Design
CSS makes webpages fit mobile, tablet and desktop screens.
After This Chapter, You Will Understand
This chapter introduces CSS in a simple and practical way.
CSS Meaning
Understand what CSS is and why it is used.
CSS Syntax
Understand selector, property and value.
CSS Methods
Learn inline, internal and external CSS.
Selectors
Understand how CSS selects HTML elements.
What is CSS?
CSS stands for Cascading Style Sheets. It is used to design HTML webpages.
1 Simple Meaning
CSS controls how HTML content looks on the screen. It can change text color, font size, background, borders, spacing, alignment, button design, card layout and responsive behavior.
Before CSS vs After CSS
Before CSS
Plain HTML text with default browser design.
After CSS
Beautiful layout, better colors and spacing.
Selector, Property and Value
Every CSS rule has a selector and a declaration block.
2 CSS Rule Structure
property: value;
}
The selector chooses the HTML element. The property tells what you want to change. The value tells how it should be changed.
3 Example
color: blue;
font-size: 36px;
}
| CSS Part | Meaning | Example |
|---|---|---|
| Selector | Selects HTML element | h1 |
| Property | Style feature to change | color |
| Value | New setting for property | blue |
| Declaration | Property and value pair | color: blue; |
Three Ways to Add CSS
CSS can be added using inline, internal or external methods.
1. Inline CSS
CSS is written directly inside an HTML tag using the style attribute.
2. Internal CSS
CSS is written inside the style tag in the head section.
h1 {
color: blue;
}
</style>
3. External CSS
CSS is written in a separate .css file and linked to HTML.
Basic CSS Selectors
Selectors tell CSS which HTML elements should be styled.
Element Selector
Selects all elements of a tag.
color: gray;
}
Class Selector
Selects elements with a class name.
padding: 20px;
}
ID Selector
Selects one unique element with an ID.
background: navy;
}
Create Your First CSS Styled Page
Edit the CSS and click Run Code to see the design change.
Mistakes Students Should Avoid
CSS becomes easy when syntax and file linking are handled carefully.
Wrong Habits
- Forgetting semicolon after CSS declarations
- Missing closing curly bracket
- Writing property spelling incorrectly
- Using inline CSS everywhere
- Linking the wrong CSS file path
Correct Habits
- Write CSS in clean blocks
- Use external CSS for real projects
- Use class names for reusable design
- Keep CSS file path correct
- Test design changes in browser regularly
Test Your Understanding
Select the correct answers and check your score.
1. CSS stands for:
2. CSS is mainly used for:
3. In CSS, which part selects the HTML element?
4. Which method is best for real websites?
5. Which symbol is used for class selector?
Remember These Points
Revise these before moving to Chapter 14.
CSS
CSS stands for Cascading Style Sheets and is used to design HTML webpages.
Selector
A selector chooses which HTML element should be styled.
Property
A property is the style feature you want to change.
Value
A value tells how the selected property should appear.
External CSS
External CSS keeps design in a separate .css file.
Class Selector
A class selector starts with a dot and can be reused on multiple elements.