Day 4: Introduction to CSS

Hello Again! Let’s Make Your Web Pages Look Amazing

Welcome back! You’ve done an incredible job so far—learning HTML and even building your first web page. Now, it’s time to make that page look really good. Today, we’re diving into CSS, which stands for Cascading Style Sheets. Don’t worry if that sounds a bit technical. I’m here to guide you every step of the way, and by the end of today, you’ll be able to add some style and flair to your web pages.

What is CSS?

CSS is like the clothing and makeup for your web pages. While HTML gives structure (like the skeleton of your website), CSS is what makes it look beautiful and unique. It’s all about styling—changing colors, fonts, spacing, and much more.

Here’s a simple way to think about it:

Imagine HTML is a plain cake. It’s the foundation, but it’s pretty basic. CSS is the frosting, sprinkles, and decorations that make the cake look delicious and inviting. Without CSS, every web page would look plain and boring!

How Does CSS Work?

CSS works by selecting elements on your web page and then applying styles to those elements. You can think of it as giving instructions to your website on how each part should look.

Here’s a basic example:

<!DOCTYPE html>
<html>
<head>
    <title>My Styled Web Page</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: darkblue;
            font-family: Arial, sans-serif;
        }
        p {
            color: black;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Styled Web Page</h1>
    <p>This is a paragraph on my web page. Now it has some style!</p>
</body>
</html>

Let’s break down what’s happening here:

  • <style> Tag: Inside the <head> of your HTML, you can use the <style> tag to include CSS directly in your HTML file. This is called “internal CSS.”
  • body: This CSS rule changes the background color of your entire web page to light blue.
  • h1: This rule makes the heading (<h1>) dark blue and changes the font to Arial.
  • p: This rule changes the paragraph text color to black and sets the font size to 16px.

Adding CSS to Your Web Pages

There are a few different ways to add CSS to your web pages:

  1. Inline CSS: You can add styles directly to HTML elements using the style attribute. For example:<h1 style=”color: red;”>This is a Red Heading</h1> This method is quick but not very flexible for larger projects.
  2. Internal CSS: Like in the example above, you can include CSS within a <style> tag in the <head> section of your HTML document. This is great for styling a single page.
  3. External CSS: For larger websites, it’s best to keep your CSS in a separate file (e.g., styles.css). You can link this file to your HTML using the <link> tag in the <head>:<link rel=”stylesheet” href=”styles.css”>

Let’s Style Your Web Page

Let’s take the web page you created on Day 3 and add some CSS to make it look better. Here’s how you can do it:

HTML File (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>Hi there! My name is Krishna, and I'm learning web design. Below are a few things about me.</p>
    
    <h2>My Favorite Hobbies</h2>
    <ul>
        <li>Reading</li>
        <li>Coding</li>
        <li>Traveling</li>
    </ul>
    
    <h2>Here’s a Picture of Me</h2>
    <img src="https://example.com/myphoto.jpg" alt="A picture of me">
    
    <p>I'm excited to learn more and build amazing websites!</p>
</body>
</html>

CSS File (styles.css):

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #2c3e50;
    text-align: center;
}

p {
    color: #34495e;
    line-height: 1.6;
}

ul {
    list-style-type: square;
    color: #16a085;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    width: 150px;
}

Let’s see what we did here:

  • body: Changed the background color to a light gray and set the default font to Arial for the entire page.
  • h1: Set the heading color to a dark blue and centered it on the page.
  • p: Set the paragraph text color to a dark grayish-blue and adjusted the line spacing for better readability.
  • ul: Changed the list bullets to squares and set the text color to green.
  • img: Centered the image on the page, made it round with border-radius: 50%, and set the width to 150 pixels.

Seeing Your Styled Web Page

Now, save both your index.html and styles.css files. Open the HTML file in your browser, and you should see a beautifully styled web page that looks much more polished than before. It’s amazing how much of a difference a little CSS can make!

What’s Next?

Tomorrow, we’ll dive deeper into CSS and learn how to control the layout of your web pages using something called “Box Model” and “Flexbox.” These tools will help you arrange your content in a way that looks great on all screen sizes.

Final Thoughts:

You’ve just learned how to add style to your web pages using CSS! This is a huge step in making your websites not only functional but also visually appealing. Keep experimenting with different styles, colors, and layouts. The more you practice, the more you’ll start to see the endless possibilities CSS offers. You’re doing fantastic—keep it up!