|
Box properties set the margins, borders
and padding(between margins and border) for an element. For
example, you can set margin-top, margin-right, margin-bottom,
or margin-left properties or use the margin shorthand property
to set all four at once. You can also set the width and height
properties to control an element's size. The float property
can make any element behave like a floating image.
Example
<STYLE>
IMG {position:relative;
top:0;
left:0;
border:thick
double green}
H1 {padding:10; margin:30}
</STYLE>
In this Exercise you will learn to set the
Box properties in a cascading style sheet.
Padding allocates 10 spaces around the contents
of an element and a margin of 30 betwen one element and next.
The paragraph indent is increased using
the margin and padding attributes.
| Setting Color
and Background Properties |
You can change the color of any element,
including horizontal lines, form elements and tables. Setting
background not only means the entire page but also the background
of individual elements including images, form elements and
tables.
Example
<STYLE>
IMG {position: relative; top:0; left:0; border: thick double
green; vertical-align: middle; float: left}
H1 {padding: 10; margin: 30}
HR {color: red; height: 10}
BODY {background: URL (image1.gif)}
P {background: white; padding: 5}
</STYLE>
In this exercise, you will learn to set
color and background properties in a cascading style sheet.
The background attribute sets "img.gif"
as the background image for the page.
The background attribute here specifies
a background color for the paragraphs and the color attribie
specifies the text color.
The page displayed with the background image
and the paragraph is displayed with the background color yellow
and font color green.
| Setting Classification
Properties |
Classification Properties classify different
elements by their behavior and control how elements such as
list elements work. For example, you can use the list-style-image
property with an ordered list selector (UL) to change the
list-item bullet to an image of your choice.
| Property |
Value |
| Display |
Inline, block,
listitem |
| Line-height |
Measurement
or % |
| List-style-type |
Disc, circle,
square, decimal, lower-roman, upper-roman, lower-alpha,
upper-alpha, none |
| List-style-image |
Url (http://www.layoutgalaxy.com) |
|
Syntax
To Set square as the bullet style
<STYLE>
<! -
UL LI {list-style-type: square}
-- >
</STYLE>
To set a image as bullet style
<STYLE>
<! -
UL LI {list-style-image: url (figure.gif)}
-- >
</STYLE>
Copyrights : Layout Galaxy All Rights Reserved
No part of this tutorial may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, electrostatic, magnetic tape, mechanical or otherwise, without prior permission in writing from Layout Galaxy.
|
|
