CSS Units, Colors and References
In this tutorial you will learn about Cascading Style Sheets (CSS), Units and Colors, Percentage, Values, Colors, References – Font and Text, Color and Background, Layout, Classification, Positioning and Pseudo-classes.
Units and Colors
Percentage
Percentage values have to be followed by “%”.
Values
The absolute values represent a measurement, there are many measurements in CSS, so the measurement unit has to be stated.
CSS measurement units are:
• cm: centimeter.
• em: font size.
• ex: half of the font size.
• in: inch.
• mm: millimeter.
• pc: pica.
• pt: point.
• px: pixel.
Colors
Colors values can be in one of the following formats:
• color-name: the name of the color (red, green,…).
• #rrggbb: a hexadecimal representation of the color, the first two digits are for red, the following two digits are for green, and the last two digits are for blue (#FF00FF).
• rgb(x,y,z): RGB values representation of the color (rgb(255,255,0)).
• rgb(x%,y%,z%): RGB percentage representation of the color (rgb(100%,100%,0%)).
Font and Text:
|
direction |
Sets the reading order of the specified element. |
|
font |
Sets up to six separate font properties of the element. |
|
font-family |
Sets the name of the font used for text in the element. |
|
font-size |
Sets the size of the font used for text in the element. |
|
font-style |
Sets the font style of the element as italic, normal, or oblique. |
|
font-variant |
Sets whether the text of the element is in small capital letters. |
|
font-weight |
Sets the weight of the font of the element. |
|
line-height |
Sets the distance between lines in the element. |
|
letter-spacing |
Sets the amount of additional space between letters in the element. |
|
text-align |
Sets whether the text in the element is left-aligned, right-aligned, centered, or justified. |
|
text-decoration |
Sets whether the text in the element has blink, line-through, overline, or underline decorations. |
|
text-indent |
Sets the indentation of the text in the element. |
|
text-transform |
Sets the rendering of the text in the element. |
|
vertical-align |
Sets the vertical positioning of the element. |
Color and Background
|
background |
Sets up to five separate background properties of the element. |
|
background-attachment |
Sets how the background image is attached to the element within the document. |
|
background-color |
Sets the color behind the content of the element. |
|
background-image |
Sets the background image of the element. |
|
background-position |
Sets the position of the background of the element. |
|
background-repeat |
Sets how the background-image property of the element is tiled. |
|
color |
Sets the color of the text of the element. |
Layout
|
border |
Sets the properties to be drawn around the element. |
|
border-bottom |
Sets the properties of the bottom border of the element. |
|
border-bottom-color |
Sets the color of the bottom border of the element. |
|
border-bottom-style |
Sets the style of the bottom border of the element. |
|
border-bottom-width |
Sets the width of the bottom border of the element. |
|
border-color |
Sets the border color of the element. |
|
border-left |
Sets the properties of the left border of the element. |
|
border-left-color |
Sets the color of the left border of the element. |
|
border-left-style |
Sets the style of the left border of the element. |
|
border-left-width |
Sets the width of the left border of the element. |
|
border-right |
Sets the properties of the right border of the element. |
|
border-right-color |
Sets the color of the right border of the element. |
|
border-right-style |
Sets the style of the right border of the element. |
|
border-right-width |
Sets the width of the right border of the element. |
|
border-style |
Sets the style of the left, right, top, and bottom borders of the element. |
|
border-top |
Sets the properties of the top border of the element. |
|
border-top-color |
Sets the color of the top border of the element. |
|
border-top-style |
Sets the style of the top border of the element. |
|
border-top-width |
Sets the width of the top border of the element. |
|
border-width |
Sets the width of the left, right, top, and bottom borders of the element. |
|
float |
Sets on which side of the element the text will flow. |
|
Margin |
Sets the width of the left, right, bottom, and top margins of the element. |
|
margin-bottom |
Sets the height of the bottom margin of the element. |
|
margin-left |
Sets the width of the left margin of the element. |
|
margin-right |
Sets the width of the right margin of the element. |
|
margin-top |
Sets the height of the top margin of the element. |
|
Padding |
Sets the amount of space to insert between the element and its margin or, if there is a border, between the element and its border. |
|
padding-bottom |
Sets the amount of space to insert between the bottom border of the element and the content. |
|
padding-left |
Sets the amount of space to insert between the left border of the element and the content. |
|
padding-right |
Sets the amount of space to insert between the right border of the element and the content. |
|
padding-top |
Sets the amount of space to insert between the top border of the element and the content. |
Classification
|
display |
Sets whether the element is rendered. |
|
list-style |
Sets up to three separate list style properties of the element. |
|
list-style-image |
Sets which image to use as a list-item marker for the element. |
|
list-style-position |
Sets how the list-item marker is drawn relative to the content of the element. |
|
list-style-type |
Sets the predefined type of the line-item marker for the . |
Positioning
