Getting Started With W3.CSS
By: Ng Wai Foong
Tags: CSS, Lightweight, Programming, HTML, Web Development

Basic Usage

All of the CSS classes start with a w3- prefix. You can easily add it inline inside the class of the tag. In this article, I will list out a few important classes we can use to style our page. Let’s have a look at a container class below:

<div class="w3-container"></div>

Background color

You can easily add color to a div tag using the w3-<name of the color> class. You can check for the complete list of available classes via the following link.

<div class="w3-container w3-blue">

<p>Welcome to Medium!</p>

</div>

Image by Author

Text color

Text color is the same as background color — just with a different class ( w3-text-<name of the color> ).

<div class="w3-container w3-red">

<p class="w3-text-black">Welcome to Medium!</p>

</div>

Image by Author

Hover color

You can change the color when a mouse hovers over it using the w3-hover-<name of the color> class.

<div class="w3-container w3-blue w3-hover-black">

<p>Welcome to Medium!</p>

</div>

You can do the same for the hover effect on text as well. Remember not to overdo it.

Container and panel

This is one of the most important classes, and it’s commonly used for div, header, and footer tags.

It provides a common style for the tag. The w3-container class adds a 16px left and right padding to an element, while the w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to an element.

The image below shows the differences between w3-container and w3-panel .

Image by Author

Border

You can display a border via the w3-border class. You can specify which side to display and whether the border should be thin or thick. The border color can be defined as well.

Let’s have a look at the the following example:

<div class="w3-panel w3-border w3-border-blue">

<p>Showing a blue border.</p>

</div>

Image by Author

Card

w3-card is a useful class to provide a paperlike effect. It’s most commonly used in a modal to display a form or an image.

Let’s try out three different versions based on the intensity of a bordered shadow:

<div class="w3-panel w3-card"><p>w3-card</p></div>

<div class="w3-panel w3-card-2"><p>w3-card-2</p></div>

<div class="w3-panel w3-card-4"><p>w3-card-4</p></div>

Image by Author

Display

You display elements at a specific position via the display class. You need to have a parent div as a container.

Let’s try it out with the following code:

<div class="w3-display-container w3-red" style="height:300px;">

<div class="w3-display-topleft">Top Left</div>

<div class="w3-display-topright">Top Right</div>

<div class="w3-display-bottomleft">Bottom Left</div>

<div class="w3-display-bottomright">Bottom Right</div>

<div class="w3-display-left">Left</div>

<div class="w3-display-right">Right</div>

<div class="w3-display-middle">Middle</div>

<div class="w3-display-topmiddle">Top Middle</div>

<div class="w3-display-bottommiddle">Bottom Middle</div>

</div>

Image by Author

Round

You can add rounded corners to an element — be it a div or an image — using the w3-round syntax. It also has support for different variations of border-radius:

w3-round — element rounded (border-radius) 4px

— element rounded (border-radius) 4px w3-round-small — element rounded (border-radius) 2px

— element rounded (border-radius) 2px w3-round-medium — element rounded (border-radius) 4px

— element rounded (border-radius) 4px w3-round-large — element rounded (border-radius) 8px

— element rounded (border-radius) 8px w3-round-xlarge — element rounded (border-radius) 16px

— element rounded (border-radius) 16px w3-round-xxlarge — element rounded (border-radius) 32px

<div class="w3-round w3-blue">w3-round</div>

<div class="w3-round-small w3-blue">w3-round</div>

<div class="w3-round-medium w3-blue">w3-round</div>

<div class="w3-round-large w3-blue">w3-round</div>

Image by Author

Button

The w3-button class can be easily paired with any w3-<color> classes to create your own desired buttons. Let’s have a look at some of the variations of the button classes available:

w3-button — a rectangular button with a gray hover effect. The default color is light gray in W3.CSS version 3. The default color is inherited from the parent element in version 4.

— a rectangular button with a gray hover effect. The default color is light gray in W3.CSS version 3. The default color is inherited from the parent element in version 4. w3-bar — a horizontal bar that can be used to group buttons together

(perfect for horizontal navigation menus)

— a horizontal bar that can be used to group buttons together (perfect for horizontal navigation menus) w3-block — a class that can be used to define a full-width (100%) button

