CSS FRAMEWORK

W3.CSS Introduction
What is W3.CSS?
• W3.CSS is a modern framework with built-in responsiveness and easy to learn and
use compared to other CSS frameworks.
• It aims to speed up and simplify web development and support modern responsive
devices like Mobile, Laptop, Tablet and Desktop.
• W3.CSS was designed to be a high-quality alternative to Bootstrap.

W3.CSS Colors
W3.CSS provides us with classes to set the color of font and container. Not only this,
there are also classes to change or set the color of the font or container on hover the
division or section. All the coloring elements can be broadly be classified into the
following parts:
• Background Color
• Text Color
• Hover Background Color
• Hover Text Color

W3.CSS - Containers
HTML5 has the following container elements −

• <div> − Provides a generic container to HTML content.

• <header> − Represents the header section.
• <footer> − Represents the footer section.
• <article> − Represents articles.
• <section> − Provides a generic container for various types of sections.

W3.CSS provides w3-container as a primary class to style all the above-

mentioned containers. W3.CSS also has other classes like w3-border, w3-red, w3-
teal, w3-padding-32 to add further styling attributes to the containers.

W3.CSS Panels
w3-panel: This class adds 16px padding on all sides i.e. top, right, bottom, left. It can
also be used with all the HTML5 container elements i.e. div, article, section, header,
footer, etc. All the elements inside this class share the same font-size, font-color,
padding, alignment, etc.

W3.CSS Border

Borders are generally used to display an outline around a box or table cell or any other
HTML element. In W3.CSS, there are different classes available to add or remove
borders. The classes that are used to add borders are referred to as additive classes and
those that are used to remove borders are referred to as subtractive classes.

Sr. No. Class Name Description

1. w3-border It is used to add a border around the targeted element.

2. w3-border-top It is used to add a top border to the targeted element.

3. w3-border-bottom It is used to add a bottom border to the targeted element.

4. w3-border-right It is used to add a right border to the targeted element.

5. w3-border-left It is used to add a left border to the targeted element.

Color of Borders: Any color can be added to the border by using the following border-
color classes that are available in W3.CSS. If you want any other customized color, then
you can set it manually using the CSS attribute.

Thick Border:
You can add a thick border to any side of the targeted element by using W3.CSS border
classes.

W3.CSS Text And Fonts

W3.CSS is one of the most popular, open-source front-end framework which helps us in
developing responsive, mobile-first websites, and web applications. As a part of its
offering, it provides us with a collection of classes, called the Text Utility classes, which
controls various text properties, such as, text alignment, text size, text opacity.
Text Alignment: W3.CSS has three classes to align the text to center, left, and right.
The description of them are as follows:

Sr. No. Class Name Description

1. w3-left-align It is used to align the text to the left.

2. w3-right-align It is used to align the text to the right.

3. w3-center It is used to align the text to the center.

Wide Text: To make the text appear to look wider we make use of a w3-wide class of
W3.CSS.

Font Sizes:
You can set the font of the text using the size classes of the W3.CSS. The classes that
come under this category are as follows:

Sr. No. Class Name Description

1. w3-tiny This class sets the font size of the targeted element to 10px.

2. w3-small This class sets the font size of the targeted element to 12px.

3. w3-large This class sets the font size of the targeted element to 18px.

4. w3-xlarge This class sets the font size of the targeted element to 24px.

5. w3-xxlarge This class sets the font size of the targeted element to 32px.

6. w3-xxxlarge This class sets the font size of the targeted element to 48px.

7. w3-jumbo This class sets the font size of the targeted element to 64px.
Font Styles: W3.CSS also has some inbuilt font styles which can be extensively used to
decorate webpages. The list of the classes for the font styles are as follows:
Sr. No. Class Name Description

1. w3-serif The font style is changed to serif.

2. w3-sans-serif The font style is changed to sans-serif.

3. w3-cursive The font style is changed to cursive.

4. w3-monospace The font style is changed to monospaced.

W3.CSS Tables
W3.CSS provides a series of classes that can be used to apply various styling to the
tables such as changing the heading appearance, making the rows stripped, adding or
removing borders, making rows hoverable, etc. W3.CSS also provides classes for
making tables responsive.
Simple Table: The .w3-table class is used to create a simple W3.CSS table. This class
name is used with <table> tag to create a table.
Syntax:
<table class="w3-table"> Table Contents... <table>
Stripped rows: The .w3-stripped class is used to create an alternate dark and light rows.
Use the combination of table, w3-table, and w3-stripped classes within the <table> tag to
create a stripped table.

