Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 1
Introduction to CSS 2
CSS version 2 (Cascading Style Sheet)

If you want to design your webpage so you have to learn css language.
अगर हम आपनी वेबसाइट को डिजाईन करना चाहते है तो हमे CSS पढना होगा !

What your HTML ELEMENT will look like on different screens, you can also create
it in CSS.
आपका HTML ELEMENT अलग अलग screen पर कैसा डिखेगा ये भी आप CSS में बना सकते है

CSS saves a lot of work. It can control the layout of multiple web pages all at
once
CSS की मिि से वैबसाइट को डिज़ाइन करने में बहोत कम समय लगता है । CSS में आप एक ही बार मे
कई सारे डिज़ाइन को control कर सकते है

What is design in the respect of website and software’s ?

A graphics which attracts any one for long-long time with user scalability.
एक ऐसी graphics जो कसी को आकर्षडत करे और साथ ही साथ जो user के device के अनुसार अपने
आकृती मे बिलाव करे उसे डिज़ाइन कहा जाता है ।
 Difference Between HTML and CSS
HTML CSS

But in css you can’t create

Html is used to create webpages and
webpages and can’t write on
something write on webpage.
webpages
HTML से आप WEBPAGE बनाके उसपे
िेककन CSS मे आप नाही WEBPAGE बना
लिखने का काम करते है
सकते है और नाही कुछ लिख सकते है ।

You can`t design your webpage in

But in css you can do.
html language.
िेककन css मे आप अपने website को
आप html मे website को किज़ाइन नही कर
किज़ाइन कर सकते है ।
सकते है

इसे धयान से पढ़े

अगर आप html मे website को design करना चाहते है तो आपको photoshop जैसे

softwares की सहायता िेनी पड़े गी िेककन css मे किज़ाइन करते वक़्त हमे photoshop
जैसी softwares की कम सहायता िेनी पड़ती है इसी वजह से css से design ककया गया
website बड़ी ही तेजी से open होती है ।

Without webpage or content you can`t design your website

