What is CSS?
CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation and visual appearance of HTML documents. CSS controls how HTML elements are displayed on webpages, including colors, fonts, spacing, layouts, borders, backgrounds, and animations.
HTML provides the structure of a webpage, while CSS makes that webpage attractive and visually organized.
Example: HTML Without CSS
<h1>Welcome to CodingRider</h1>
<p>Learn HTML, CSS, and JavaScript.</p>
<button>Start Learning</button>Example: HTML With CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f5f9;
text-align: center;
}
h1 {
color: #2563eb;
}
p {
color: #475569;
font-size: 18px;
}
button {
background-color: #2563eb;
color: white;
padding: 12px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Welcome to CodingRider</h1>
<p>Learn HTML, CSS, and JavaScript.</p>
<button>Start Learning</button>
</body>
</html>How CSS Works
CSS uses rules to select HTML elements and apply styles to them.
CSS Syntax:
selector {
property: value;
}Example:
h1 {
color: blue;
font-size: 32px;
}Explanation:
h1is the selector that targets HTML heading elements.coloris a CSS property that changes the text color.blueis the value assigned to the color property.font-sizechanges the size of the text.;separates CSS declarations.
Why Do We Use CSS?
CSS is an essential part of modern web development because it provides many benefits.
- Beautiful Design: Creates attractive and visually appealing webpages.
- Responsive Design: Makes websites adapt to different screen sizes.
- Consistent Styling: Applies the same design across multiple webpages.
- Easy Maintenance: Allows developers to update website styles efficiently.
- Better User Experience: Improves readability, navigation, and usability.
- Animations: Adds transitions, animations, and interactive visual effects.
- Layout Control: Organizes webpage elements using Flexbox, Grid, and positioning.
What Can CSS Do?
| CSS Feature | Purpose |
|---|---|
| Colors | Changes text and background colors. |
| Fonts | Controls font family, size, weight, and style. |
| Spacing | Controls margin, padding, and gaps. |
| Borders | Adds borders, outlines, and rounded corners. |
| Layouts | Creates flexible page layouts using Flexbox and Grid. |
| Responsive Design | Adapts websites to mobile, tablet, and desktop screens. |
| Animations | Creates smooth transitions and animated effects. |
Conclusion
CSS (Cascading Style Sheets) is a powerful stylesheet language used to style HTML webpages. It helps developers create beautiful, responsive, and user-friendly websites. Learning CSS is an important step toward becoming a frontend or full-stack web developer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Introduction</title>
<style>
body {
font-family: Arial, sans-serif;
background: #eff6ff;
text-align: center;
padding: 40px;
}
.card {
background: white;
max-width: 400px;
margin: auto;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 20px #0001;
}
h1 {
color: #2563eb;
}
p {
color: #475569;
font-size: 18px;
}
button {
background: #2563eb;
color: white;
padding: 12px 25px;
border: none;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="card">
<h1>Welcome to CSS!</h1>
<p>CSS makes websites beautiful.</p>
<button>Start Learning</button>
</div>
</body>
</html>