Scribd
Upload
127 views

CSS - Framework (W3.CSS)

The document discusses the syllabus for a Web Designing and Publishing course offered by the National Institute of Electronics and Information Technology in Buxar, India. The syllabus includes 8 units covering topics like introduction to web design, HTML, CSS, JavaScript, and web publishing.

Uploaded by

shauryaraj99ram
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
127 views

CSS - Framework (W3.CSS)

The document discusses the syllabus for a Web Designing and Publishing course offered by the National Institute of Electronics and Information Technology in Buxar, India. The syllabus includes 8 units covering topics like introduction to web design, HTML, CSS, JavaScript, and web publishing.

Uploaded by

shauryaraj99ram
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

राष्ट्रीय इले क्ट्रॉनिकी एवं सूचना प्रौद्योगिकी संस्थान

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

You might also like