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

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

 

[catlist id=169].

Related posts