Tables

Properties that are commonly

used with the <table>, <td>, and <th> elements include the following:

❑ padding to set the amount of space between the border of a table cell and its content — this

property is very important to make tables easier to read.

❑ border to set the properties of the border of a table.

❑ text and font properties to change the appearance of anything written in the cell.

❑ text-align to align writing to the left, right, or center of a cell.

❑ vertical-align to align writing to the top, middle, or bottom of a cell.

❑ width to set the width of a table or cell.

❑ height to set the height of a cell (often used on a row as well).

❑ background-color to change the background color of a table or cell.

❑ background-image to add an image to the background of a table or cell.

body {color:#000000; background-color:#ffffff;}

h1 {font-size:18pt;}

p {font-size:12pt;}

table {

background-color:#efefef;

width:350px;

border-style:solid;

border-width:1px;

border-color:#999999;

font-family:arial, verdana, sans-serif;}

caption {

font-weight:bold;

text-align:left;

border-style:solid; border-width:1px; border-color:#666666;

color:#666666;}

th {

height:50px;

font-weight:bold;

text-align:left;

background-color:#cccccc;}

td, th {padding:5px;}

td.code {

width:150px;

font-family:courier, courier-new, serif;

font-weight:bold;

text-align:right;

vertical-align:top;}

The border-collapse Property: The border-collapse property specifies whether the browser should display every border — even if there are two cells with different border properties in adjacent cells — or whether the browser should automatically decide which border to display based upon a built-in complex set of rules.

Example

table.one {border-collapse:collapse;}

table.two {border-collapse:separate;}

td.a {border-style:dotted; border-width:3px; border-color:#000000;padding: 10px;}

td.b {border-style:solid; border-width:3px; border-color:#333333; padding: 10px;}

The border-spacing Property: The border-spacing property specifies the distance that separates adjacent cells’ borders. It can take

either one or two values; these should be units of length.

Or you can specify two values, in which case the first refers to the horizontal spacing and the second to the vertical spacing:

td {border-spacing:2px; 4px;}

The caption-side Property: The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table.

caption {caption-side:bottom}

The empty-cells Property: The empty-cells property indicates whether a cell without any content should have a border displayed.

table {

background-color:#efefef;

width:350px;

border-collapse:separate;

empty-cells:hide;}

The table-layout Property: The table-layout property is supposed to help you control how a browser should render or lay out a table (although support in browsers is weak).

Read More

Lists

The bullet point, or number in the case of numbered lists, is referred to as the marker.

The list-style-type Property: The list-style-type property allows you to control the shape or style of bullet point (also known as a marker)

The list-style property can either be used on the <ul> and <ol> elements or on the <li> element.

Example:

li.a {list-style:none;}

li.b {list-style:disc;}

li.c {list-style:circle;}

li.d {list-style:square;}

li.e {list-style:decimal;}

li.f {list-style:lower-alpha;}

li.g {list-style:upper-alpha;}

li.h {list-style:lower-roman;}

li.i {list-style:upper-roman;}

The list-style-position Property: The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points.

Example:

ul {list-style-position:outside; }

ol {list-style-position:inside; }

The list-style-image Property: The list-style-image property allows you to specify an image so that you can use your own bullet style.

li {list-style-image: url(“images/bulletpoint.gif”);}

If the image cannot be displayed, the browser should just display a dot rather than a broken image symbol.

The list-style Property: The list-style property is a way of expressing the other three properties at once.

ul {list-style: inside circle;}

The marker-offset Property: The marker-offset property allows you to specify the distance between the marker and the text relatingto that marker.

li {marker-offset:2em;}

Read More

Background Properties

The background-color Property:

body {background-color:#cccccc; color:#000000;}

p {background-color:#FF0000; color:#FFFFFF;}

The background-image Property:

body {

background-image: url(“images/background.gif”);

background-color: #cccccc;}

The background-repeat Property:

¢If you do not want your image to repeat all over the background of the page, you should use the background-repeat property.

body {

background-image: url(“images/background_small.gif”);

background-repeat: repeat-x;

background-color: #ffffff;}

The background-position Property(for fixing position of backgrounds)

¢You may want to alter the position of this image, and you can do so using the background-position property

Background-position Example

body {

background-image: url(“images/background.gif”);

background-position: 50% 20%;

background-repeat: no-repeat;

background-color: #eaeaea; }

The background-attachment Property

The background-attachment property allows you to specify an image known as a watermark.

body {

background-image: url(“images/background.gif”);

background-attachment: scroll;

background-position: center;

background-repeat: no-repeat;}

Read More

Advanced CSS

You will learn How to use CSS to control the following:

❑ Presentation of links

❑ Backgrounds of document

❑ Styles of bullet points and numbered lists

❑ Appearance of tables

❑ Outlines around boxes

❑ Boxes that can gain focus or are active

❑ Addition of content to the XHTML document before or after an element

❑ The three positioning schemes that allow you to determine where on a page a box will

appear — something that prepares you to use CSS to create layouts

Example of Links with CSS

body {background-color:aqua}

a { font-family: arial, verdana, sans-serif; font-size:12px; font-weight:bold;}

a:link {color:red; text-decoration:none;}

a:visited { color:#orange; text-decoration:none;}

a:active { color:black; text-decoration:underline;}

a:link:hover { background-color:yellow; text-decoration:underline;}

Read More

Text Pseudo-Classes

There are two very helpful pseudo-classes that can help you work with text. These pseudo-classes allow you to render either the first letter or the first line of an element in a different way than the rest of that element. Both of these are commonly used when laying out text.

¢The first-letter Pseudo-Class

¢The first-line Pseudo-Class

The first-letter Pseudo-Class:

¢The first-letter pseudo-class allows you to specify a rule just for the first letter of an element. This is most commonly used on the first character of a new page, either in some magazine articles or in books.

p.pageOne:first-letter {font-size:42px;}

The first-line Pseudo-Class:

¢The first-line pseudo-class should allow you to render the first line of any paragraph differently from the rest of the paragraph.

p:first-line {font-weight:bold;}

Read More

The letter-spacing Property

¢The letter-spacing property is supposed to control something that print designers refer to as tracking: the gap between letters.

span.wider {letter-spacing:10px;}

The word-spacing Property

¢The word-spacing property is supposed to set the gap between words. Its value should be a unit of length.

span.wider {word-spacing:20px;}

The white-space Property

¢The white-space property controls whether or not white space is preserved within and between block level elements.

¢The white-space property offers the same results as the XHTML <pre> element and nowrap attribute.

.pre {white-space:pre;}

.nowrap {white-space:nowrap;}

Read More

Text Formatting

¢In addition to the font properties, you can use several properties to affect the appearance or formatting of your text.

The color Property

¢The color property allows you to specify the color of the text.

p {color:#ff0000;}

The text-align Property

The text-align property works like the deprecated align attribute would with text.

Example:

td.leftAlign {text-align:left;}

td.rightAlign {text-align:right;}

td.center {text-align:center;}

td.justify {text-align:justify;}

The vertical-align Property

The vertical-align property is useful when working with inline elements, in particular images and

portions of text. It allows you to control their vertical positioning within the containing element.

The text-decoration Property

For example, here are these properties used on separate paragraphs:

p.underline {text-decoration:underline;}

p.overline {text-decoration:overline;}

p.line-through {text-decoration:line-through;}

p.blink {text-decoration:blink;}

The text-indent Property

The text-indent property allows you to indent the first line of text within an element.

.indent {text-indent:3em;}

The text-shadow Property

¢The text-shadow property is supposed to create a drop shadow, which is a dark version of the word just behind it and slightly offset.

.dropShadow { text-shadow: 0.3em 0.3em 0.5em black}

The text-transform Property

The text-transform property allows you to specify the case for the content of an element.

<p class=”none”><i>The Catcher in the Rye</i> was written by J.D. Salinger</p>

p.none {text-transform:none;}

p.Capitalize {text-transform:Capitalize;}

p.UPPERCASE {text-transform:UPPERCASE;}

p.lowercase {text-transform:lowercase;}

Read More