Welcome to this beginner-friendly tutorial on CSS (Cascading Style Sheets). In this tutorial, we will cover the basics of CSS, giving you the tools to style your HTML web pages with ease. By the end, you will have a solid understanding of how to use CSS to make your web pages visually appealing.
Table of Contents
- What is CSS?
- How to Add CSS to a Web Page
- CSS Selectors
- Basic CSS Properties
- Box Model
- Colors and Backgrounds
- Fonts and Text Styling
- Layout with Flexbox
- Practice Exercises
- Conclusion
1. What is CSS?
CSS (Cascading Style Sheets) is a language used to style the appearance of HTML elements. While HTML defines the structure of a webpage, CSS determines how it looks, including colors, fonts, layouts, and more.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>In the above example, the h1 tag is styled with the color blue.
2. How to Add CSS to a Web Page
There are three ways to include CSS in your HTML file:
2.1 Inline CSS
Directly style an element using the style attribute.
<p style="color: red;">This is a red paragraph.</p>2.2 Internal CSS
Include CSS within a <style> tag inside the <head> section.
<style>
p {
font-size: 18px;
}
</style>2.3 External CSS
Link an external CSS file using the <link> tag.
<link rel="stylesheet" href="styles.css">Contents of styles.css:
p {
line-height: 1.5;
}3. CSS Selectors
Selectors specify which HTML elements a style applies to.
3.1 Type Selector
Targets elements by tag name.
h1 {
color: green;
}3.2 Class Selector
Targets elements with a specific class name. Use a period (.) before the class name.
<p class="highlight">Highlighted text</p>.highlight {
background-color: yellow;
}3.3 ID Selector
Targets a unique element with an ID. Use a hash (#) before the ID name.
<div id="header">Welcome</div>#header {
font-size: 24px;
}3.4 Group Selector
Combine multiple selectors to apply the same styles.
h1, h2, h3 {
font-family: Arial, sans-serif;
}4. Basic CSS Properties
- Color:
color,background-color - Font:
font-size,font-family,font-weight - Spacing:
margin,padding - Borders:
border,border-radius - Size:
width,height
5. Box Model
The box model consists of margins, borders, padding, and the content itself.
Example:
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}6. Colors and Backgrounds
Color Values:
- Named Colors:
red,blue,green - Hexadecimal:
#ff0000 - RGB:
rgb(255, 0, 0) - HSL:
hsl(0, 100%, 50%)
Example:
body {
background-color: #f0f0f0;
color: #333;
}7. Fonts and Text Styling
Common Properties:
font-familyfont-sizefont-weighttext-aligntext-decoration
Example:
p {
font-family: 'Arial', sans-serif;
font-size: 16px;
text-align: justify;
}8. Layout with Flexbox
Flexbox is a powerful layout tool for creating flexible and responsive designs.
Example:
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
}HTML:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>9. Practice Exercises
- Create a webpage with a navigation bar styled using CSS.
- Style a form with input fields, labels, and buttons.
- Design a simple responsive layout using Flexbox.
10. Conclusion
Congratulations! You’ve completed this introduction to CSS. With practice and exploration, you’ll be able to design stunning and responsive web pages. For more advanced topics, consider learning about Grid Layout, CSS animations, and media queries.