w3.css is een css script waarmee je responsive websites kan maken.
Met de container class maak je een responsive container waarin je tekst kan plaatsen met een padding van 16 pixels. Aan de contanier class kan je verschillenden classes toevoegen bijvoorbeeld
1) 16 standaard kleuren. Er zijn 4 kleuren classes. 1) w3-kleur, 2) w3-text-kleur 3) w3-hover-kleur 4) w3-hover-text-kleur. Zie w3.css color
Downloaden van de laatste versie van het w3.css script. Ik plaats het script in de map media/jui/css
w3.css voobeelden.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/media/jui/css/w3.css">
<body>
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="/images/img_car.jpg" alt="leuke auto" style="width:100%">
<div class="w3-container w3-margin-top">
<p>een auto is een voertuig op 4 wielen voortbewogen met een motor.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels. (Wikipedia).</p>
<table class="w3-table w3-bordered w3-striped">
<thead>
<tr>
<th>Voornaam</th>
<th>Achternaam</th>
<th>aantal punten</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody>
</table>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-half">
<div class="w3-card-2">
<img src="/images/img_london.jpg" alt="London" style="width:100%">
<div class="w3-container w3-margin-top">
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
</div>
</div>
<div class="w3-half">
<div class="w3-card-2">
<img src="/images/img_london.jpg" alt="London" style="width:100%">
<div class="w3-container w3-margin-top">
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
</div>
</div>
</div>
<footer class="w3-container w3-red w3-margin-top">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
</body>
</html>