CSS feature being

style sheet. It was developed in 1997. It is a new

CSS stands for cascading users more control over how pages are
website developers. &
added to HTML that gives both that define how different
With the help ofCSS, designers can create sytle sheets
displayed. sheets can be applied to any web
appear & these style
elements, such as headers & links, developed by the WEC & the term
to the document itselfCSS was
page. Stylesheet refers the sane webpage.
multiple style sheets can be applied to
cascading derives from the fact that of style sheets. CSS is also
to cascade through a series
Aweb style sheet is normally intended in other nedia than a web browser,
web pages should look when viewed
used to define how
print Style sheet that will define how the web page should printout &
In CSS we can create a
projector for aslide show, As CSS is powerful
another style sheet to display the web p age on a
the entire tone of a website. There
tools a web designer çan learn because with it we can affect
to in CSS level 2.
are around 60 properties in CSS levelland around
CSS Features
CSS consists of following features :
1. Cascading:With the help of cascading multiple style sheets can be applied on same
web page.
2. Flexibility: In CSS style sheets provide flexibility with in aweb document.
3. Accessibility : With the help of CSS accessibility of style sheet in high.
 152
WEB DESIGNING
4. SmallSize : CSS reduces the size of style sheet.
is possible to make multiple pages can
5. Same style for multiple pages : Due to CSS it
use same style.
Creatinga Stvle Sheet
sheet is
sheet tells a browser how to displaya particular type ofHTML. Style
In CSS style
instructions & each instruction has a predefined syntax basic instruction syntax is
made of
given below :
Selector {propery name : value;}
Above syntax consists of two parts namely :
1. Selector 2. Declaration

Selector tells a browser which elements in a page is governed by the particular set of
rules.
between
Where as declaration specifies the oroperty &valse. Declaration is contained
"{"......" "&it ends with a semicolon. Declaration part is made U of twoparts. Property
(e.g. font size) and value (e.g. 40px)
For example
p{font size :40 px;)o
Where p stands for paragraph
Comments in CSS
InCSS comments starts with "/*", &end with "*/" for example p{color : pink;
color selected is pink */
font-size:40 px; }
CSS Text Properties
CSS text properties allow us to change allignment &spacing etc. Some of CSS
text properties
are given below :
1. Letter Spacing This text property lets us decide the amount of the
space between
letters ina section of text. The default value is normal.
Possible values for letter spacing are :
number of pixels
normal

Example :
<DIV style = "letter spacing : 30 pr"
Each letter has 30 pixels between it and the next one </DIV>
WEB DESIGNING 153
Qutput ;
E C h L e t t I h a

3 P X 1
e t W e e t n d
t h e X t

2 Text Align : This text property allows us to adjust the text alignment in asection of text.
Possible value for text align are given below :
Left Right
Center Justify
Example -
<DIVstyle ="text align :reight ;width; 50px">
This text is aligned to the right in a 50pixel box.
<DIV>
Output -
Thistext is aligned to the right in a 50 pixel box.
3. Verification : This text property defines the vertical alignment for a section of text.
Useful for.subscripts & exponents. Default value for vertical-alignment
is baseline.
Possible value for verticle-align are given below :
baseline Sub Super
middle
text top
top
text bottom
bottom

Example
super">2</SPAN>
"vertical-align:
E= mc <SPAN style =
Output :
E= mc? text
property lets us to add certain features to a section of
4 Text Decoration: This text values for text decoration are given beow:
etc. Possible
such as underline, line through Overline
Underline
None
blink
Line through
Example : Here!<IA>
none">click
"csstuts.htmstyle ="text-decoration :
<A HREF=
Output :
Click Here !
 WEB DESIGNING
lets us tó change the case of
our text without 154
5. Text-transform:This text property

it. Possible values for text

