Module 10: Using W3.

CSS
[Link]
• [Link] 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 [Link] 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
[Link] 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
[Link] Containers, Panels,
Borders and Cards
[Link] 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
[Link] 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
[Link] 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)
[Link] 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
[Link] 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
[Link] Fonts
[Link] Fonts
• [Link] pages are easy to read, even for people
with slight reading disabilities.
• [Link] 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.
[Link] Font-size Classes
• With [Link], 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
[Link] 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
[Link] Rounded Edges
[Link] 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
[Link] Lists
[Link] Lists
• The w3-ul class is used to display a basic list
• w3-color, w3-border, w3-card and other [Link]
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
[Link] Images
[Link] 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
[Link] 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
[Link] Image Hover Effects
• w3-hover-opacity, w3-hover-grayscale and w3-
hover-sepia can also be added to images as
effects.
Activity 67
[Link] Tables
[Link] Tables
• [Link] 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
[Link] Layouts
[Link] Responsive Layouts
• [Link] 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
[Link] Navigation Bar
[Link] Navigation Bar Classes
• [Link] 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
[Link] 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