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.

Program using Light Sensitive Sensors on Tinkercad