transform is given beloW: rewriing
Uppercase Lowercase
None
Example :
CHANGES toLOWEP O
<DIV stle = "text transform:Lowercase"> IT
<DIVS ta ihels Va steU olyles a voe
Output :
Itchange to lower case.
6. Line Height : This text property lets us to change the mount of space between
lines
text. Possible values for line height is given below :
Normal Number of pixels Percentage
Example :
<DIV style = "line-height : 30px">
Thistext has 90 pixels <BR> between each line.
<DIV>
Output:
This text has 40 pixels between each line.
7. Text-Indent : This text property defines tht indention
text. Possible values for text-indent are of the first linà in a section of
given belOW:
Number of pixels
Percentage
Example :
<DIV style ="text-indent :80 px">This
<DIV> text is indented <BR> 80 pixels
on the first ne
Output:
This text is indented 80
pixels on the first line.
CSS Font Properties
CSS font properties
are given below :
allows us to change the font
of atext. Some off( CSS font properties
1. Font Family: This
font property defines
value for this font famiy
is Times New the type of font shown onthe screen..Default
of font. Roman. Possible values for font family iit name
Example :;
<DIVstyle = "font-family :
Arial"> The font for this text
is Arical </DlV>
WEB DESIGNING
Output :; 155
The font for this text is Arial.
2. Font Size : This font property
value for font size is medium. defines size of the font shown on the screen. Default
Possible values for font size are:
Number of pixels
Example : Percentage
<DIV style = "font-size : 5Opx"> The
font is 50 pixels in size </DIV>
Output :
The font is 50 pixels in size.
3. Font-Style : This font peroperty define the font style on
font-style are given below: the screen. Possible values for
Normal Italic
Oblique
Example ;
<DIV style = "font-style : italic">The font is italic.<DIV>
Output :
The font is italic
4. Font Variant : This property lets us to write in small caps if we want to. Possible values
for font-variant are given below :
Normal Small Caps
Example :
<DIVstyle = "font-variant : small-caps">
The font is small-caps </DIV>
Output :
THE FONT IS SMALL-CAPS.
5. Font-Weight:Possible values for font weight áre given below
Normal " Bold Bolder " Lighter
" 200 300 " 400
100
600 " 700 800
" 500

" 900

Example :
</DIV>
<DIVstyle ="font-weight :900"> The font is really bold
Output :
The font is really bold.
 WEB DESIGNING 156
CSS Backgrond Properties
CSS backgroundproperties allowsus to use background colors & images Tor our entire page.
Some of CSS background properties are given below
1, Color : Thiscolor propertychanges the forground color of asection, which isusually
text. So it change the color of some text.
Example :
Hello <SPAN style= "Color: Orange"> world
</SPAN?
Output :
Heliow world.
2. Background Color :This background color property let us to add a background color
behind most anything.
Example :
<SPAN style = "background-color : yellow">
My background is red !</SPAN>
Output :
My background is red!
3.
Background image:This property is same as a
which we specify instead of a color. background color, but is uses an image
Example:
<SPAN style = "background-image : url
Scare.jpg)"> can we read it?
<SPAN>
(http://www.pagerresource.com/images/
Output :
Can we read it ?
Margins in CSS:This property
defines the some margins
1. Margin-Left: This property define a left properties are given below :
the left side of the screen. ! margin for an element &it
always start from
Example :
DIVstle="margin-left : 80px ;
border-style : double"> This left margin
80pixels <DIV consists of
Output :
This left margin consists of 80 pixels.
WEB DESIGNING
157
Possible value for margin-left are given below :
Number in pixels Percentage Auto
2. Margin-right :It is just like Margin-left, but it goes from the right side of the browser
window. Possible values for margin-right property are given below :
" Number in pixels . Percentage Auto
Example :
<DIV style = "margin - right 80 px : border-style: double"> This is right margin of 80
pixels.
SDIV>

Output :
This is right margin of 80 pixels.
3. Margin-top : This property defines margin at the top default property of margin-top of O.
4. Margin-bottom :This property defines margins at the botom default property of margin
bottom is O.
Padding in CSS
Pdding-left : This padding properties are much like the "cellpadding" praperty of table
for the left, right, top &bottomindividually rather
except these set us define the padding 10T
than alat onCem
Example:
<DIV style ="padding-left :80px ;border-style: double"? This left padding is of 80
pixels </DIV>
Ouiput :
This left padding is of 80 pixels.
2. Padding-top : This property defines the padding at top &
default value of this porperty
is O.
at right position &default value of
3 Paddint-right :This property defines the padding
this property is O.
4. Padding-bottom : This property defines the
padding at bottom position &default value
of this roperty is O.
CSS curosor properties
cursor when the mouse moves over a certain area
oSWith sytle sheet we can change the
Or Over a certain area or over a ink.
Command:
Cursor :type
 WEB DESIGNING
want.
158
"type" with the
type of cursor we
replace
where we will
Example : crosslink <JA>
"#"style = "Cursor :crosshair"? A
<A HREF=
Output : Here is a listtof theother types of
other cursor types as well.
Thcre are some right side to see
the evo
Across link: Over the text oOn the
mOve oUr MOUse
cursor we can usC,
Example (Move
mouse Over Text)
Cursor Type
the viewser has it set.
auto
shows itaccording to how
cross hair looks like a croSS.

default makesthe cursor stay the same.

mOve cooks like we should be moving something

hand The hand we usually ee over links
help A question mark beside the arrow.
text The bar we see when the mouse is over text.

wait The "waiting" hour glass.

n-resize An arrow-North.
S-resize An arrow-South.
e-resize An arrow-East.
W-resize An arrow-West.
ne-resize An arroW north-East.
nw-res1Ze An arroW north-West.
Se-resize An arrowsouth-East.
SW-resIZe An arrow South-West.
Width is CSS
ThisCSS property defines a width for
Possible values for width property a section of our page, such as few sentence of a text.
are :
Number of pixels : {Width: 100px)
Percentage : {width :25%}
Example :
<DIVstyle = "width : 100
px'> Text will be 100 pixels
long </DIV>
Output :
Text will be of 100 pixels long
 WEB DESIGNING
158 159
Height property in CSS
This CSS property lets us give a section a specific height. If we set the
should cut off the text after reaching a vertical length of 100 pixels. height at l00 pixels, it
property are: Possible values for height
of
Number of pixels: (height : 100 px}
Percentage : {height: 25%}
Example:
<DIV style = "height: 100 px"> This will <BR> help <BR>
you a lot <BR> of 100 <BR>
pixels </DIV>
Output :
This will
help
you a lot
100
pixels.
Overflow Porperty In CSS
CSS width or height defined that is shorter than the element, this decides whether to hide the.
remaining part of the element, or show it. By default this property is set to visible. Possible
values for this property are given below :
Vissible Hidden Auto&y dulou'
Example:
<DIVstyle = width: 100px; overflow : hidden">
NOBR> welcome to the world of DHTML
<NOBR>
<DIV>

Output :
Welcome to the world of DHTML. Anything beyond 100 pixels will be hidden.
Borders in CSS
1. Border Style:This property lets us to decide whether or not to show a border &what style
it should be if we use one. Possible values for border style property are given below:
None Solid Double

Example :
<DIV style= "border-style: Solid">It consists of asolid border.</DiV
 160
WEB DESIGNING

Output : solid border.

long,
It consists of asolidIbroder. It will display a
thinor thick our border will be.
to decide how
2. Border Width:This property lets us below :-
&these are given
There are possible values for border width property Thick
" Medium
" thin
" Number of pixels
Example : solid border
"border-width :thin : border-style : solid>Itwill have a thin,
<DIV style =
<DIV>

Output :
border.
It willhave a thin solid order By this command we get a thin,solid
3. Border Color:This prperty provides acolor to the border. By changing the border
color we can use any color we like.Color name it is the possible value for border color.
Example :
<DIV style = "border-color : Pink; border-style : solid? it is pink, solid border
<DIV>

Output :
It is of pink, solid border.
By this command we will get bright pink color border.
Links in CSS:The two links states are :
1. The linkpstudio Classes : This link help the
web browsers commonly display unvisisted
links differentl from previously visited
one. Syntax for this link is given
a:link {Declaration} below:
hUitii nh eua
a:visited {Declaration}
Where a link:It applies for links
that have not yet been visited.
a: visited : It applies once
the link has been visisted by
2. The dynamic pseudo-classes: the user.
This link helps interactive web
rendering in response to user action. browsers to change the
Syntax for this link is given below:
action.Syntax for this link is given below:
a:haver {Declaration ic nh

a: active ({Declaration) l: an