Module 10: Using W3.

CSS
W3.CSS
• W3.CSS is a modern framework with built-in
responsiveness
• Smaller and faster than any other CSS framework
• Easier to learn, and easier to use than any other
CSS frameworks
• To use W3.CSS in your website, simply add the link
to your file.
The <div> and <span>
Elements
The <div> element
• The <div> element is often used as a container of
HTML elements.
• The <div> element has no required attributes, but
style, class and id are common.
• When used together with CSS, the <div> element
can be used to style blocks of contents.
Activity 53
The <span> element
• The <span> element is often used as a container
for some text.
• The <span> element has no required attributes,
but style, class and id are common.
• When used together with CSS, the <span> element
can be used to style parts of a text.
Activity 54
W3.CSS Colors
Adding background and text colors
• The w3-color and w3-text-color classes can be
used to color any html element.
• The w3-color classes set the background color for
any HTML element.
• The w3-text-color classes set the text color of any
HTML element.
• The word color should be replaced by the actual
color that you want to use for styling an element.
Activity 55
Adding hover colors
• The w3-hover-color classes define the background
hover color for any html element.
• The w3-hover-text-color classes define the text
hover color for any html element.
Activity 56
W3.CSS Containers, Panels,
Borders and Cards
W3.CSS Container Class
• The w3-container class adds a container with a
16px left and right padding to any HTML element.
• To use a container, just add w3-container class to
any element.
Activity 57
W3.CSS Panel Class
• The w3-panel class adds a container with a 16px
top and bottom margin and a 16px left and right
padding to any HTML document.
• Panels are the same as containers except for an
added top and bottom margin.
• The w3-panel class is perfect for displaying notes.
Notes are often displayed with pale-color.
Activity 58
W3.CSS Border Class
• The w3-border class adds additional style effects for
borders.
• w3-border (add borders on all sides of an element)
• w3-border-top (adds top border to an element)
• w3-border-right (adds right border to an element)
• w3-border-left (adds left border to an element)
• w3-border-bottom (adds bottom border to an element)
• w3-border-0 (remove all borders)
• w3-border-color (displays the border in a specified color)
W3.CSS Border Class
• The w3-border class adds additional style effects for
borders.
• w3-hover-border-color (displays a hoverable border
color)
• w3-bottombar (adds a thick bottom border to an
element)
• w3-leftbar (adds a thick left border to an element)
• w3-rightbar (adds a thick right border to an element)
• w3-topbar (adds a thick top border to an element)
Activity 59
W3.CSS Card Class
• The w3-card class is used for displaying paper-like
cards.
• w3-card-2 provides a container with a 2px
bordered shadow for any HTML content
• w3-card-4 provides a container with a 4px
bordered shadow for any HTML content
Activity 60
W3.CSS Fonts
W3.CSS Fonts
• W3.CSS pages are easy to read, even for people
with slight reading disabilities.
• W3.CSS default font-size is 15px
• The default font is Verdana, which has a good
letter spacing
• The default line-spacing (1.5) is also very good.
W3.CSS Font-size Classes
• With W3.CSS, font-sizes can be set by w3-size
classes.
• w3-tiny
• w3-small
• w3-medium (default font size)
• w3-large
• w3-xlarge
• w3-xxlarge
• w3-xxxlarge
• w3-jumbo
Activity 61
W3.CSS Text Alignment
• The w3-left-align,w3-right-align and w3-justify
classes are used to align text.
• The w3-center class is used to center-align
elements.
Activity 62
W3.CSS Rounded Edges
W3.CSS Round Classes
• The w3-round-size classes add round corners to
any HTML element.
• w3-round (border-radius 4px)
• w3-round-small (border-radius 2px)
• w3-round-medium (border-radius 4px)
• w3-round-large (border-radius 8px)
• w3-round-xlarge (border-radius 16px)
• w3-round-xxlarge (border-radius 32px)
Activity 63
W3.CSS Lists
W3.CSS Lists
• The w3-ul class is used to display a basic list
• w3-color, w3-border, w3-card and other W3.CSS
classes can be added to w3-ul to add more effects
to the list.
• The w3-hoverable class adds a grey background
color to each list item in mouse-over.
Activity 64
W3.CSS Images
W3.CSS Image Effects
• Additional effects can be added to images to make
it more pleasing.
• The w3-round class adds rounded corners to an
image.
• The w3-circle class shapes an image to a circle.
• The w3-border and w3-padding classes can be
used to add border around an image.
• The w3-card-* classes can be used around an
image to display an image as a card.
Activity 65
W3.CSS Opacity, Grayscale & Sepia
• The w3-opacity classes make images transparent.
• The w3-grayscale classes add a grayscale effect to
an image.
• The w3-sepia classes add a sepia effect to an
image.
• min and max can be added at the end of the effect
to reduce or add the effect in an image
Activity 66
W3.CSS Image Hover Effects
• w3-hover-opacity, w3-hover-grayscale and w3-
hover-sepia can also be added to images as
effects.
Activity 67
W3.CSS Tables
W3.CSS Tables
• W3.CSS provides the following classes for tables:
• w3-table (container for an HTML table)
• w3-striped (striped table)
• w3-border (bordered table)
• w3-bordered (bordered lines)
• w3-centered (centered table content)
• w3-hoverable (hoverable table)
• w3-table-all (all properties set)
Activity 68
W3.CSS Layouts
W3.CSS Responsive Layouts
• W3.CSS includes a responsive, mobile-first grid
system to handle layout:
• w3-half (occupies 1/2 of the window)
• w3-third (occupies 1/3 of the window)
• w3-twothird (occupies 2/3 of the window)
• w3-quarter (occupies 1/4 of the window)
• w3-threequarter (occupies 3/4 of the window)
• w3-rest (occupies rest of the column width)
Activity 69
Activity 70
W3.CSS Navigation Bar
W3.CSS Navigation Bar Classes
• W3.CSS provides the following classes for
navigation bars:
• w3-bar (horizontal container for HTML elements)
• w3-bar-block (vertical container for HTML elements)
• w3-bar-item (container bar elements)
• w3-sidebar (vertical sidebar for HTML elements)
• w3-mobile (makes any bar element mobile-first
responsive
• w3-dropdown-hover (hoverable dropdown element)
Activity 71
Navigation with Dropdown
• The w3-dropdown-hover and w3-dropdown-
content classes can be used for creating dropdown
lists in navigation bars.
Activity 72
Sidebar Navigation
• The w3-sidebar class can be used for creating
navigation bars that are located at the side of the
screen.
Activity 73
W3.CSS Form Inputs
• w3-input for common text fields
• w3-radio for radio buttons
• w3-check for check boxes
• w3-select for drop down lists
• w3-button for buttons
Activity 74
Activity 75