Scribd
Upload
59 views

CSS Introduction

Uploaded by

Dan Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

CSS Introduction

Uploaded by

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

a>CASCADING STYLE SHEETS

of Sty le rul es for def inin g the lay out of HTM L doc um ent s. Using CSS, youcan
CSS is a sty! e she et tha t pro vid es the set
sty le of fon ts, the spa cin g bet we en par agr aph s, size and layout of colu mns,
con tro l the col our of the tex t, the
l I as a van·ety o f ot h er eff ect s. Sty le she ets are des ign ed to sep ara te t he presen tat 1·0 nstyle
· ges as we
bac kgr oun d ima
um ent s. Thi s ma kes site ma int ena nce mu ch easier and provides more
of d ocu me nts fro m the con ten t of the doc
flex ibility.
The con cre te ben efit s of CSS include:
single style she et. (Ex ter nal Style She et)
o Co ntrol la you t of ma ny doc um ent s fro m one
o Mo re pre cise con trol of layou t.
es ( screen , print; etc .)
o Ap ply dif fer ent layout to diff ere nt media typ

• Mo re advanced opt ion s and sophistica ted


techniques .
cs STERMINOLOGY
property
d fines how different elements look on t he web page Fo t f .
It e · n - am, 1Y, color, background border all are examples of
properties. A property appears befo re the colon in any line of CSS . , ,

value
Avalue is what appears immediately after the colon in any line of CSS It is th t· h f
. • e op I0n c osen or a property.
can be font na l'k M . . .
For example: Value for the Font-family property mes I e onotype Cors1va, Times, Arial, et c.
oedaration
.
Aproperty and its value collectively are known as Declaration • Ad ec Iara t ·ion Is . .
generally any single line of CSS that
appears between the curly brace s.

For example: body {ton; -famil x: ~r~~- sa n5--serif; } /* th is line is a declaration*/


