1. Font Attributes
Sr. No | Attributes | Description |
---|---|---|
1 | font-family | Used for changing the font names specify a comma separated list of font name |
2 | font-weight | Can be set to values normal and bold |
3 | font-style | Can be set to normal and italic/ oblique |
4 | font-size | Can be set to number of pixels or percentage or small, medium, large, x-small, xx-small, x-large, xx-large |
e.g.
<style type=text/css>
h1
{
font-family:magneta; jokerman; calibri;
font-style:italic;
}
p
{
font-weight:bold;
font-size: 75%;
}
</style>
2. Color and Background Attributes:
Sr. No | Attributes | Description |
---|---|---|
1 | color | It sets the text color of the element |
2 | background-color | It sets the background color of the element |
3 | background-image | It sets the background image of an element specify the background image along with URL keyword |
4 | background-repeat | Controls the repetition of the background image inside the element. It can be set to values repeat, no-repeat, repeat-x or repeat-y |
5 | background-postion | It sets the position of the background image, it can be set to value, center, left top, right top, left center, right center, bottom left, bottom right, bottom center, top center. |
6 | background-attachment | It specific whether the background-image should scroll or be fixed. It can be set to value scroll and fixed |
e.g.
<style type=text/css>
body
{
background-image: url (maha.jpg);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
h1
{
background-color: aqua;
color: red
}
</style>
3. Text Attribute:-
Sr. No | Attributes | Description |
---|---|---|
1 | text-decoration | It can be set to values underline overline and line-though |
2 | text-transform e.g. | It can be set to values uppercase, lowercase and capitalize h1 { text-decoration : line-through; } p { text-transform : capitalize; } |
text-align | Align the text within an element. It can be set to left, right, center | |
4 | text-indent | It indent the text within a element can be set to a specific number of pixels |
5 | text-shadow e.g. | Specifies how to set a shadow around a text h1 { text-shadow: 4px 5px 3px blue; } |
6 | line-height e.g. | It specific the space between the lines P { line-height: 3; } |
7 | letter-spacing | It specifies the space between the characters. It can be set to number of pairs |
8 | word-spacing e.g. | It specifies the space between the words. It can be set to number of pixels h1 { letter-spacing: 15px; } P { word-spacing: 30px; } |
4. Border-Attributes
Sr. No | Attributes | Description |
---|---|---|
1 | border-color | Sets the color value for the border of an element |
2 | border-width | Specifies the width of the border. It can be set to number of pixels and values thin, thick and medium |
3 | border-style e.g. | It can be set to values solid, groove, ridge, inset, outset, double, dotted, dashed and transparent. h1 { border-color: red; border-width: 25px; border-right: style: inset; border-left: style: inset; } |
5. Margin Attributes
Sr. No | Attributes | Description |
---|---|---|
1 | margin-top | Sets the top margin of the element. It should be set to no. of pixels or percentage of screen width or height. |
2 | margin-bottom | Sets the bottom margin of the element. It should be set to no. of pixels or percentage of screen width or height |
3 | margin-left | Sets the left margin of the element. It should be set to no. of pixels or percentage of screen width or height |
4 | margin-right e.g. | Sets the right margin of the element. It should be set to no. of pixels or percentage of screen width or height body { margin-left: 20% } |
6. List Attributes:
Sr. No | Attributes | Description |
---|---|---|
1 | list-style | List-style attributes changes the bullet style for u-1. It can be set to values square, circle or disc. This attribute also changes the numbering scheme in an ol. It can be set to value decimal, upper-alpha, lower-alpha, upper-roman or lower-roman |
2 | list-style-position e.g. | It specifies the position of the list item marker with respect to the list items box. It can be set to values inside and outside ol { list-style: upper-roman; background-color: magneta; width:20px; padding: 25px; list-style-position: inside; } ol li { background-color: lime; } |
3. | hover-selector | It is used to select elements when you move the mouse over them. ol li: hover { background-color: silver; } |
1 Comments
Hi
ReplyDelete