<Previous Lesson


Next Lesson>



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



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 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’


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


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>


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>

<Previous Lesson


Next Lesson>


Lesson Plan


Go to Top

Next Lesson
Previous Lesson
Lesson Plan
Go to Top