What is CSS?
CSS stands for Cascading Style Sheets.
It is used to style and format the layout of web pages written in HTML.
✅ Key Purpose:
CSS controls how HTML elements appear on screen, including:
Fonts
Colors
Layouts
Spacing
Animations
Responsive design
---
🔑 Features of CSS
Feature Description
Separation of Content and Style Keeps HTML clean by handling styling separately
Reusability Style multiple pages or elements using one CSS file
Cascading Styles apply in order of importance (inline > internal > external)
Responsive Design Helps design web pages that adapt to different screen sizes
Lightweight Reduces code duplication and page load time
---
🧱 CSS Syntax
selector {
property: value;
}
Example:
p {
color: red;
font-size: 16px;
}
p: selector (targets all <p> elements)
color and font-size: properties
red, 16px: values
---
🧩 Types of CSS
1. Inline CSS
Style written directly inside an HTML element.
<p style="color: blue;">This is a blue paragraph.</p>
---
2. Internal CSS
Defined inside <style> tag in the HTML <head> section.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is styled with internal CSS</h1>
</body>
</html>
---
3. External CSS
Written in a separate .css file and linked to HTML.
style.css
body {
background-color: lightyellow;
}
h1 {
color: orange;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, styled with external CSS!</h1>
</body>
</html>
---
🎯 Common CSS Properties with Examples
1. Color and Background
h1 {
color: white;
background-color: navy;
}
2. Fonts
p {
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
3. Text Formatting
h2 {
text-align: center;
text-decoration: underline;
}
4. Box Model (Padding, Border, Margin)
div {
padding: 10px;
border: 2px solid black;
margin: 20px;
}
5. Layout with Flexbox
.container {
display: flex;
justify-content: space-between;
}
6. Hover Effects
a:hover {
color: red;
text-decoration: none;
}
7. Responsive Design
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
---
📁 File Extensions
CSS files are saved with .css extension
Must be linked to HTML for styles to apply
---
🧾 Example: Complete HTML with External CSS
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Example</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is styled using CSS.</p>
</body>
</html>
styles.css
body {
background-color: #f0f0f0;
font-family: Verdana;
}
h1 {
color: #2c3e50;
text-align: center;
}
p {
color: #34495e;
font-size: 16px;
}
---
📚 Summary
Property Example
Color color: red;
Font font-size: 20px;
Alignment text-align: center;
Box Styling margin, padding, border
Display display: flex;
Responsive @media rules
Comments
Post a Comment