Using W3.CSS
Add W3.CSS
In the previous chapter, we created a basic HTML page.
Now we will add W3.CSS and use W3.CSS classes to style the page.
Change this:
<link rel="stylesheet" href="">
To this:
<link rel="stylesheet" href="https:/edu/w3css/5/w3.css">
Now you can use W3.CSS classes in your HTML.
Example
<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>
The w3-container class adds padding to the content.
The w3-black class adds a black background and white text.
HTML and W3.CSS Skeleton
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="https:/edu/w3css/5/w3.css">
</head>
<body>
<img src="img_la.jpg" alt="Los Angeles" style="width:100%">
<main class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</main>
<script src=""></script>
</body>
</html>
Try changing w3-black to another W3.CSS color class.
Responsive Columns
W3.CSS includes responsive layout classes.
This example uses w3-row and w3-third to create three equal columns:
Example
<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 »
Create a Card
W3.CSS can also be used to create cards.
This example combines w3-card, w3-container, and w3-center:
John Doe
Engineer
Example
<div class="w3-card" style="width:200px">
<img src="img_avatar.png" alt="John Doe" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>
Try it Yourself »
