Complete Guide to CSS: Properties, Selectors & Examples
CSS (Cascading Style Sheets) is used to style HTML elements and make web pages look visually appealing. In this article, we will explore all important CSS properties, their usage, and examples to help you master CSS.
📌 What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to define the appearance of an HTML document. It allows you to:
✅ Change colors, fonts, and layouts.
✅ Make websites responsive and mobile-friendly.
✅ Add animations and transitions.
📌 CSS Syntax
A CSS rule consists of:
- A selector (targets an HTML element).
- A property (defines what to change).
- A value (specifies how to change it).
🔹 Example:
p { color: blue; /* Changes text color */ font-size: 18px; /* Sets font size */ }✅ This rule styles all <p> tags to be blue with 18px font size.
📌 How to Add CSS to HTML?
There are three ways to add CSS to an HTML file:
1️⃣ Inline CSS (Inside an Element)
<p style="color: red;">This is red text.</p>✅ Use: For quick styles inside HTML elements.
2️⃣ Internal CSS (Inside <style> in <head>)
<style> h1 { color: green; }</style>✅ Use: For small projects with a single HTML file.
3️⃣ External CSS (Using a .css File)
<link rel="stylesheet" href="styles.css">✅ Use: For large projects and better organization.
📌 CSS Selectors (Targeting Elements)
| Selector | Example | Description |
|---|---|---|
* |
* { color: red; } |
Selects all elements |
p |
p { font-size: 16px; } |
Selects all <p> elements |
.class |
.btn { background: blue; } |
Selects elements with class "btn" |
#id |
#header { color: black; } |
Selects element with ID "header" |
div > p |
div > p { color: purple; } |
Selects <p> inside <div> |
🔹 Example of Multiple Selectors:
h1, h2, h3 { color: navy; }
✅ Styles all headings to be navy blue.
📌 Commonly Used CSS Properties
1️⃣ Text Styling Properties
p { font-size: 20px; font-weight: bold; color: #333; text-align: center; text-decoration: underline; text-transform: uppercase; }✅ Changes font size, weight, color, alignment, decoration, and case.
2️⃣ Background Properties
body { background-color: lightgray; background-image: url('image.jpg'); background-size: cover; background-repeat: no-repeat; }✅ Adds background color and an image.
3️⃣ Box Model (Margin, Padding, Border, Width & Height)
div { width: 200px; height: 100px; padding: 20px; margin: 10px; border: 2px solid black; }✅ Defines width, height, padding, margin, and border.
4️⃣ Positioning Elements (CSS Position)
.box { position: absolute; top: 50px; left: 100px; }✅ Moves the .box element 50px from the top and 100px from the left.
🔹 Position Values:
static(default)relative(relative to itself)absolute(relative to nearest positioned parent)fixed(stays in place on scroll)sticky(sticks at a point on scroll)
5️⃣ CSS Flexbox (Responsive Layouts)
.container { display: flex; justify-content: space-between; align-items: center; }✅ Creates a flexible layout.
6️⃣ CSS Grid (Advanced Layouts)
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }✅ Creates a grid layout with 3 equal columns.
7️⃣ Animations & Transitions
button { background: red; transition: background 0.5s ease-in-out; } button:hover { background: green; }✅ Changes color smoothly on hover.
📊 CSS Cheat Sheet
| Property | Description |
|---|---|
color |
Text color |
font-size |
Font size |
margin |
Space outside element |
padding |
Space inside element |
border |
Defines border |
background-color |
Background color |
display |
block, inline, flex, grid |
position |
absolute, relative, fixed, sticky |
animation |
Adds animation effect |
transition |
Adds smooth effect |
🚀 Conclusion: Why Learn CSS?
CSS is essential for designing modern web applications. Understanding it helps in:
✅ Creating responsive designs.
✅ Improving user experience.
✅ Making websites visually appealing.
Post a Comment