124 lines
2.0 KiB
Markdown
124 lines
2.0 KiB
Markdown
# CSS Notes
|
||
|
||
## Introduction to CSS
|
||
CSS (Cascading Style Sheets) is used to style and visually format HTML elements. It controls layout, colors, fonts, spacing, and overall presentation of web pages. CSS helps maintain separation between content (HTML) and design (CSS).
|
||
|
||
## Ways to Apply CSS
|
||
|
||
### 1. Inline CSS
|
||
CSS written directly inside an HTML tag.
|
||
<p style="color: blue;">Hello World</p>
|
||
Not recommended for large projects.
|
||
|
||
### 2. Internal CSS
|
||
CSS written inside a <style> tag in the <head>.
|
||
<style>
|
||
p { color: red; }
|
||
</style>
|
||
|
||
### 3. External CSS (Preferred)
|
||
CSS written in a separate .css file.
|
||
<link rel="stylesheet" href="style.css">
|
||
Reusable, clean and professional
|
||
|
||
## CSS Selectors
|
||
|
||
### Element Selector
|
||
p {
|
||
color: green;
|
||
}
|
||
|
||
### Class Selector
|
||
.box {
|
||
background-color: yellow;
|
||
}
|
||
|
||
### ID Selector
|
||
#main {
|
||
width: 100%;
|
||
}
|
||
|
||
### Group Selector
|
||
h1, h2, h3 {
|
||
font-family: Arial;
|
||
}
|
||
|
||
## Colors in CSS
|
||
|
||
### Color Formats
|
||
Named colors: red, blue
|
||
Hex: #ff5733
|
||
RGB: rgb(255, 87, 51)
|
||
RGBA: rgba(0, 0, 0, 0.5)
|
||
|
||
### Text & Font Styling
|
||
Common Properties
|
||
p {
|
||
font-size: 16px;
|
||
font-family: Arial, sans-serif;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
### Text Decoration
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
## CSS Box Model (Very Important)
|
||
Every HTML element consists of:
|
||
Content
|
||
Padding
|
||
Border
|
||
Margin
|
||
div {
|
||
padding: 10px;
|
||
border: 2px solid black;
|
||
margin: 15px;
|
||
}
|
||
Understanding the box model is crucial for layout control.
|
||
|
||
## Width, Height & Units
|
||
Units Used
|
||
px – fixed size
|
||
% – relative
|
||
em – relative to parent
|
||
rem – relative to root element
|
||
.container {
|
||
width: 80%;
|
||
height: 200px;
|
||
}
|
||
|
||
## Display Property
|
||
Common Values
|
||
block
|
||
inline
|
||
inline-block
|
||
none
|
||
span {
|
||
display: inline-block;
|
||
width: 100px;
|
||
}
|
||
|
||
## Position Property (Basics)
|
||
Types
|
||
static (default)
|
||
relative
|
||
absolute
|
||
fixed
|
||
.box {
|
||
position: relative;
|
||
top: 10px;
|
||
left: 20px;
|
||
}
|
||
|
||
## Background Styling
|
||
body {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
### Background image:
|
||
div {
|
||
background-image: url("image.jpg");
|
||
background-size: cover;
|
||
} |