CSS Properties

CSS has so many predefined properties. CSS properties can be used to apply a style on the web page. Some of them are described as follow.

Text Properties:

we can use these properties on text data of web page

PropertyDescriptionValues
colorSets the color of a textRGB, hex, keyword
line-heightSets the distance between linesnormal, number, length, %
letter-spacingIncrease or decrease the space between charactersnormal, length
text-alignAligns the text in an elementleft, right, center, justify
text-decorationAdds decoration to textnone, underline, overline, line-through
text-indentIndents the first line of text in an elementlength, %
text-transformControls the letters in an elementnone, capitalize, uppercase, lowercase


Below example will explain , How to use these properties?
e.g:
p
{
color: yellow;
text-decoration:underline;
text-transform-capitalize;
}

List Properties

PropertyDescriptionValues
list-styleSets all the properties for a list in one declarationlist-style-type, list-style-position, list-style-image, inherit
list-style-imageSpecifies an image as the list-item markerURL, none, inherit
list-style-positionSpecifies where to place the list-item markerinside, outside, inherit
list-style-typeSpecifies the type of list-item markernone, disc, circle, square, decimal, decimal-leading-zero,
armenian, georgian, lower-alpha, upper-alpha, lower-greek,
lower-latin, upper-latin, lower-roman, upper-roman, inherit

Border Properties

PropertyDescriptionValues
borderSets all the border properties in one declarationborder-width, border-style, border-color
border-bottomSets all the bottom border properties in one declarationborder-bottom-width, border-bottom-style, border-bottom-color
border-bottom-colorSets the color of the bottom borderborder-color
border-bottom-styleSets the style of the bottom borderborder-style
border-bottom-widthSets the width of the bottom borderborder-width
border-colorSets the color of the four borderscolor_name, hex_number, rgb_number, transparent, inherit
border-leftSets all the left border properties in one declarationborder-left-width, border-left-style, border-left-color
border-left-colorSets the color of the left borderborder-color
border-left-styleSets the style of the left borderborder-style
border-left-widthSets the width of the left borderborder-width
border-rightSets all the right border properties in one declarationborder-right-width, border-right-style, border-right-color
border-right-colorSets the color of the right borderborder-color
border-right-styleSets the style of the right borderborder-style
border-right-widthSets the width of the right borderborder-width
border-styleSets the style of the four bordersnone, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit
border-topSets all the top border properties in one declarationborder-top-width, border-top-style, border-top-color
border-top-colorSets the color of the top borderborder-color
border-top-styleSets the style of the top borderborder-style
border-top-widthSets the width of the top borderborder-width
border-widthSets the width of the four bordersthin, medium, thick, length, inherit

Font Properties

PropertyDescriptionValues
fontSets all the font properties in one declarationfont-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar, inherit
font-familySpecifies the font family for textfamily-name, generic-family, inherit
font-sizeSpecifies the font size of textxx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %, inherit
font-styleSpecifies the font style for textnormal, italic, oblique, inherit
font-variantSpecifies whether or not a text should be displayed in a small-caps fontnormal, small-caps, inherit
font-weightSpecifies the weight of a fontnormal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
Careful, many of these are not supported!





Comments

Popular posts from this blog

Create an android app that demonstrates Activity Lifecycle and Instance State.

Custom Buttons in Android