BEST SITE FOR WEB DEVELOPERS
W3CSS. Lessons for beginners

Ua

Using a CSS Stylesheet

Change this:

<link rel="stylesheet" href="">

To this:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

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

Name1
Name2
Name3

HTML Code

<div class="w3-row">

<div class="w3-third">
<img src="img_avatar.png" alt="Name1" style="width:100%">
</div>

<div class="w3-third">
<img src="img_avatar.png" alt="Name2" style="width:100%">
</div>

<div class="w3-third">
<img src="img_avatar.png" alt="Name3" style="width:100%">
</div>

</div>
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.

Avatar

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 »