What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance and layout of HTML web pages. While HTML provides the structure of a webpage, CSS is responsible for its visual design, including colors, fonts, spacing, borders, and page layout.
Using CSS allows developers to separate the design from the content, making websites easier to maintain and update.
Why Learn CSS?
HTML creates the structure of a webpage, but without CSS, every webpage looks plain. CSS transforms a simple page into an attractive, modern, and user-friendly website.
CSS is used to:
- Change text color and font styles
- Add backgrounds and images
- Create responsive layouts
- Design navigation menus
- Add spacing and borders
- Create animations and transitions
- Improve the overall user experience
Features of CSS
- Easy to learn and use
- Separates design from content
- Reduces repetitive code
- Faster website maintenance
- Supports responsive web design
- Works in all modern browsers
- Supports animations and visual effects
Why CSS is Important?
Imagine reading a newspaper where every heading, paragraph, and image looks the same. It would be difficult to read.
Similarly, HTML alone displays content without styling. CSS organizes and beautifies the content, making websites easier to read and more appealing.
How CSS Works
A browser first loads the HTML document.
Then it reads the CSS rules.
Finally, it combines both to display the webpage with the desired design.
HTML ↓ CSS ↓ Browser ↓ Beautiful Web Page
CSS Syntax
Every CSS rule consists of a selector and one or more declarations.
HTML Example
<h1>Welcome to GWAL NET</h1>
CSS Example
h1{ color: blue; font-size:40px; }
Output
The heading appears in blue with a font size of 40 pixels.
Parts of a CSS Rule
h1{ color:red; }
| Part | Description |
|---|---|
| h1 | Selector |
| color | Property |
| red | Value |
| : | Separates property and value |
| ; | Ends the declaration |
Types of CSS
CSS can be added to a webpage in three different ways.
1. Inline CSS
Inline CSS is written directly inside an HTML element using the style attribute.
Example:
<h1 style="color:red;">Welcome to GWAL NET</h1>
Use inline CSS only for small changes.
2. Internal CSS
Internal CSS is written inside the <style> tag within the <head> section.
Example:
<!DOCTYPE html> <html> <head> <style> h1{ color:blue; } </style> </head> <body> <h1>Welcome</h1> </body> </html>
Internal CSS is useful for styling a single webpage.
3. External CSS
External CSS stores all styles in a separate .css file.
Example:
style.css
h1{ color:green; }
HTML
<link rel="stylesheet" href="style.css">
External CSS is the preferred method because one CSS file can style multiple web pages.
Advantages of External CSS
- Easy to maintain
- Faster page loading
- Reusable styles
- Cleaner HTML code
- Better project organization
CSS Comments
Comments help explain code and are ignored by browsers.
Example:
/* Main heading style */ h1{ color:blue; }
CSS File Extension
CSS files use the following extension:
.css
Examples:
style.css main.css responsive.css
Popular Code Editors
You can write CSS using:
- Visual Studio Code
- Notepad++
- Sublime Text
- WebStorm
Real-Life Example
Suppose you own an online shopping website.
Without CSS:
- Plain text
- No colors
- No spacing
- No attractive layout
With CSS:
- Professional design
- Attractive buttons
- Responsive layout
- Better readability
- Improved user experience
Advantages of CSS
- Makes websites attractive
- Improves readability
- Reduces repeated code
- Supports responsive design
- Easy to update
- Works across modern browsers
- Faster website maintenance
Limitations of CSS
- Cannot create dynamic functionality
- Different browsers may interpret some advanced features differently
- Requires HTML to display content
- Complex designs may need advanced CSS knowledge
Key Points to Remember
- CSS stands for Cascading Style Sheets.
- CSS is used to style HTML pages.
- CSS separates design from content.
- There are three types of CSS: Inline, Internal, and External.
- External CSS is the recommended method for most websites.
Chapter Summary
In this chapter, you learned:
- What CSS is
- Why CSS is important
- Features of CSS
- How CSS works
- CSS syntax
- Types of CSS
- CSS comments
- CSS file extension
- Advantages and limitations of CSS
This chapter provides the foundation needed before learning selectors, colors, fonts, backgrounds, and layouts in the upcoming chapters.
Practice Questions
- What does CSS stand for?
- Why is CSS used in web development?
- What are the three types of CSS?
- What is a CSS selector?
- What is the purpose of a CSS property?
- Which type of CSS is recommended for large websites?
- What is the file extension of a CSS file?
- Write the basic syntax of a CSS rule.
- What are two advantages of using external CSS?
- Can CSS create the structure of a webpage? Explain your answer.