HTML/CSS Skeleton
To add a stylesheet we have to add a link to a stylesheet.
We change this:
<link rel="stylesheet" href=" ">
To this:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
And break down the document into div elements with class attributes:
<div class="w3-container w3-black">
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">
<body>
<img src="img_la.jpg" 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>
<script src=" "></script>
</body>
</html>
Click on the "Try it Yourself" button to see how it works!
Try to change the bacground color to red.
Did you make it?
Congratulations!
You have just learned the basics of styling a web page.
You have just edited your first CSS code.
Keep on reading!
How to Be Responsive
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.
John Doe
Engineer
HTML Code
<div class="w3-card" style="width:200px">
<img src="img_avatar.png" style="width:100%">
<div style="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>
Try it Yourself »