— a class that can be used to define a full-width (100%) button w3-circle — can be used to define a circular button

<button class="w3-button w3-green">w3-button</button>

<button class="w3-button w3-block w3-blue">w3-block</button>

<button class="w3-button w3-circle w3-red">+</button>

Image by Author

Bar

You can create your own horizontal bars for the menu selection using the w3-bar class. The following example is based on w3-bar-block for a short width and vertical bar:

<div class="w3-bar-block w3-black" style="width:120px">

<div class="w3-bar-item w3-red">London</div>

<div class="w3-bar-item w3-green ">Paris</div>

<div class="w3-bar-item w3-blue">Tokyo</div>

</div>

Image by Author

Table

W3.CSS offers a few different classes for styling the tables. The easiest method is to rely on the w3-table-all and modify it accordingly.

w3-table — container for an HTML table

— container for an HTML table w3-striped — striped table w3-border -bordered table

— striped table -bordered table w3-bordered — bordered lines

— bordered lines w3-centered — centered table content

— centered table content w3-hoverable — hoverable table

— hoverable table w3-table-all — all properties set

<table class="w3-table-all">

<thead>

<tr class="w3-red">

<th>Article Name</th>

<th>Author</th>

<th>Fans</th>

</tr>

</thead>

<tr>

<td>Emoji Are the Future of Effective Web Design</td>

<td>Ng Wai Foong</td>

<td>11</td>

</tr>

<tr>

<td>A Beginner’s Guide to Rasa NLU for Intent Classification</td>

<td>Ng Wai Foong</td>

<td>29</td>

</tr>

</table>

Image by Author

List

You just need to put the w3-ul class to the ul tag to style your list. You can add w3-border or w3-<color> classes to further improve the design of your list.

<ul class="w3-ul w3-border" style="width:300px">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

Image by Author

Image

You can use the w3-image class to create a responsive image that scales down as the window resize but never scale up larger than the original image. There are also other useful classes that alter the images and provide some amazing effects:

w3-opacity — adds opacity/transparency to an element (opacity: 0.6)

— adds opacity/transparency to an element (opacity: 0.6) w3-grayscale — adds a grayscale effect to an element (grayscale: 75%)

— adds a grayscale effect to an element (grayscale: 75%) w3-sepia — adds a sepia effect to an element (sepia: 75%)

<p>Normal (100% opacity):</p>

<img src="img_workshop.jpg" alt="Forest" style="width:150px">

<p>w3-sepia:</p>

<img src="img_workshop.jpg" alt="Forest" class="w3-sepia" style="width:150px">

<p>w3-opacity (60% opacity):</p>

<img src="img_workshop.jpg" alt="Forest" class="w3-opacity" style="width:150px">

<p>w3-grayscale:</p>

<img src="img_workshop.jpg" alt="Forest" class="w3-grayscale" style="width:150px">

Image by Author

Input

You can easily style a text input with your w3-input class.

By default, it will just show a straight line as the input, but you can add a border to it via the w3-border class.

<p><label class="w3-text-blue"><b>Without border</b></label>

<input class="w3-input" name="first" type="text"></p>

<p><label class="w3-text-blue"><b>With border</b></label>

<input class="w3-input w3-border" name="last" type="text"></p>

Image by Author

Checkbox

Styling checkboxes is pretty straightforward with the w3-check class.

<p><input class="w3-check" type="checkbox" checked="checked">

<label>Checked</label></p>

<p><input class="w3-check" type="checkbox">

<label>Unchecked</label></p>

<p><input class="w3-check" type="checkbox" disabled>

<label>Disabled</label></p>

Image by Author

Radio

Likewise, you can use a w3-radio class for radio buttons.

<p><input class="w3-radio" type="radio" checked><label>Check</label></p>

<p><input class="w3-radio" type="radio">

<label>Unchecked</label></p>

<p><input class="w3-radio" type="radio" disabled><label>Disabled</label></p>

Image by Author

Select

Use w3-select to style the select tag. Remember to add in w3-border if you intend to display a border.

<select class="w3-select w3-border" name="option">

<option value="" disabled selected>Choose your option</option>

<option value="1">Option 1</option>

<option value="2">Option 2</option>

<option value="3">Option 3</option>

</select>