CSS
Complete CSS Guide with Code
1. CSS Introduction
What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of an HTML document. It controls colors, layouts, fonts, and more.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightblue; }
h1 { color: navy; }
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
</body>
</html>
2. CSS Syntax
A CSS rule consists of a selector and a declaration block.
h1 {
color: blue;
font-size: 12px;
}
- Selector: Defines the HTML element to style.
- Declaration Block: Contains one or more property-value pairs.
3. CSS Selectors
Selectors are used to target HTML elements.
p { color: red; } /* Targets all `<p>` elements */
#id { color: green; } /* Targets an element with a specific ID */
.class { color: blue; } /* Targets elements with a class */
4. CSS Colors
Colors can be specified in different ways:
h1 { color: red; } /* Named color */
p { color: #ff0000; } /* Hex code */
div { color: rgb(255, 0, 0); } /* RGB format */
5. CSS Backgrounds
body {
background-color: lightgray;
background-image: url(‘image.jpg’);
background-repeat: no-repeat;
background-size: cover;
}
6. CSS Borders
div {
border: 2px solid black;
border-radius: 10px;
}
7. CSS Margins & Padding
div {
margin: 20px;
padding: 10px;
}
8. CSS Box Model
The box model consists of margin, border, padding, and content.
div {
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
9. CSS Positioning
div {
position: absolute;
top: 50px;
left: 100px;
}
10. CSS Flexbox
Flexible layout for responsive designs:
.container {
display: flex;
justify-content: center;
align-items: center;
}
11. CSS Grid
Creates grid-based layouts:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
12. CSS Media Queries (Responsive Design)
@media screen and (max-width: 600px) {
body {
background-color: lightgray;
}
}
13. CSS Animations
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
div {
animation: example 3s infinite;
}
14. CSS Variables
Define reusable values.
:root {
–main-color: blue;
}
div {
color: var(–main-color);
}
15. CSS Shadows & Effects
.box {
box-shadow: 5px 5px 10px gray;
text-shadow: 2px 2px 5px black;
}
16. CSS Z-index
Controls stacking order.
div {
position: absolute;
z-index: 10;
}
17. CSS Pseudo-Classes & Pseudo-Elements
a:hover { color: red; }
p::first-letter { font-size: 2em; }
18. CSS Grid & Flexbox (Comparison)
| Feature | Flexbox | Grid |
| Direction | One-dimensional | Two-dimensional |
| Alignment | Good | Excellent |
| Use Case | Small components | Full layouts |
19. CSS Cheat Sheet
| Property | Description |
| color | Sets text color |
| background | Sets background color/image |
| border | Defines border size and color |
| padding | Adds space inside an element |
| margin | Adds space outside an element |
| display | Controls layout behavior |
| position | Sets positioning type |
| z-index | Controls stack order |
| overflow | Handles content overflow |