ITSE 1411 Beginning Web
More CSS Basics Chapter 6
Discussion
Font Properties Table
Font PropertiesPurpose
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

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. With an understanding of the box model, and some background in positioning elements, you can layout your page to look the same on all browsers. To apply CSS to an entire page, use a div element with an id to contain the entire page.
Box Model PropertiesPurpose
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.
  1. You can work with each side individually using the properties:
    margin-bottom, margin-left, margin-right, and margin-top.
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.
CSS Properties Table
CSS3 PropertiesPurpose
box-shadow
The box-shadow property is used to create a shadow effect on the box model. IE 9 does not support the text-shadow property.Positive value configures the shadow to expand. Negative value configures the shadow to contract.
valuepurpose
horizontal offset Positive value configures shadow on the right.
Negative value configures shadow on the left.
vertical offset Positive value configures shadow below.
Negative value configures shadow above.
blur radius Higher values configure more blur.
Zero configures a sharp shadow.
spread distance
color value any valid color value
text-shadow
Text shadow table
valuepurpose
horizontal offset Positive value configures shadow on the right.
Negative value configures shadow on the left.
vertical offset Positive value configures shadow below.
Negative value configures shadow above.
blur radius Higher values configure more blur.
Zero configures a sharp shadow.
color value any valid color value
background clip
Confines the display of the background image
content-box Clips off the image's display to fit the area behind the content.
padding-box Clips off the image's display to fit the area behind the content and padding.
border-box (default) Clips off the image's display to fit the area behind the content, padding, and border.
background-origin
Positions the background image table
content-box Positions relative to the content area.
padding-box (default) Positions relative to the padding area.
border-box Positions relative tot he border area.
background-size
Resize or scale the background image
percentage values width, height
pixel values width, height
cover Preserves aspect ratio as it scales the background image to the smallest size for which both the height and width can completely cover the area
contain Preserves aspect ratio as it scales the background image to the largest size for which both the height and width will fit within the area.
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
Hue, Saturation, Lightness and Alpha color
Hue Numeric color value from 0 to 360. Red is both 0 and 360. Green is 120. Blue is 240. Use 0 to configure black, gray, and white.
Saturation Configures the intensity and uses percentage.
Lightness Determines the brightness or darkness and uses percentage values.
Alpha Represents the transparency of the color and ranges from 0 (transparent) to 1 (opaque).
gradients The gradient property configures a smooth blending of shades from one color to another. This is not yet supported.