Technical Training
CSS TutorialsWorking with CSS Units, Colors and References
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.
Ads
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
CSS Tutorials







