Font Properties | Purpose |
---|---|
font-family | Each browser has it's own set of font typefaces. If a typeface has not been installed on your computer or if it is not one recognized by your browser, the default font is Times New Roman. Multiple fonts can be listed in case one choice is not installed. The selection is made left to right. |
font-size | The font-size property sets the size of the font. The value measurements can be scaled, be set by units of measure, or set by a percentage. |
font-weight | The font-weight property configures the boldness of the text. The font-style property configures the style such as italic, normal, and oblique. |
font-style | The font-style property configures the font in normal, italic, and oblique. |
text-transform | The text-transform property configures the capitalization of text as none, capitalize, uppercase, or lowercase. |
line-height | The line-height property modifies the default height of a line. |
text-align | The text-align property configures the alignment of text. |
text-indent | The text-indent property configures the indentation of the first line of text within an element. The value can be either numeric or a percentage. |
width | The width property configures the width of an element's parent element, not the width of the actual content. |
min-width | The min-width property sets the minimum width of an element's content with either a numeric value or a percentage. |
max-width | The max-width property sets the maximum with of an element' content with either a numeric value unit or a percentage. |
height | The height property configures the height of an element's parent content, not the height of the actual content |
Box Model Properties | Purpose |
---|---|
content | The content area can be images, paragraphs, headings, lists, etc. The visible width is the total of the content width, the padding width, and the border width. The width property, as mentioned in the table above, only configures the width of the content |
padding | The padding area is between the content and the border. The padding property configures the space between the content and the border. You can work with each side individually using the properties: padding-bottom, padding-left, padding-right, padding-top. You can also work with the size, style, and color of the border using: border-width, border-style, and border-color. |
border | The border area is between the padding and the margin. It is the boundary of an element. You can work with each side of the border individually, as well as the style and color. |
margin | The margin is the empty space between the element and the adjacent element. The margin property configures the area surrounding the element.
|
CSS3 Rounded Corners | The new CSS border-radius allows the use of rounded corner so that your page doesn't look "boxy". Not all browsers will support the border-radius property. However, if a browser doesn't recognize a property, that property is ignored, so you can still use the radius property. |
Center Page Content with CSS | You can use the auto value with the margin property to center a page. Refer to the id of the entire page div and assign the value auto to both the margin-left and margin-right properties. This will leave an equal amount of space to both the left and right margins. |
CSS3 Properties | Purpose | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
box-shadow |
|
|||||||||||
text-shadow |
|
|||||||||||
background clip |
|
|||||||||||
background-origin |
|
|||||||||||
background-size |
|
|||||||||||
opacity | The opacity property configures the transparency of the background color. Values range from 0 - 1. | |||||||||||
RGBA color | CSS3 added transparent color, RGBA color. The "a" stands for alpha and provide the transparency color. The alpha color ranges from 0 to 1. | |||||||||||
HSLA color |
|
|||||||||||
gradients | The gradient property configures a smooth blending of shades from one color to another. This is not yet supported. |