     
 The following reference table gives Type Selector statements that are in common use. The elements in these statements can be added to the body selector and thus, through inheritance, apply to the whole body. The statements can also be added inline at appropriate points in the body to change the formatting for particular headings or paragraphs. This inline use of the statements will, however, impair the ability of visitors to change the formatting with their own style sheets, and it makes maintenance of the web pages more difficult.
body
{background-color: white;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 1em} | Permissible colors specified by name are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Other colors can be obtained via hex values. | body
{background-color: #ffbbff;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 1em} | Color specified by hex values. #000000 is black. #ffffff is white. | body
{ background-image: url('name.gif');
background-color: #ffffff} | Background image and color (preferred way to specify a background image). The path to the graphics file is relative and indicates the file is in the same folder as the statement. | body
{background-image: url('name.gif');
background-attachment: fixed;
background-repeat: no-repeat} | Background image that does not scroll with the text due to the background-attachment attribute. The background-repeat attribute allows the image to be tiled; the no-repeat value prevents tiling. | h1
{background-color: #ffffff;
border: thin red solid;
color: black;
font-family: arial,verdana,helvetica,geneva,sans-serif;
font-size: 1.5em;
font-weight: bold;
font-style: italicized ;
padding-bottom: 1em;
padding-left: 1em;
padding-top: 1em} | Permissible font sizes are xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, or absolute length such as 1.5em.Several fonts are listed to give the browser more latitude in choosing an acceptable font. Font size can have values of xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Size can also be in absolute sizes in the following units: points - pt, ems - em, exs - ex, picas - pc, pixels - px, inches - in, millimeters - mm, centimeters - cm. em is relative to the size of the parent element. Permissible font weights are normal, bold, bolder, lighter. Also, numbers 200, 300, 400, 500, 600, 700, 800, 900. 400 is the same as normal, and 700 is the same as bold. Some browsers may not accurately support the numbers. | h2
{font-size: 1.3em;
font-weight: bold} | Same for h3 through h6. Define the differences between header levels that you want to have. | p
{font-size: 1em} | Creates a block but doesn't change the font in any way. | em
{font-style: normal;
font-weight: bold} | Defines emphasis as bold. | q
{font-style: italic} | Defines quote as italics | blockquote
{background-color: #ffbbff;
border: thin black solid;
padding-bottom: .5em;
padding-left: .5em;
padding-right: .5em;
padding-top: .5em} | Defines the spacing around the block. | cite
{margin-left: 25%} | Defines the left margin as a relative 25%. This allows visitors to change it. | a:link img {border: none;}
a:visited img {border: none;}
a:hover img {border: none;} | Removes the default border around images. | body {margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 2%;} | Three of the page margins are set to 10 pixels (absolute margin). The fourth margin is set to 2% of the page width. You could also just use the word margin and a value to set all four margins the same: margin: 10px | | | | | | | | | |
...more to be added [ Home ] [ Up ] [ Intro to CSS ] [ Type Selectors ] [ Inheritance ] [ Learning XHTML ]
© Copyright 1998, 2011 Allen Leigh
|