Introducing CSS for Styling Your Webpage

Welcome Back! Let’s Make Your Website Look Awesome

Hey there! Welcome to Part 5 of our HTML series. So far, you’ve built a solid foundation for your homepage with text, images, links, lists, and tables. But let’s be honest—right now, it looks pretty basic. The next step? Adding some style with CSS!

What’s the Plan?

In this article, we’re going to introduce you to CSS (Cascading Style Sheets). CSS is what makes your webpage look good. With just a few lines of code, you can change colors, fonts, spacing, and much more. Here’s what you’ll learn:

What CSS is and how it works with HTML
Three ways to add CSS to your HTML
How to change the color and font of your text
Basic layout techniques using CSS
Creating your first CSS file

By the end of this article, you’ll have a much better understanding of how to make your website look not just functional, but visually appealing too. Ready to bring your page to life? Let’s get started!

1. What is CSS?

CSS stands for Cascading Style Sheets, and it’s the language used to style your HTML. While HTML structures your content, CSS is what makes it look good. Think of CSS as the paint and decor for your HTML house.

Here’s an example of how CSS works with HTML:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            margin-left: 20px;
        }
    </style>
</head>
<body>

<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>

</body>
</html>

In this example, CSS is changing the background color of the page to light blue, the color of the heading to navy, and adding some space on the left side of the heading.

2. Three Ways to Add CSS

There are three ways to add CSS to your HTML:

Inline CSS: Adding CSS directly within an HTML element.
Internal CSS: Placing CSS within a <style> tag in the <head> section of your HTML.
External CSS: Linking to an external .css file that contains all your styles.

Let’s explore each one.

Inline CSS

Inline CSS is written directly in the HTML element using the style attribute. It’s good for small, specific changes but can get messy if overused.

<p style="color: blue;">This is a blue paragraph.</p>

Internal CSS

Internal CSS is written within a <style> tag inside the <head> section of your HTML. It’s useful for styling a single page.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>

<p>This is a green paragraph with a larger font size.</p>

</body>
</html>

External CSS

External CSS is the most powerful and scalable way to style your site. You create a separate .css file and link it to your HTML. This allows you to style multiple pages with the same stylesheet.

Create a file called styles.css:

body {
    background-color: white;
    font-family: Arial, sans-serif;
}
h1 {
    color: darkblue;
}
p {
    color: darkgrey;
    font-size: 18px;
}

Then link it in your HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Welcome to My Styled Website!</h1>
<p>This is a paragraph styled with CSS.</p>

</body>
</html>

3. Changing Colors and Fonts

Let’s start with something simple: changing colors and fonts. You can use CSS to change the color of text, the background color of elements, and the font used for your content.

Here’s how to change the color of a heading:

h1 {
    color: darkgreen;
}

To change the font, you can use the font-family property:

body {
    font-family: 'Arial', sans-serif;
}

4. Basic Layout Techniques

CSS is also great for arranging elements on your page. You can control the spacing, alignment, and layout of your content using properties like margin, padding, and display.

margin: Adds space outside an element.
padding: Adds space inside an element.
display: Controls how an element is displayed on the page.

Here’s an example that adds some margin and padding to a paragraph:

p {
    margin: 20px;
    padding: 10px;
    background-color: lightyellow;
}

5. Creating Your First CSS File

Now it’s time to create your first CSS file! In your project folder, create a new file called styles.css. Add some basic styles to it, like this:

body {
    background-color: lightgrey;
    font-family: 'Verdana', sans-serif;
}
h1 {
    color: darkred;
    text-align: center;
}
p {
    color: darkblue;
    padding: 15px;
    background-color: lightyellow;
}

Then, link this file to your HTML like we did earlier:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Welcome to My Styled Website!</h1>
<p>This is a paragraph styled with external CSS.</p>

</body>
</html>

What’s Next?

Awesome job! 🎉 You’ve just taken your first steps into the world of CSS, and your webpage is starting to look pretty stylish. In the next article, we’ll dive deeper into CSS by exploring more advanced styling techniques like using classes, IDs, and styling different elements.

Keep experimenting with your styles, and I’ll see you in the next article!