### W3.CSS Grid Align Start Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_align_start A complete HTML document demonstrating a grid container with align-content set to start. ```html Modern W3.CSS Template

1

2

3

4

5

6

7

8

9

``` -------------------------------- ### W3.CSS Grid Column Start Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_column_start A complete HTML document demonstrating the use of grid-column-start to position the first grid item. ```html Modern W3.CSS Template

1

2

3

4

5

6

7

8

``` -------------------------------- ### W3.CSS Grid Justify Start Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_justify_start A complete HTML document demonstrating a grid container with columns set to 50px and items aligned to the start. ```html Modern W3.CSS Template

1

2

3

4

5

6

7

8

9

``` -------------------------------- ### W3.CSS Grid Row Start Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_row_start A complete HTML document demonstrating the use of grid-row-start to position a grid item. ```html Modern W3.CSS Template

1

2

3

4

5

6

7

8

``` -------------------------------- ### Body and Header Setup Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_app_launch&stacked=h Main container and header initialization. ```html

``` -------------------------------- ### HTML Document Setup Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_apartment_rental&stacked=h Standard boilerplate for initializing the W3.CSS template. ```html ``` ```html ``` ```html ``` ```html W3.CSS Template ``` ```html ``` ```html ``` ```html ``` ```html ``` -------------------------------- ### Body and Sidebar Setup Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio3&stacked=h Initial body class and navigation sidebar structure. ```html ``` ```html ``` -------------------------------- ### Full W3.CSS Tag Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_ref_tags A complete HTML document demonstrating the implementation of w3-tag elements. ```html W3.CSS

Responsive Show/Hide

Note: Resize the browser window to understand how it works:

w3-hide-small will be hidden on small screens (phones)

w3-hide-medium will be hidden on medium screens (tablets)

w3-hide-large will be hidden on large screens (laptops/desktop)

``` -------------------------------- ### Initialize a W3.CSS HTML Page Source: https://www.w3schools.com/w3css/w3css_case.asp Sets up a basic HTML5 document with the required viewport meta tag and a link to the W3.CSS stylesheet. ```html W3.CSS Case

My first W3.CSS website!

This site will grow as we add more ...

This is another paragraph.

This is a paragraph.

This is another paragraph.

``` -------------------------------- ### Hoverable Navigation Bar Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_hover A complete HTML example showing a navigation bar with buttons that change color on hover. ```html W3.CSS

Hoverable Links

When you mouse a button, the background color will change to grey.

If you want a different hover color, use any of the w3-hover-color classes:

Default Link 1 Link 2 Link 3

``` -------------------------------- ### Full HTML Example for W3.CSS Overlay Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_ref_overlay A complete HTML document demonstrating the implementation of the w3-overlay class. ```html W3.CSS

Overlay

The w3-overlay class adds an overlay to the page content (100% width and height with a black background color with 50% opacity).

Note that the overlay class is hidden by default. Use w3-show to use it. The overlay effect is often used when opening sidebars, to "hide" the page content.

``` ```html ``` ```html ``` ```html W3.CSS ``` ```html ``` ```html ``` ```html ``` ```html

``` ```html

Overlay

``` ```html

The w3-overlay class adds an overlay to the page content (100% width and height with a black background color with 50% opacity).

``` ```html

Note that the overlay class is hidden by default. Use w3-show to use it. The overlay effect is often used when opening sidebars, to "hide" the page content.

``` ```html

``` ```html ``` ```html ``` -------------------------------- ### Compare w3-row and w3-row-padding Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_responsive_row_padding A complete HTML example showing how to implement both row types using W3.CSS. ```html W3.CSS

Difference between w3-row and w3-row-padding

The w3-row class defines a padded-less container:

The w3-row-padding class adds a 8px left and right padding to each column:

``` -------------------------------- ### Responsive Two-Thirds Layout Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_ref_responsive_twothird A complete HTML example demonstrating the use of w3-twothird and w3-third classes within a w3-row container. ```html W3.CSS

Mobile First Responsiveness

Try to resize the window!

w3-twothird

The w3-twothird class uses 66% of parent container.

On screens smaller than 601 pixels it resizes to full screen.

w3-third

The w3-twothird class uses 33% of parent container.

On screens smaller than 601 pixels it resizes to full screen.

w3-third

The w3-twothird class uses 33% of parent container.

On screens smaller than 601 pixels it resizes to full screen.

w3-twothird

The w3-twothird class uses 66% of parent container.

On screens smaller than 601 pixels it resizes to full screen.

``` -------------------------------- ### Colored Input Labels Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_input_label_colored A complete HTML form example using W3.CSS classes to color labels and input fields. ```html W3.CSS ``` -------------------------------- ### Create a Project Gallery with W3.CSS Source: https://www.w3schools.com/w3css/w3css_web_tmp_architect.asp Uses w3-row-padding and w3-col to create a responsive grid of project images with overlay labels. ```html

Projects

