Lesson 11 1 Style Sheets Box Model Margin
Lesson 11 1
Style Sheets Box Model Margin Padding Box Content (text, image, table) Border 2
Dimensions - Example <HTML> <STYLE> <!-P {border: thin solid} --> </STYLE> <BODY> <P>This is some text contained in a box. <P STYLE="height: 100 px">This paragraph is contained in a box 100 pixels high. <P STYLE="width: 100 px">This paragraph is contained in a box 100 pixels wide. </BODY> 3 </HTML>
4
Example - Padding <HTML> <HEAD> <TITLE>Padding</TITLE> <STYLE> <!-DIV {border: thin solid; width: 100 px; margin-bottom: 5 px} --> </STYLE> </HEAD> <BODY> <DIV STYLE="padding-top: 15 px; padding-bottom: 15 px">Mind is everything; what you think you become!</DIV> <DIV STYLE="padding-left: 15 px; padding-right: 15 px"> Mind is everything; what you think you become!</DIV> <DIV STYLE="padding: 10 px 15 px"> Mind is everything; what you think you become!</DIV> </BODY> </HTML> 5
6
Border Properties • Border-width • Border-style • Border-color 7
Values for border styles • • solid double groove ridge inset outset none 8
9
<HTML> <STYLE> DIV {margin-bottom: 20 px} </STYLE> <BODY> <DIV STYLE="border-width: thin; border-style: solid"> This is an example of border style using a thin border. </DIV> <DIV STYLE="border-width: medium; border-style: groove"> This is a medium size border with groove style. </DIV> <DIV STYLE="border-width: thick; border-style: outset"> This is an example of thick border with border style outset. </DIV> </Body></HTML> 10
11
Example - border <HTML> <STYLE> <!-DIV {margin-bottom: 20 px} --> </STYLE> <BODY> <DIV STYLE="border-width: 1 cm; 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: 10 px; 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> 12
Example - Margins <HTML> <STYLE> P{margin-top: 100 px; margin-bottom: 100 px; marginleft: 200 px; margin-right: 200 px} </STYLE> <BODY> <P style="background-color: yellow; font-size: 34 pt; textalign: 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"> <H 2>This heading appears with a bottom margin of 100 pixels</H 2> </DIV> </BODY> </HTML> 13
14
- Slides: 14