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 . |
