Using a CSS Stylesheet

Change this:

To this:

To use the stylesheet you must add a class to the HTML elements you want to style:

<div class="w3-container w3-black">

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</div>

HTML / CSS Skeleton

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
<script src=""></script>
<body>

<img src="img_la.jpg" alt="LA" style="width:100%">

<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

</body>
</html>

Try it Yourself »

Click on the "Try it Yourself" button to see how it works!

Try to change the background color of the container from teal to black.

Did you make it?

Congratulations!

You have just learned the basics of using a style sheet.

Keep on reading!

How to Be Responsive

HTML Code

Try it Yourself »

How to Create a Card

Ready for something really advanced?

How about a Business Card in HTML?

Including both image and text.

Play with the code below for a while, until you think you got a grip on it.

After that, we will start coding really fantastic HTML pages.

John Doe

Engineer

HTML Code

<div class="w3-card" style="width:200px">
<img src="img_avatar.png" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>

Try it Yourself »

❮ Previous Next ❯