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’ ” &times 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