Syntax:

<table class="w3-table w3-stripped"> Table Contents... <table>

Bordered Table: The .w3-border is used to add a border across the table. The border
only occurs around the table and not in the table. The see this effect use .w3-border
together with .w3-table in the table tag.

Syntax:
<table class="w3-table w3-border"> Table Contents... <table>
If we want a completely bordered table we have to use .w3-bordered class along with
.w3-border and w3-table inside the table tag.

Hoverable Table: The .w3-hoverable class is used to add a hover effect (change
background color to gray when the mouse moves over) on table rows. Use the
combination of w3-table and w3-hoverable classes within the <table> tag to create a
hover rows table.
Syntax:
<table class="w3-table w3-hoverable"> Table Contents... <table>

Centered Content Table: The .w3-centered class is used to place all the content of the
table to the center. Use the combination of w3-table and w3-centered classes within the
<table> tag to create this effect.

Syntax:
<table class="w3-table w3-centered"> Table Contents... <table>

W3.CSS - Lists
W3.CSS can be used to display different types of lists using various styles over
w3-ul.

Sr. No. Class Name & Description

w3-ul
1
Represents a basic list without any border.

w3-striped
2
Displays a stripped list.

w3-bordered
3
Draws a list with border across rows.

w3-border
4
Draws a list with border.

w3-card
5
Draws a list as a card.

w3-tiny
6
Draws a list with very small font.

7 w3-small
 Draws a list with small font.

w3-large
8
Draws a list with large font.

w3-xlarge
9
Draws a list with extra large font.

w3-xxlarge
10
Draws a list with very extra large font.

w3-xxxlarge
11
Draws a list with very high extra large font.

w3-jumbo
12
Draws a list with jumbo large font.

W3.CSS - Images
W3.CSS provides options to display images in beautiful and interesting ways using
w3-image as the main class.

Sr. No. Class Name & Description

w3-image
1
Represents a basic styled image without any border.

w3-circle
2
Displays an image within a circle

w3-title
3
Used to put text over an image.

w3-card
4
Draws an image as a card.

W3.CSS - Grids
W3.CSS provides a 12 column fluid responsive grid.

It uses the w3-row and w3-col style classes to define rows and columns
respectively.

Sr. No. Class Name & Description

 w3-row
1
Specifies a padding-less container to be used for responsive columns. This
class is mandatory for responsive classes to be fully responsive.

2 w3-col
Specifies a column with sub-classes

w3-col has several sub-classes meant for different types of screens.

Columns for Small Screen Devices

Here is a list of column-level styles for small screen devices, typically

smartphones.

Sr. No. Class Name & Description

1 s1
Defines 1 of 12 columns with width as 08.33%.

2 s2
Defines 2 of 12 columns with width as 16.66%.

3 s3
Defines 3 of 12 columns with width as 25.00%.

4 s4
Defines 4 of 12 columns with width as 33.33%.

s12
5
Defines 12 of 12 columns with width as 100%. Default class for small screen
phones.

Columns for Medium Screen Devices

Here is a list of column-level styles for medium screen devices, typically tablets.

Sr. No. Class Name & Description

1 m1
Defines 1 of 12 columns with width as 08.33%.

2 m2
Defines 2 of 12 columns with width as 16.66%.

3 m3
Defines 3 of 12 columns with width as 25.00%.
4 m4
Defines 4 of 12 columns with width as 33.33%.

m12
5
Defines 12 of 12 columns with width as 100%. Default class for medium
screen phones.

Columns for Large Screen Devices

Here is a list of column-level styles for large screen devices, typically laptops.

Sr. No. Class Name & Description

1 |1
Defines 1 of 12 columns with width as 08.33%.

2 |2
Defines 2 of 12 columns with width as 16.66%.

3 |3
Defines 3 of 12 columns with width as 25.00%.

4 |4
Defines 4 of 12 columns with width as 33.33%.

|12
5
Defines 12 of 12 columns with width as 100%. Default class for large screen
devices.