What is CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages. It controls colors, fonts, spacing, and positioning of HTML elements.
Adding CSS to HTML
There are three ways to add CSS:
Inline CSS
<p style="color: blue;">This text is blue.</p>
Internal CSS
<head>
<style>
p { color: blue; }
</style>
</head>
External CSS (Recommended)
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS Selectors
Element Selector
p {
color: blue;
}
Class Selector
.highlight {
background-color: yellow;
}
ID Selector
#header {
font-size: 24px;
}
Common CSS Properties
Colors and Backgrounds
.box {
color: #333;
background-color: #f0f0f0;
}
Typography
.text {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.6;
}
Box Model
.container {
margin: 20px;
padding: 15px;
border: 1px solid #ddd;
}
Practice Exercise
Style an HTML page with:
- Custom colors for headings
- Different font for paragraphs
- Styled links with hover effects
- A centered container with padding
Next Steps
Learn about CSS Flexbox, Grid, and responsive design to create modern layouts.