CSS Tutorials : Lesson 15 : Units, Colors, References

CSS Tutorials : Lesson 15 – Units, Colors, 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

Bottom	Sets the bottom position of the element in relation to the bottom of the next positioned element in the document.
Height	Sets the height of the object.
Left	Sets the position of the element relative to the left edge of the next positioned element in the document.
Overflow	Sets how to manage the content of the element when the content exceeds the height and/or width of the object.
Position	Retrieves the type of positioning used for the object.
Right	Sets the position of the element relative to the right edge of the next positioned element in the document.
top	Sets the position of the element relative to the top edge of the next positioned element in the document.
Visibility	Sets whether the content of the element is displayed.
Width	Sets the width of the object.

Pseudo-classes

active	Sets the style of anchor when the link is engaged or active.
cursor	Sets the type of cursor to display as the mouse pointer moves over the element
hover	Sets the style of the anchor when the user hovers the mouse over the links.
link	Sets or retrieves the style of the < a > element for the default state of the link.
visited	Sets the style of the anchor for previously visited links.