Module 9

CSS
Frameworks
ROSE ANNE G. COCHANCO, MSIT
Agenda

Part 1:

CSS Frameworks

Part 4:

W3.css

Part 2:

Integrating CSS
Frameworks

Part 5:

Inserting W3.css

Part 3:

Well-known CSS
Frameworks

Part 6:

W3.css Classes
CSS FRAMEWORKS
CSS frameworks are pre-written sets of CSS styles and
rules that help developers quickly and efficiently build
and style web pages.
They provide a foundation of commonly used design
patterns, layout structures, and UI components, which
can significantly speed up the development process by
reducing the need to write repetitive CSS code from
scratch.
ADVANTAGES OF USING CSS
FRAMEWORKS
Rapid Development
Consistency
Responsive Design
Cross-Browser Compatibility
Community Support and Documentation
Scalability
Inserting a
CSS
Framework
HOW DO WE INSERT A CSS
FRAMEWORK?
1.Choose a CSS Framework
2.Download CSS File or Link to the Framework’s CDN
(Content Delivery Network)
3.Include the CSS Files by using the <link> tag
4.Start using the Framework Classes
5.Customize as Needed
Well-known
CSS
Frameworks
BEST CSS FRAMEWORKS OF 2024
RATED BY COLORLIB | MARCH 12, 2024
Bootstrap (https://getbootstrap.com)
Tailwind CSS (https://tailwindcss.com)
Semantic UI (https://semantic-ui.com)
Bulma (https://bulma.io)
Materialize (https://materializecss.com)
Foundation (https://get.foundation)
Pure CSS (https://purecss.io)
UIKit (https://getuikit.com)
W3.CSS
(https://www.w3schools.com/w3css.default.asp)
Using W3.CSS
W3.CSS
W3.CSS is a modern framework with built-in
responsiveness.
W3.CSS is an open-source project, and it is not owned by
any individual or organization in the traditional sense. It
was created by Jan Egil Refsnes, which is also the
founder of W3schools.
W3.CSS is smaller and faster than any other CSS
framework.
W3.CSS is easier to learn, and easier to use than any
other CSS frameworks.
W3.CSS
We can insert W3.CSS in our website using 2 ways:
Copying the direct link / CDN from the website
<link rel="stylesheet"href=
"https://www.w3schools.com/w3css/4/w3.css">
Downloading the text file and attaching it to the website as
external CSS
<link rel="stylesheet" href="/foldername/w3.css">
W3.CSS
Classes
W3.CSS 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. It also sets a text color that will be
readable when a certain color is used.
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.
W3.CSS COLORS
W3.CSS COLORS
ADDING HOVER COLORS
The w3-hover-color classes define the background hover
color for any html element. It also sets a text color that
will be reader when the hover color is activated.
The w3-hover-text-color classes define the text hover
color for any html element.
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.
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.
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)
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
W3.CSS FONTS CLASSES
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 FONTS 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
W3.CSS TEXT ALIGNMENT
CLASSES
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.
W3.CSS ROUND EDGES
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)
W3.CSS LISTS CLASSES
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.
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.
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
W3.CSS IMAGE HOVER EFFECTS
w3-hover-opacity, w3-hover-grayscale and w3-hoversepia can also be added to images
as effects.
W3.CSS 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)
W3.CSS NAVIGATION BAR
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)
W3.CSS NAVIGATION BAR
The w3-dropdown-hover and w3-dropdown-content classes
can be used for creating dropdown lists in navigation bars.
Thank you!