|
|
|
|
STYLE SHEETS
Attachment of the background image
Using background-attachment: fixed, the background image would
remain in place when the user scrolls up
and down the page.
Style sheet box model
Each block element (<P>, <h1>…) is considered to have an
invisible box around it. Stuff inside <P>,
<h1> to <h6>,<DIV> and <Table> tags etc. is present in the form
of blocks. Using style sheet box
model (Fig. 1) we can make use of certain properties
(dimensions, padding, border, margin and position)
to introduce useful styles.
Style Sheets Box Model
Fig. 1
Dimension - Example
<HTML>
<STYLE>
<!--
P {border: thin solid}
-->
</STYLE>
<BODY>
<P>This is some text contained in a box.
<P STYLE="height: 100px">This paragraph is contained in a box
100 pixels high.
<P STYLE="width: 100px">This paragraph is contained in a box 100
pixels wide.
</BODY>
</HTML>
Result is shown in Fig. 2 below.
Fig. 2
49
Padding
padding-top – adds space on top of the content
padding-right – adds space to the right of the content
padding-bottom – adds space below the content
padding-left – adds space to the left of the content
padding – general property that applies to all four padding
properties in this order: ‘padding
top, padding-right, padding-bottom, padding-left’
Example - Padding <HTML> <HEAD><TITLE>Padding</TITLE> <STYLE>
<!--DIV {border: thin
solid; width: 100px; margin-bottom: 5px} --> </STYLE> </HEAD>
<BODY> <DIV
STYLE="padding-top: 15px; padding-bottom: 15px">Mind is
everything; what you think you
become!</DIV> <DIV STYLE="padding-left: 15px; padding-right:
15px"> Mind is everything; what
youthink you become!</DIV>
<DIV STYLE="padding: 10px 15px 10px 15px"> Mind is everything;
what you think you
become!</DIV> </BODY> </HTML>
Result is shown in Fig. 3 below.
Fig. 3
Border
Border Width
border-top-width: specifies width of the top border
border-right-width: specifies width of the right border
border-bottom-width: specifies width of the bottom border
border-left-width: specifies width of the left border
border-width: specifies the width of all borders in the order
‘border-top-width, border-right
width, border-bottom-width, border-left-width’
50
Border style
border-top-style: specifies style of the top border
border-right-style: specifies style of the right border
border-bottom-style: specifies style of the bottom border
border-left-style: specifies style of the left border
border-style: specifies the style of all borders in the order
‘border-top-style, border-right
style, border-bottom-style, border-left-style’
Values for border styles are double, inset, outset, groove,
solid, ridge.
Border color
border-top-color: specifies color of the top border
border-right-color: specifies color of the right border
border-bottom-color: specifies color of the bottom border
border-left-color: specifies color of the left
border border-color: specifies the color of all borders in the
order ‘border-top-color, border-right-color,
border-bottom-color, border-left-color’
Example border
<HTML> <STYLE> <!--DIV {margin-bottom: 20px} --> </STYLE> <BODY>
<DIV
STYLE="border-width: 1cm; border-style: inset"> This line is
written in a box having inset style border
and a border width of 1 centimeter. </DIV> <DIV
STYLE="border-width: 10px;border-color:red green
yellow blue; border-style: ridge"> This line is written in a box
having ridge style border and different border
colors. </DIV> </Body> </HTML>
Result is shown in Fig. 4 below.
Fig. 4
Margins
margin-top: specifies the size of the top margin margin-right:
specifies the size of the right margin marginbottom:
specifies the size of the bottom margin margin-left: specifies
the size of the left margin margin:
specifies the size of all the margins in the order, margin-top,
margin-right, margin-bottom and margin-left
Example – Margins <HTML> <STYLE>
P{margin-top:100px;margin-bottom:100px;marginleft:
200px;margin-right:200px} </STYLE> <BODY> <P
style="background-color:yellow;fontsize:
34pt;text-align:justify">The great thing in this world is not so
much where we are, but in what direction
we are moving</P> <DIV STYLE="background-color: black; color:
white"> <H2>This heading appears
with a bottom margin of 100 pixels</H2> </DIV> </BODY> </HTML>
51
Result is shown in Fig. 5 below.
Fig. 5
Position styles
Position Property position: absolute – you can place the element
box anywhere on the page position:
relative – position is relative to the normal position of the
element
position: static – position remains unchanged
top – element’s position is fixed from the top of browser window
(in case of position: absolute) or below
the element’s natural position in the page (in case of position:
relative) right – element’s position from the
right side of browser’s window bottom – element’s position from
the bottom of browser’s window left –
from the left side of the window ( in case of position:
absolute) or to the left of the element’s natural
position ( in case of position: relative) Example- Position
Styles
<HTML> <STYLE> DIV {font-size: 18pt} </STYLE> <BODY> <DIV
STYLE="position: absolute;
left: 700px; top: 200px">Books Section</DIV> <DIV
STYLE="position: absolute; left: 200px; top:
150px">Toys Section</DIV> <DIV STYLE="position: absolute; left:
500px; top: 100px">Music
Section</DIV> <DIV STYLE="position: absolute; left: 100px; top:
0px">Clothes Section</DIV> We
must believe in luck. For how else can we explain the success of
those we do'nt like? <p STYLE="position:
static; left: 200px; top:30px”> This is an example of position
styles. </BODY></HTML> |
|
|
|
|