Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Using a CSS Stylesheet

Change this:

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

To this:

<link rel="stylesheet" href="https://w3.p2hp.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://w3.p2hp.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.

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 »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.