Table of Contents
Introduction to CSS
CSS (Cascading Style Sheets) is the language used to style HTML documents. It controls the visual presentation of web pages, including colors, fonts, layouts, and animations.
CSS Syntax
CSS consists of rules made up of selectors and declarations:
selector {
property: value;
property: value;
}
Three Ways to Add CSS
1. Inline CSS
<p style="color: blue; font-size: 16px;">This is blue text</p>
2. Internal CSS
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
3. External CSS (Recommended)
<head>
<link rel="stylesheet" href="styles.css">
</head>
Basic CSS Properties
/* Text styling */
color: #333333;
font-size: 18px;
font-family: Arial, sans-serif;
font-weight: bold;
/* Background */
background-color: #f0f0f0;
background-image: url("image.jpg");
/* Spacing */
margin: 10px;
padding: 15px;
Practice Exercise
Create a simple HTML page and style it with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #2c3e50;
text-align: center;
}
p {
color: #34495e;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This is my first styled webpage!</p>
</body>
</html>