Introduction to CSS
CSS, or Cascading Style Sheets, is like the wardrobe for your webpage. It lets you dress up your website however you want — from changing the font style and colors to spacing out your content and even adding some flair with animations.
How to Apply CSS
There are three main ways to bring CSS styles to your web party:
<p style="color: blue;">This text pops in blue!</p>
<style> tag in the head of your HTML document.<style>
p {
color: red;
font-size: 20px;
}
</style>
<link rel="stylesheet" href="styles.css">
Why Focus on Internal CSS for This Task?
Using internal CSS is great for styling specifics when you’re focusing on a single page. It’s like custom tailoring your outfit for a special event — it ensures everything fits just right for the occasion.
Objective: To grasp the concept of CSS and see how internal CSS can change the look and feel of your webpage.
Step 1: Create a basic HTML document.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Styles</title>
</head>
<body>
<p id="intro">Hello, world of CSS!</p>
<p class="info">This paragraph will be styled differently.</p>
</body>
</html>
Step 2: Add internal CSS.
<style> tag in the <head> section and start styling.<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
#intro {
color: green;
font-size: 24px;
}
.info {
color: red;
margin-top: 20px;
}
</style>
Step 3: Open your HTML file in a browser to see the styles in action.
Conclusion
Now that you’ve seen how internal CSS works, experiment by adding more styles or changing the existing ones. Internal CSS is a powerful way to fine-tune the design of individual pages, giving you precise control over the look of your site.