12/17/2024
Notes By Shivam Soni
CSS Framework
CSS Framework License Free Style Framework
predefined Framework provide
Professional Website design
framework colors, hover effects, containers,
panel, border Readymade Classes
Directly html document
InstaID- Shivamsoni_banda 1
12/17/2024
Introduction to W3.CSS
W3.CSS css framework webpage
responsive design browsers
devices support
W3.CSS “w3.css
download” .css
extension html document
Coloring html Element
Html element w3.css
class provide
(A) w3-color
(B) w3-text-color
Syntax: <element class= “w3-color w3-text-color” >
Example:-
<p class="w3-orange w3-text-white" >Example</p>
InstaID- Shivamsoni_banda 2
12/17/2024
Hover Colors
For background w3-hover-colorname
For text w3-hover-text-colorname
w3-container
w3-container class html elements left and right side
16px padding add
Example:-
<div class="w3-container " >Example</div>
InstaID- Shivamsoni_banda 3
12/17/2024
w3-panel
w3-panel class html elements left and right side
16px padding Top and Bottom 16px margin
add
Example:-
<div class="w3-panel" >Example</div>
Rounded panel
Rounded panel classes w3.css
provide
w3-round-small
w3-round-medium
w3-round-large
w3-round-xlarge
w3-round-xxlarge
InstaID- Shivamsoni_banda 4
12/17/2024
w3.css borders
Class Defines
w3-border Adds borders to an element
w3-border-top Adds a top border to an element
w3-border-right Adds a right border to an element
w3-border-bottom Adds a bottom border to an element
w3-border-left Adds a left border to an element
w3-border-0 Removes all borders
w3.css borders
w3-border-color Displays the border in a specified color
w3-hover-border-color Adds 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
InstaID- Shivamsoni_banda 5
12/17/2024
w3.css font
w3.css By Default 15px font Size, 1.5px line spacing
verdana font Provide
font
classes
w3-serif
w3-sans-serif
w3-monospace
w3-cursive
font-size Classes
font size w3.css classes
provide
w3-tiny w3-small w3-medium (default Class)
w3-large w3-xlarge w3-xxlarge
w3-xxxlarge w3-jumbo
InstaID- Shivamsoni_banda 6
12/17/2024
Creating Our Own CSS file:
.css
extension html document
Modifying w3.css File:
process download w3.css file text editer
modifications
Text Alignment Classes:
Text Alignment w3.css
classes provide
w3-left-align
w3-right-align
w3-center
InstaID- Shivamsoni_banda 7
12/17/2024
wide text and opacity:
w3-wide class text 4px letter spacing
set
w3-opacity class html document element
transparency add
w3.css Table
w3.css framework table table
classes provide
Classes Description
w3-table class basic responsive table provide
w3-striped class stripped table provide
w3-border class table border provide
w3-bordered class table row border provide
w3-centered class table content centered align
w3-hoverable class hoverable table provide
w3-table-all class hoverable centered class
classes table apply
InstaID- Shivamsoni_banda 8
12/17/2024
Table as a Card
W3 css card special effect
element Display externally
paste w3-card-2 w3-card-4 class
w3.css List
w3.css framework List classes
provide
Classes Description
w3-ul class basic list display
w3-border class list border provide
w3-center class list item centere align
W3-color class list list items background color set
w3-hoverable class hoverable list provide
InstaID- Shivamsoni_banda 9
12/17/2024
List as a Card
Table list Card display
w3-card-2 w3-card-4 class
Closable List Item
list <ul> element w3-ul class
<li> element w3-display-container class
<li> Element <div>
onclick( ) event “this.parentElement.style.display=
‘none’ ” × div
close icon Display
Example:
InstaID- Shivamsoni_banda 10
12/17/2024
Closable List Item Example
Closable List Item Example
Output:-
InstaID- Shivamsoni_banda 11
12/17/2024
Avatar List
List bullet
Avatar List
<li> Element
w3-bar w3css class
<img> Element w3css “w3-bar-item”
“w3-shape”
Example:
Avatar List Example
InstaID- Shivamsoni_banda 12
12/17/2024
Avatar List Example
OutPut:-
W3.CSS Images
W3.CSS एक आधु नक CSS े मवक है िजसमे इमेजेस के लए भी कुछ लासेस होती ह जो इमेजेस को
आकषक बनाने म मदद करती ह ये न न ल खत ह -
Class Name Description Example
इमेज को लुइड डज़ाइन दे ती है , जो उसके कंटे नर के
w3-image <img src="example.jpg" class="w3-image">
आकार के अनसु ार केल करती है ।
<img src="example.jpg" class="w3-image
w3-round इमेज को गोल कोने दान करती है ।
w3-round">
<img src="example.jpg" class="w3-image
w3-circle इमेज को पूर तरह से गोल बनाती है ।
w3-circle">
<img src="example.jpg" class="w3-image
w3-border इमेज के चार ओर एक बॉडर जोड़ती है ।
w3-border">
इमेज पर होवर करने पर उसक अपारद शता को घटाती <img src="example.jpg" class="w3-image
w3-hover-opacity
है । w3-hover-opacity">
InstaID- Shivamsoni_banda 13
