CSS — Lesson 1
Introduction to CSS
What CSS is and how to style your first elements.
What is CSS?
CSS (Cascading Style Sheets) is the language used to style HTML elements. It controls colors, fonts, spacing, layout, and more.
How CSS Works
CSS works by selecting HTML elements and applying styles to them. A CSS rule consists of a selector and a declaration block.
selector {
property: value;
property: value;
}
Three Ways to Add CSS
1. Inline CSS
Applied directly to an element using the style attribute.
<p style="color: blue; font-size: 18px;">Blue text</p>
2. Internal CSS
Placed inside a <style> tag in the <head> section.
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
3. External CSS (Recommended)
CSS is written in a separate .css file and linked via <link>.
<!-- In your HTML head -->
<link rel="stylesheet" href="styles.css">
Your First CSS
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: red; text-align: center; }
p { font-size: 18px; }
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This text is styled with CSS.</p>
</body>
</html>
/* Style paragraphs */
p {
font-size: 16px;
line-height: 1.6;
}
CSS Comments
Use /* comment */ to add notes in your CSS. Comments are ignored by browsers.
Tip: External CSS is the best practice because it separates content (HTML) from presentation (CSS) and can be reused across multiple pages.