Summer
Brick House
Renovated
Barn House

``` -------------------------------- ### Pagination Active State Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_pagination_active A complete HTML example showing a pagination bar where the first page is highlighted using the w3-green class. ```html W3.CSS

Pagination Color

Add a w3-color class to highlight the page the user is on:

« 1 2 3 4 »

``` -------------------------------- ### Interactive W3.CSS Panel Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_panels_open A complete HTML example showing a button that triggers a hidden panel and a close button inside the panel to hide it again. ```html W3.CSS ``` -------------------------------- ### Full HTML Example for W3.CSS Vivid Colors Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors_vivid A complete HTML document showing the inclusion of the W3.CSS framework and the vivid colors library, with examples of colored panels. ```html W3.CSS

Using w3-colors-vivid

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

``` -------------------------------- ### Displaying Panels and Containers in W3.CSS Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_panels_containers A complete HTML example demonstrating the visual difference between w3-panel and w3-container classes. ```html W3.CSS

Displaying Panels

Panels are the same as containers except for an added top and bottom margin.

I am a panel

I am a container

``` -------------------------------- ### Full W3.CSS 2021 Color Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors_2021_1 A complete HTML document demonstrating the inclusion of the W3.CSS framework and the 2021 color library, with examples of applying color classes. ```html

Using w3-colors-2021

Marigold

Cerulean

Rust

``` -------------------------------- ### Full HTML Example with iOS Colors Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors_ios A complete HTML document showing the inclusion of the W3.CSS framework and the iOS color library, with examples of applying color classes to panels. ```html W3.CSS

Using w3-colors-ios.css

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

``` -------------------------------- ### Full W3.CSS Responsive Grid Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_ref_responsive_grid A complete HTML document demonstrating a mobile-first fluid grid layout with W3.CSS. ```html W3.CSS

Mobile First Fluid Grid

Try to resize the window!

This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.

This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.

``` -------------------------------- ### Full W3.CSS 2024 Color Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors_2024 A complete HTML document showing the inclusion of the W3.CSS framework and the 2024 color extension, with examples of applying color classes to containers. ```html

Using w3-colors-2024

Peach Fuzz

Watercress

Orangeade

``` -------------------------------- ### Full W3.CSS Flat Colors Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors_flat A complete HTML document demonstrating the inclusion of the W3.CSS framework and the flat colors extension, with examples of applying flat color classes to containers. ```html W3.CSS

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

``` -------------------------------- ### Full W3.CSS Responsive Grid Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_case_grid_quarter&stacked=h A complete HTML document demonstrating a header, a four-column grid layout, and a footer using W3.CSS. ```html W3.CSS Case

My First W3.CSS Website!

This site will grow as we add more ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

On a large screen the content will be displayed as a 4-column layout. On a small screen the content will adjust itself into a single-column. Resize the browser window to see the effect.

``` -------------------------------- ### Full HTML Example with W3.CSS 2025 Colors Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors_2025 A complete HTML document showing the inclusion of the W3.CSS framework and the 2025 color library, with examples of color classes applied to containers. ```html

Using w3-colors-2025

Brandied Melon

Winterberry

Crocus

French Roast

``` -------------------------------- ### Full HTML Navigation Bar Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navigation_bar A complete HTML document demonstrating the implementation of a navigation bar using W3.CSS. ```html W3.CSS

Navigation Bars

The w3-bar class is a container for displaying HTML elements horizontally.

The w3-bar-item class defines the container elements.

It it a perfect tool for creating navigation bars:

Home Link 1 Link 2 Link 3

``` -------------------------------- ### Full W3.CSS 2020 Color Example Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors_2020_1 A complete HTML document demonstrating the inclusion of the W3.CSS framework and the 2020 color library, with examples of specific color classes applied to containers. ```html

Using w3-colors-2020

Flame Scarlet

Saffron

Biscay Green

``` -------------------------------- ### Full HTML Example for W3.CSS Button Bars Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_buttons_bar_nav A complete HTML document demonstrating various styled button bars using W3.CSS. ```html W3.CSS

Button Bars

Buttons bars can easily be used as navigation bars:

``` -------------------------------- ### Full HTML Example with 2019 Colors Source: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors_2019_lib A complete HTML document showing the inclusion of the W3.CSS framework and the 2019 color library, along with examples of applying color classes to container elements. ```html W3.CSS

Fashion Colors 2019

Fiesta

Jester Red

Turmeric

Living Coral

Pink Peacock

Pepper Stem

Aspen Gold

Princess Blue

Toffee

Mango Mojito

Terrarium Moss

Sweet Lilac

Soybean

Eclipse

Sweet Corn

Brown Granite

Chili Pepper

Biking Red

Crème de Pêche

Peach Pink

Rocky Road

Fruit Dove

Sugar Almond

Dark Cheddar

Galaxy Blue

Bluestone

Orange Tiger

Eden

Vanilla Custard

Evening Blue

Paloma

Guacamole

```