Earn Money Easily

IPRoyal Pawns

All CSS Attributes


 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;
}

Post a Comment

1 Comments