CSS - Cascading Style Sheets (Page 5)
Borders , Margin, Padding and List
Border property. We can set the border property of an element. The main border properties are border width, border color, border style. This applies to border left, border right, border top and border bottom.
for eg.
body{
border: 1px solid #cccccc; /* this sets the top, bottom, left, right borders
}
or else if you want to specifically set the border-left you can do it as follows
body{
border-left: 2px dashed #cccccc;
}
or else you can set the stle, color and width separately as shown below
body{
border-left-color: #cccccc;
border-left-style: dashed;
boder-left-width: 2px;
}
Similarly you can set the border top, border bottom, border left and border right.
Margins
Margins define the space around the elements. You can set body element's margin as follows
body{
margin: 5px 5px 5px 5px;
}
In the above code, we are setting the top, right, bottom, left in a single statement. In the code below, you can see we can also set the margin separately.
body{
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
Padding
Padding defines the space between the element border and element content. You cannot specify negative values. You can set the top, right, bottom and left padding separately and at one go. The below code shows how to set border and padding properties for h1 element.
h1{
border: 1px solid #cccccc;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
}
List
There are many types of lists used in html documents namely ordered list, unordered list etc. The properties of list of list-style-image, list-style-position and list-style-type.
| property | use | values |
|---|---|---|
| list-style-image | we can use our own custom image to be shown as list bullets | url{imageurl} |
| list-style-position | places the list item marker in the list | |
| list-style-type | type of list item marker | |
| marker-offset | distance between the marker from the element border | |
| list-style | all the above properties can be set at a go using list-style |