That means
Without html you can`t use css
CSS उसी चीज को किज़ाइन करता है जो html से बन चुका है जैसे -:

HTML CSS
css have some property and value to design html page that means if you
want to learn css so you have to remember css property and value.

css के पास कुछ properties और value है जजसकी मदद से हम html page को किज़ाइन
करते है इसका मतऱब अगर आप css सीखना चाहते है तो css के properties और values
को याद करे ।

List of CSS Properties & Values

Text Designing Properties

PROPERTY VALUE
color red , #323232 , rgb(120,102,65)

text-align left , right , center , justify

font-size 20px

sans-serif , verdana , mangal ,

font-family
calibri

font-weight bold , normal

font-style italic , oblique , normal

text-transform Uppercase, lowercase, capitalize

letter-spacing 20px

word-spacing 20px

line-height 20px

text-indent 20px
Stylesheets
A METHODS TO IMPLEMENTING PROPERTY AND VALUE IN HTML PAGE IS KNOWN AS STYLE SHEET.
CSS के PROPERTIES और VALUE को HTML PAGE मे िािने के तरीके को STYLESHEET कहा जाता है ।

STYLESHEET तीन प्रकार के होते है

There are three types of stylesheets

1. Inline stylesheet
2. Internal stylesheet
3. External stylesheet

INLINE STYLESHEET

Syntax :-

<tagname style=”property : value”>Content</tagname>

<p style=”color : red”>I am a student of STP Computer Education</p>

Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 2
Web layout design with sementic elements
CSS version 2 (Cascading Style Sheet)

Sementic Elements
Sementic elements(block level elements) are the collection of so many
tags . used to make website layout with css properties and value .

Sementic elements कुछ tags है जो html 5 मे है जजनका उपयोग website के ढ़ाचे

को तैयार करने के लिए ककया जाता है ।

List of some sementic elements

 <div>
 <header>
 <nav>
 <section>
 <figure>
 <aside>
 <footer>
 Benefits of sementic elements
1. Fully seo compatible
2. You can easily convert in to blocks
3. No terms and condition in blocks making

List of CSS Properties & Values

Dimensional Properties

PROPERTY VALUE
width 200px

height 200px

border-width 1px

none, solid, dotted, dashed, groove, ridge, inset,

border-style
outset

border-color Red,#323232,rgb(120,120,150)

float left, right

padding 10px

padding-top 10px

padding-bottom 10px

padding-left 10px

padding-right 20px

margin 10px

margin-top 10px

margin-bottom 10px

margin-left 10px

margin-right 10px
Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 4
CSS2 Internal Stylesheet
CSS version 2 (Cascading Style Sheet)

In internal stylesheet we can easily controls the design of all html element at one time

SYNTAX :-

<head>
<style>
Element { property : value; }
</style>
</head>
Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 6
CSS2 Selectors
CSS version 2 (Cascading Style Sheet)

selectors are used to select html element in css to implement css properties
and values.

1. Element Selector

h1{color : red; }

2. Id Selector

#one{color : red; }

3. Class Selector

.one{color : red;}
Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 8
External Stylesheet & Background Property
CSS version 2 (Cascading Style Sheet)

This file save as Index.html

<!DOCTYPE html>
<html>
<head>
<title> External stylesheet </title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>

</body>
</html>

This file save as style.css

Body{
Background-color : blue;
}
 Background Properties

Property Value
Background-color Blue, #323232, rgba(0,0,0,0.5)

Background-image url(imagename.jpg)

Background-size 200px 200px

top left , top center , top right , center , bottom

Background-position
left , bottom center , bottom right

Background-repeat repeat , no-repeat , repeat-x , repeat-y

background-attachment scroll , fixed

Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 9
Metadata Installation with beautyproducts.com
CSS version 2 (Cascading Style Sheet)

The tag provides metadata about the html document. Metadata will not be
displayed on the page, but will be machine parsable.
1. Language Installation
2. Characters Installation
3. Keywords Installation
4. Page Description Installation
5. Author Installation
6. Content Arrangement Installation

Language Installation
<meta lang=”en-US”>

Characters Installation
<meta charset=”utf-8”>
Keywords Installation
Define keywords for search engines
<meta name=”keywords” content=”BEAUTYPRODUCTS, PRODUCTS,
BEAUTYPRODUCTS.COM, BEAUTY”>

Page Description Installation

Define a description of your web page
<meta name=”description” content=” India’s largest beauty shop you can purchase
any beauty products with our websites”>

Author Installation
Define the author of a page
<meta name=”author” content=”beautyproducts.com”>

Content Arrangement Installation

Setting the viewport to make your website look good on all devices
<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>
Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 11
CSS2 Properties List
CSS version 2 (Cascading Style Sheet)

Background Properties

Property Value
Background-color Blue, #323232, rgba(0,0,0,0.5)

Background-image url(imagename.jpg)

Background-size 200px 200px

top left , top center , top right , center , bottom

Background-position
left , bottom center , bottom right

Background-repeat repeat , no-repeat , repeat-x , repeat-y

background-attachment scroll , fixed

 Text Designing Properties

PROPERTY VALUE
color red , #323232 , rgb(120,102,65)

text-align left , right , center , justify

font-size 20px

sans-serif , verdana , mangal ,

font-family
calibri

font-weight bold , normal

font-style italic , oblique , normal

text-transform Uppercase, lowercase, capitalize

letter-spacing 20px

word-spacing 20px

line-height 20px

text-indent 20px

Dimensional Properties

PROPERTY VALUE
width 200px

height 200px

border-width 1px

none, solid, dotted, dashed, groove, ridge,

border-style
inset, outset

border-color Red,#323232,rgb(120,120,150)

float left, right

padding 10px
 padding-top 10px

padding-bottom 10px

padding-left 10px

padding-right 20px

margin 10px

margin-top 10px

margin-bottom 10px

margin-left 10px

margin-right 10px

box-sizing border-box

box-shadow 20px 20px 20px grey

border-radius 20px

border-top-left-radius 20px

border-top-right-radius 20px

border-bottom-left-radius 20px

border-bottom-right-radius 20px

display none , block , inline , inline-block

float left , right

clear left , right

list-style circle , square , none

Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 12
CSS2 PSEUDO CLASSES
Pseudo classes are used to apply conditions on css properties.

: hover
: focus
: active
: visited
: unvisited
: checked
: disabled Syntax:-
: empty
: enabled Selector : pseudo class {
: first-child Background-color : red ;
: first-of-type }
: in-range
: last-child
: root
: target
: valid
Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 14
CSS2 Position Properties

Position properties is used to unlock the layer of HTML element.

PROPERTY VALUE
position relative, absolute, fixed
top 10px
bottom 10px
left 10px
right 10px
z-index 1 , -1
Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 17
CSS2 Miscellaneous selectors and properties
Selectors
Element Selector Id Selector
<head> <head>
<style> <style>
Element name{ #id value{
Properties : value; Properties : value;
} }
</style> </style>
</head> </head>

Class Selector Attribute Selector

<head> <head>
<style> <style>
.class value{ H1[align=center]{
Properties : value; Properties : value;
} }
</style> </style>
</head> </head>
 Nesting Selector
<head>
<style>
div>a{
Properties : value;
}
</style>
</head>

PROPERTY VALUE
overflow hidden , scroll
overflow-x hidden , scroll
overflow-y hidden , scroll
content “any text here”

Pseudo class for content property

: before
: after

PROPERTY VALUE
cursor alias , all-scroll, auto, cell, context-menu, col-
resize, copy, crosshair, default, e-resize, grab,
grabbing, help, move, n-resize, ne-resize,
nesw-resize, ns-resize, no-drop, none, not-
allowed, pointer, progress, url() auto, wait,
zoom-in, zoom-out
Address :- New Delhi Contact :- 8882880965

STP COMPUTER EDUCATION

The Best Quality of Software Programming Computer Education
www.stpcomputereducation.com

SUBJECT :- WEB DESIGNING

Chapter - 18
CSS2 Opacity & Pseudo Element

Pseudo Element
: : before
: : after
: : first-letter
: : first-line
: : selection