CSS Notes: Text Styling, Fonts & Box Model
HTML & CSS
1. Text Styling & Fonts in CSS
A. Font Properties
1. font-family
• Specifies the type of font used for the text.
• You can list multiple fonts → browser will pick the first available.
• Example:
p{
font-family: Arial, Helvetica, sans-serif;
}
2. font-size
• Sets the size of the text.
• Units used: px, em, rem, %
• Example:
h1 {
font-size: 32px;
}
3. font-style
• Defines how the text appears in terms of slant.
• Values:
o normal
o italic
o oblique
• Example:
p{
font-style: italic;
}
B. Text Alignment & Spacing
1. text-align
• Aligns the text horizontally.
• Values:
o left
o right
o center
o justify
• Example:
h2 {
text-align: center;
}
2. line-height
• Controls the space between lines of text.
• Useful for making paragraphs easier to read.
• Example:
p{
line-height: 1.5;
}
3. letter-spacing
• Controls the space between letters.
• Example:
p{
letter-spacing: 2px;
}
C. Adding Google Fonts
Steps:
1. Go to [Link]
2. Choose a font → click "Get embed code."
3. Copy the <link> tag and paste it inside <head> of HTML.
4. Use the font in CSS.
Example:
HTML
<link
href="[Link]
p" rel="stylesheet">
CSS
body {
font-family: 'Poppins', sans-serif;
}
2. Box Model & Layouts
The CSS Box Model describes how every HTML element is treated as a box.
Each box has:
+-----------------------+
| Margin |
| +------------------+ |
|| Border ||
| | +------------+ | |
| | | Padding | | |
| | | +--------+ | | |
| | | | Content| | | |
| | | +--------+ | | |
| | +------------+ | |
| +------------------+ |
+-----------------------+
A. Margins, Padding, Borders
1. Margin
• Space outside the border.
• Example:
div {
margin: 20px;
}
2. Padding
• Space between content and border.
• Example:
div {
padding: 15px;
}
3. Border
• A line around the padding and content.
• Example:
div {
border: 2px solid black;
}
B. Width & Height
• Controls the size of an element.
• Example:
div {
width: 300px;
height: 200px;
}
3. Floating Elements
A. float
• Moves an element to the left or right.
• Commonly used for images/text wrapping.
Example:
img {
float: right;
}
B. clear
• Prevents other elements from moving around floated elements.
Example:
footer {
clear: both;
}
4. Positioning in CSS
A. static
• Default position for all elements.
• The element appears in normal document flow.
div {
position: static;
}
B. relative
• The element stays in normal flow but can be moved using top/left/right/bottom.
div {
position: relative;
top: 10px;
left: 20px;
}
C. absolute
• The element is removed from normal flow and positioned relative to the nearest
positioned parent.
div {
position: absolute;
top: 50px;
right: 30px;
}
D. fixed
• Stays fixed on the screen, even when scrolling.
• Commonly used for menus and banners.
div {
position: fixed;
bottom: 10px;
right: 10px;
}