राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
M2-R5.1
WEB DESIGNING & PUBLISHING
NIELIT BUXARwww.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
M2-R5.1
WEB DESIGNING & PUBLISHING
SYLLABUS
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
M2-R5.1
WEB DESIGNING & PUBLISHING
MODULE UNIT
UNIT-1 UNIT-2
INTRODUCTION TO WEB DESIGN EDITORS
UNIT-3 UNIT-4
HTML BASICS CASCADING STYLE SHEETS (CSS)
UNIT-5 UNIT-6
CSS FRAMEWORK JAVASCRIPT AND ANGULAR JS
UNIT-7 UNIT-8
PHOTO EDITOR WEB PUBLISHING AND BROWSING
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
M2-R5.1
WEB DESIGNING & PUBLISHING
UNIT-V
CSS FRAMEWORK
WEB SITE DEVELOPMENT
W3.CSS FONTS
USING W3.CSS FRAMEWORK
W3.CSS INTRODUCTION W3.CSS TEXT
W3.CSS COLORS W3.CSS TABLES
W3.CSS CONTAINERS W3.CSS LIST
W3.CSS PANELS W3.CSS GRID
W3.CSS BORDERS W3.CSS IMAGES
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
What is W3.CSS Framework ?
W3.CSS is one of the most famous used CSS framework for in-built
responsive websites. It is based on plain CSS that makes it fast. It
does not use any additional library that slows a website such as
JavaScript or JQuery. It is compatible with all the browsers including
Chrome , Firefox , Opera , Microsoft Edge etc. It is also compatible with
most of the devices currently use in mobile phones to desktops.
W3.CSS is a CSS frameowork developed by
w3schools.com. It is modern CSS framework with built-in
responsiveness. It supports responsive mobile design by default, and
it is smaller and faster than similar CSS frameoworks.
Note : It is free to use without any licensing required.
W3.CSS
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
How to use w3.CSS ?
There are two ways to use W3.CSS :-
Local Installation : You Can download the W3.CSS file on your local
machine and include it in your HTML code.
CDN Based Version : You can include the W3.CSS file into your
HTML code directly from the CONTENT DELIVERY NETWORK(CDN).
CODE EDITOR++
<html>
<head>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
</head>
<body>
<h1 class="w3-container w3-gray">NIELIT BUXAR</h1>
</body>
</html>
LOCAL INSTALLATION
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
How to Download W3.CSS file ?
First of all open any browser application such as Chrome , Mozilla ,
Opera etc.
Then type "www.w3schools.com/w3css/4/w3.css" at address bar.
www.w3schools.com/w3css/4/w3.css
W3.CSS Downloads
Download W3.CSS
Download W3.CSS from this link:
https://www.w3schools.com/w3css/4/w3.css
Click on the link appear on the web page.
Download it in your local disk or drive.
And finally link it to your HTML file using <link> tag in <head>
section.
CODE EDITOR++
<html>
<head>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
</head>
<body>
<h1 class="w3-container w3-gray">NIELIT BUXAR</h1>
</body>
</html>
LOCAL INSTALLATION
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
W3.CSS Classes
W3.CSS Classes are predefine CSS classes that are directly
used or accessed by the user for styling purpose. W3.CSS
classes are classified in several categories :
Container Responsive
Table Layout
Text & Font Button
List Image
Card Effect
Panels Background & Color
Padding Round
Margin Modal
Border Input
Hover Navigation
Text Color Display
Animation
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
W3.CSS COLORS BASICS
Color is important aspect of visual attractive of a website. Pick the
right color combination can make a site more appealing for the
visitor. W3.CSS framework comes with a variety of colors that can be
used to perform different tasks. There are four different classes
perform these tasks. These are :
It is used to sets background color of any HTML element.
It is used to sets the color of the text of an element.
It is used to sets the background color when mouse is hovered
over an it.
It is used to changes the color of the text when mouse is hovered
over it.
<html>
<head>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
</head>
<body>
<h1 class="w3-container w3-gray w3-text-red ">NIELIT BUXAR</h1>
</body>
</html>
EXAMPLE :"W3-COLOR" CLASS
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
W3.CSS COLORS CLASS
There are four basic color tasks performed by W3.CSS. So, four
different classes perform these tasks. They are as follow :
w3-color
w3-text-color
w3-hover-color
w3-hover-text-color
<html>
<head>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
</head>
<body>
<h1 class="w3-container w3-gray w3-text-red ">NIELIT BUXAR</h1>
</body>
</html>
EXAMPLE :"W3-COLOR" CLASS
W3-Color Class.html
BACKGROUND-COLOR : GRAY because of w3.css Class "w3-gray"
TEXT-COLOR : RED because of w3.css Class "w3-text-red"
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
W3-COLOR
W3-Color Class is used to set the background of any html element.
<html>
<head>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
</head>
<body>
<div class="w3-conatiner w3-blue">
<h3>NIELIT BUXAR</h3>
</div>
<div class="w3-conatiner w3-yellow">
<h3>NIELIT EXTENSION CENTRE BUXAR</h3>
</div>
</body>
</html>
EXAMPLE :"W3-COLOR" CLASS
W3-Color Class.html
BACKGROUND-COLOR : BLUE because of w3.css Class "w3-blue"
BACKGROUND-COLOR : YELLOW because of w3.css Class "w3-yellow"
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
W3-TEXT-COLOR
W3-Text-Color Class is used to set the Text Color of any html element.
<html>
<head>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
</head>
<body>
<div class="w3-conatiner w3-text-blue">
<h3>NIELIT BUXAR</h3>
</div>
<div class="w3-conatiner w3-text-yellow">
<h3>NIELIT EXTENSION CENTRE BUXAR</h3>
</div>
</body>
</html>
EXAMPLE :"W3-TEXT-COLOR" CLASS
W3-Color Class.html
TEXT-COLOR : BLUE because of w3.css Class "w3-text-blue"
TEXT-COLOR : YELLOW because of w3.css Class "w3-text-yellow"
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
W3-HOVER-COLOR
W3-Hover-Color Class is used to sets the background of an element
when Mouse hovers over it.
<html>
<head>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
</head>
<body>
<div class="w3-conatiner w3-hover-red">
<h3>NIELIT BUXAR</h3>
</div>
<div class="w3-conatiner w3-hover-green">
<h3>NIELIT EXTENSION CENTRE BUXAR</h3>
</div>
</body>
</html>
EXAMPLE :"W3-HOVER-COLOR" CLASS
W3-Color Class.html
BACKGROUND-COLOR : GREEN after mouse hover over the element
because of w3.css Class "w3-hover-green"
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
W3-HOVER-COLOR
W3-Hover-Color Class is used to sets the background of an element
when Mouse hovers over it.
<html>
<head>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
</head>
<body>
<div class="w3-conatiner w3-hover-red">
<h3>NIELIT BUXAR</h3>
</div>
<div class="w3-conatiner w3-hover-green">
<h3>NIELIT EXTENSION CENTRE BUXAR</h3>
</div>
</body>
</html>
EXAMPLE :"W3-HOVER-COLOR" CLASS
W3-Color Class.html
BACKGROUND-COLOR : RED after mouse hover over the element because
of w3.css Class "w3-hover-red"
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
W3-HOVER-TEXT-COLOR
W3-Hover-Text-Color Class is used to change the text color of any
html element when Mouse hovers over it.
<html>
<head>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
</head>
<body>
<div class="w3-conatiner w3-text-green w3-hover-text-red">
<h3>NIELIT BUXAR</h3>
</div>
<div class="w3-conatiner w3-text-green">
<h3>NIELIT EXTENSION CENTRE BUXAR</h3>
</div>
</body>
</html>
EXAMPLE :"W3-HOVER-TEXT-COLOR" CLASS
W3-Color Class.html
TEXT-COLOR : RED after mouse hover over the element because of w3.css
Class "w3-hover-text-red"
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
POPULAR W3-COLOR CLASS
Some Popular W3-Color Classes in w3.css Framework :
w3-red w3-green w3-yellow w3-purple w3-aqua
w3-gray w3-pink w3-orange w3-sand w3-khaki
w3-light w3-light
w3-Lime w3-indigo w3-coral
blue green
w3-silver w3-cyan w3-teal w3-black w3-white
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
POPULAR W3-COLOR CLASS
Some Popular W3-Text-Color Classes in w3.css Framework :
w3-text- w3-text- w3-text- w3-text-
w3-text-red
green yellow purple aqua
w3-text- w3-text- w3-text- w3-text- w3-text-
gray pink orange sand khaki
w3-text- w3-text- w3-text- w3-text- w3-text-
light blue Lime light green indigo coral
w3-text- w3-text- w3-text- w3-text-
w3-text-teal
silver cyan black white
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
POPULAR W3-COLOR CLASS
Some Popular W3-Hover-Color Classes in w3.css Framework :
w3-hover- w3-hover- w3-hover- w3-hover- w3-hover-
red green yellow purple aqua
w3-hover- w3-hover- w3-hover- w3-hover- w3-hover-
gray pink orange sand khaki
w3-hover- w3-hover- w3-hover- w3-hover- w3-hover-
light blue Lime light green indigo coral
w3-hover- w3-hover- w3-hover- w3-hover- w3-hover-
silver cyan teal black white
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान
National Institute of Electronics and Information Technology
Ministry of Electronics & Information Technology
Government of India
CSS FRAMEWORK WEB DESIGNING & PUBLISHING
POPULAR W3-COLOR CLASS
Some Popular W3-Hover-Text-Color Classes in w3.css Framework :
w3-hover- w3-hover- w3-hover- w3-hover- w3-hover-
text-red text-green text-yellow text-purple text-aqua
w3-hover- w3-hover- w3-hover- w3-hover- w3-hover-
text-gray text-pink text-orange text-sand text-khaki
w3-hover- w3-hover-
w3-hover- w3-hover- w3-hover-
text-light text-light
text-Lime text-indigo text-coral
blue green
w3-hover- w3-hover- w3-hover- w3-hover- w3-hover-
text-silver text-cyan text-teal text-black text-white
NIELIT BUXAR
www.nielit.gov.in/buxar/index.php