( Property J !V al u~-,
,.___~--
Selector

Aselector is the part of the CSS line th at sel ects wh at element to target with the property/va lue pair.

For example: If we want to change the beha viou r of th e hr element (let us say its width should be 50%) then we
would use hr as our selector.
Rule
Selector and declaration, collectively are know n as Rule.

Declaration Property Vai ue

I t i t t
Hl {Co lor : blue; font-size: 20 px;} - . Rule
♦ +
ll
I I

Example Value Declaration


Property
Selector

■ METHODS OF APPLYING CSS


We can include the style sheet rules with an HTML document in the following given ways:
IN-LINE (THE ATTRIBUTE STYLE)
One way to apply CSS to HTML elements is by using the 'Style' attribute. Th~ Style attribute can be used with any
element in the body section including the <body> tag itself. We can use any number of declarations, each one
separated by a semicolon.
For example: <hr style= "width:50%; height: 100; background-color : blue" >
This is not an efficient use of style sheet as the declaration is to be repeated with every element, even if the same
st Yle is applied on some other element in a document.

INTERNAL OR EMBEDDED STYLE SHEET


This style has wider scope than the In-line method. With In-line method, the effects applied are limited to the
, element with which the style declaration has been specified, whereas in Embedded style, t he effects get applied to

' "'. ' .i:~'~,~~~~~~1~, ~-,~ ·~


· has been speci'fie d·
allth e elements of the type with wh ich the style declaration
in the Head section.
I
To create an embedded style sheet, we make use of <Sty Ie> t ag

<html> </head>

<head> <body>

<style> <hr>

hr{width:50%;height:5%;background-color:blue} </body>
</style> </html>

EXTERNAL STYLE SHEET


In this method, we define the style rules separately in one file and then use it wi th any HTML document. An external
style sheet is simply a text file with an extension .css. Like any other file, you can place th e st Y1e sheet with its name
like "style.css" on your web server or hard disk.
This method incorporates two flies. One file contains the style code only and the other file cont ain s th e HTML code.
Let us use the Style Sheets to set various properties of body background . We will make use of Embedded style sheets
in this chapter .

• BACKGROUND PROPERTIES
HTML allows you to set the background style of an element with the help of the following properti es:

Color I Image I Repeat I Position I Attachment

BACKGROUND COLOR

This property is used to set the background colour of the HTML element.

SYNTAX : background-color : va lue


where value= color/RGB color code

<html><head>
<title> Using Background Color Property </title>

<style type= "text/css"> (, ] ~ Uiing +


I ► lSelector BackgrouMd Color Propt1 , x

body {background-color : yellow} (-- -➔ C O © filt:///E:/Ashi~h/HT ML/My%20~irst%2 0P... 0. * 8 i


</style>~ I ►( Value ) ::: App, For quick
__ llCC OSS, pl
_~,t your b.ookrni, rks rltre on u,c bookrnar~ bar. lmpQrt boo.crn3rls...

</head><body> Using background color property and changing


background colour.
Using background color property and changing
background colour.

</body> </html>

BACKGROUND IMAGE

With t his p roperty, we can add an image in the background f


o an HTML d ocu ment
SYNTAX : b ackground~image: value ·

where value= url (path of the image)

.,r. . J---.
(, ......,.,. --
.. KtPS
trnl>.:head>
.ch pe::: "text/css"> l o EJ ! ~
.cstYletY . "
ackground-1mage :url( C:/Users/User/D k
bodY {b · es top/Html/ +- ·➔ C Q (i) hlt :///E:/Ashtsh/HTMl/M~20F1m%20Progr... * 8 :
..,.,work.png")} ::= 4t'J'\ Fo r qud ll(UH pl.l( t y t'\l f IJ.'.X)lni, a.rli:s 1,~r~ Cr\ the ~-oomt.Yb b.,l impcrl booL;nl.!L _
rea 1
"
---·-------- ------
-- - ~~:bit ;or a person 10 reac.h the
.:/head><body>
.c/stY Ie> . . .
.cp> rearnwork is so 1mporta.n t that 1t 1s virtually impossible
erson to reach the heights of his capabilities or
fora P
n,ake the money that he wants without becoming very good at it.

.c/p> B~ default, background


image is repeated .
.c/body><::/htrnl>

CKGROUND POSITION
BA - Let's Know More
This property defines th~ position of th e background image in an HTML document. By Colou r
default, an image is placed at the top-left corner of the element. I black ~ white- Q]
red ■ blu e- - --■l
SYNTAX :background-position : value
~
yellow 0 fuc hsia
maroon ■ olive ■1
Where value= xpos ypos grey ■ purple ■I
m green
o xpos ypos - specifies t he hori zontal and vertical position respectively.
lime
aqua
orange
O navy
□ teal
:1
ai1
o xpos may be specified as left, centre, or right silver D tan □i
dodgerblue ■ firet:irick ■i
peachpuff 0 aquamar i ne □ !
O ypos may be specified as top, centre, or bottom RGB Codes

Thus, the value, xpos ypos can be specified as,


Maroon
Forestgreen
rg b( l28, 0 , OJ
rg b(34, 139, 34J
••
A a ua rgb(O, 255. 255J D
background-position: right top; Crimson
Blueviolet
rgb(220, 20. 60J
rg b(138, 4 3 . 226J ■
•
Gold rgb(255, 215, OJ D
0 Alternatively, xpos and ypos can also be defined as x% y% to indicate Pink
Peach puff
rgb(255, 192, 203J 0
rgb(255 . 218, 185J0

more specific position. The value for top left corner is 0% 0% and for

.,
Hexad ecimal Codes

the bottom right corner is 100% 100%.


' 11800000
llffOOOO
■ IIOOffOO i. J
■ 11008000 ■ I
tlffASOO c;a 11000080
-1
So, to position an image in the centre of the page, you can specify the llffffOO D IIOOOOff ■l
11808000 ■ IIOOffff
□
value, xpos ypos as, background-position: 50% 50%. I 11800080 0 11008080
■
llffOOff
■ 11000000
■
BACKGROUND REPEAT tlffffff D llcOcOcO D
I 11808080 ■
--1
I

th
~i the help of this property, we can set the repetition pattern for the background
'~age. By default, a background image is repeated in both horizontal and vertical
directions.
SYNTAX·ba
· ckground-repeat : value
Where value== no- repeatlrepeat-xlrepeat-ylrepeat
0
no repeat- image will not be repeated
0
repeat-x- image will be repeated horizontally
0
repeat-y- image will be repeated vertically
0 re d · both the directions.
Peat - default value, image will be repeate m

'-✓ - -~·

-i119J
,. ,, ~
0
. •e-. K.tPs
' w
- ~~
-~
BACKGROUND ATTACHMENT
This property helps in either fixing the image in the background or make it scroll when the user scrolls the rest oft
page. ~
SYNTAX : background-attachment: value
where value= fixed Iscroll

<html>
<title>background properties</title>
LI background pro perties X +
<head><style type="text/css" >
~ ➔ C O Ci) file:///E:/Ashish/~TML/Background%20Properties.html * e :
body{background- : : ; App~ For ~uick a::cess, place your bookmz.:k~ here on the bookmark~ bar. Import boolonarks now ...

image:url("C:/Users/User/ Desktop/Html/flower.jpg");
background-position:top center;background-repeat:
no-repeat;background-att achment:fixed}
</style></head><body> Because of
background-repeat:
Background properties related to image no-repeat, the image
1s not repeated
</body>
</html>

o HTML is the most widely used language to design web contents for the Internet.
o Internet is a network of millions of computers, which are connected to each other to share
information and resources.
o Two basic tools are required to work with HTML documents:
o HTML Ed itor for creating and saving the documents.
o Browserforviewingthedoc uments.
o HTML code is made up of elements, tags, and attributes.
o HTML elements are of 2 types
o Container elements that include both ON and OFF tag.
o Empty elements that contain only ON tag.
0 The general structure of an HTML document has 2 sections
0 Head section: It contains the title that identifies the first part of an HTML document.
0 Body section : This is the section where we do most of the work.

0 css is a style sheet that provides the set of Style rules for defining the layout of HTML documents.
0 we can include the style sheet with an HTML document in three ways:
0 IN-LINE method
0 INTERNALOREMBEDDEDSTYLESHEETmethod
0 EXTERNALSTYLESHEETmethod

0 HTML allows you to set the background style of an element •th k .


w1 8 ac ground properties.
. .. /

I
/.i',',-
J

•: , / '_. ,·,.
,, i
. . , //~·.1
•' , , ' / / '
:~ t'.'. :;(1.io)

You might also like