CSS Property Chart:
FONT properties:
Name of Property Usage Possible values
Font-family Specifies the preferred choice for the font of a Arial, Times New Roman, Verdana,
particular element on a web page Monotype Corsiva
Font-style Allows the text to be displayed in one of the Normal | Italic| Oblique
three ways: normal, italic, or oblique within a
font-family.
Font-weight Specifies the weight or boldness of the font Lighter | Normal| Bold | Bolder |
100|200|300|400|500|600|700|800|900
Font-size Used to set the size of a font Absolute-size = xx-small | x-small | small |
medium | large | x-large | xx-large
Relative-size=larger I smaller
Font-variant Sets the text font in two variants: normal or small-caps | normal
small-caps
Text properties:
Name of Property Usage Possible values
Text-align It is used to align the text of a document. left | right | center | justify
Text-indent It indents the first line in a block of text where it is length | percentage
specified. It accepts value in terms of length or
percentage.
Color used to set the colour of the text. color name | hex value | RGB color
code
Text-decoration allows the user to add different effects to the text in underline | overline | line-through |
a block in the form of underline, overline, a line- blink| none
through text, and blinking text.
Text-transform used to transform the appearance of text into capitalize | uppercase | lowercase |
different cases, like uppercase, lowercase, or none
capitalise the first letter of each word.
Line-height used to specify the space between the lines of text. number | length | percentage |
normal
Word-spacing used to either increase or decrease the white space length | normal
between words
Letter-spacing used to give additional space between characters. length | normal
Background properties:
Name of Property Usage Possible values
Background-color used to set a specific colour as the background of an color name | hex value | RGB Color
element code | transparent
Background-image sets a specific image as the background image for url (path-of-the-image) | none
the body element.
Background-repeat By default, a background image is repeated both no-repeat |repeat-x | repeat-y |
horizontally and vertically to fill up the whole space repeat
of the element. However, we can control this
behaviour by using the background-repeat property
Margin properties:
Name of Property Usage Possible values
Margin-top To specify the top margin of an element top | right | bottom | left and
Margin-right To specify the right margin of an element value=length | percentage | auto
Margin-bottom To specify the bottom margin of an element
Margin-left To specify the left margin of an element
Padding properties:
Name of Property Usage Possible values
Padding-top To add padding space to all the four sides of an length | percentage
Padding-right element.
Padding-bottom
Padding-left
Border properties:
Name of Property Usage Possible values
Border-width specifying the width of all the four borders of an thin | thick| medium | numeric
element. value in pixels
Border-style sets the style of the border. Its default value is none| hidden | dotted | dashed |
'none'. solid | double | groove | ridge |
inset | outset
Border-color allows you to change the colour of the border colour name | colour value
surrounding an element. (hexadecimal or RGB)
Height and Width Properties:
Name of Property Usage Possible values
Height and Width used to set the height and width of a web page Pixels or Percentage
element corresponding to the height and width of
other elements on the web page.
Float used to push the position of an element to either Left | Right | None| Inherit
left or right in relation to the other elements to
wrap around it on a web page
Outline Properties:
Name of Property Usage Possible values
Outline-style Specifies the style of outline Dotted| dashed| solid| double|
groove| inset| outset| none |
hidden
Outline-width Sets the width of outline Thin| Thick| Medium| Length
Outline-color Sets the outline color for an outline colour name | colour value
(hexadecimal or RGB)
