CSS Primer

Images

Images can be coded in both the css property and html class code.

p.onea { position: absolute;
top: 30%;
left: 40%;
height: 100px;
width: 100px;
background-image: url(moon.jpg); }

[p class="onea"]
[img alt="art" src="moon.jpg" height="100" width="100"]

The correct way is to use [img alt="art" or [img alt="my dog", so as to give the image a name, for those browsers that do not show images. By using the height/width, the size of the image can be controlled. Images can be compressed and expanded to any size, although they will not maintain visual proportion. Images can be edited for size change with image editors such as ACDSee. Images can be used in tables, be given table borders and used for horizontal and vertical lines. Both the css property and html class code can be used at the same time with varying results, and would show one over the top of the other. A whole page image is usually put in the body:

body { margin-left: 8%; margin-top: 12%;
margin-bottom: 8%;
background-image: url(clouds.jpg); /*full page image*/
font-family: times new roman;
font-size: 20px;
font-weight: 700; }

Horizontal Line

The [hr] for horizontal line is considered depreciated or obsolete. However one can use images to make horizontal and vertical lines.

p.one { margin-left: auto; margin-right: auto;
position: relative;
margin-top: 300%;
text-align: center;
background-image: url(HRed.jpg);
height: 7px;
width: 500px;
[p class="B"] [img alt="hr" src="HRed.jpg"height="07" width="500">]

Normally one would only use the image address in the css or the html, but both can be used. Any image can be used to give some texture to the horizontal rule, or one can create one's own. With a draw program, create a square and flood with a single color, crop it so that it is entirely color, and 'Save As' to html/css file. Then adjust the size for length or height. An example of this type of hr is at the bottom of this page.

Or the most simple way to do it:

p.hr { margin-top: -1%;
margin-left: 1%;
height: 10px;
width: 550px;
background-color: gold; }

[p class="hr"][/p]

Tables

For table css, rather than property p. one uses table.

table.one { margin-left: auto; margin-right: auto;
position: relative;
border-style: solid;
border-width: 8px;
border-top-color: green;
border-right-color: blue;
border-bottom-color: red;
border-left-color: yellow;
background-color: gold;
width: 100px;
height: 100px;
text-align: center;
font-family: times new roman;
font-weight: bold;
font-size: 18px;
color: white; }

The html is:

[table class="one"]
[tr] [td]Text or image here[/td] [/tr] [/table]

The basic table html must be used. The above example will give a basic table, with four different color borders, background color and white text in the center. If the text does not center with the text-align: center; one may have to use padding-left: so many px; or percentage. The table html should be correct, using the beginning and ending /trs, /tds and /tables. Tables can be the most difficult part of using CSS, and one may just have to try different things to get the desired results.

Table Data td

To give various table data cells within a table differing sizes and colors, one follows the table code with td properties:

table.x { margin-left: auto; margin-right: auto;
position: relative;
height: 100px;
width: 300px;
border: inset 3px;
border-color: black; }

td.x1 { height: 40px;
width: 20px;
background-color: red; }

td.x2 { height: 40px;
width: 150px;
background-color: yellow;
padding-left: 30px;
text-align: center;
font-family: times new roman;
font-weight: bold;
font-size: 18px;
color: black; }

td.x3 { height: 40px;
width: 20px;
background-color: blue; }

The html code would be as follows:

[table class="x"[ [tr]
[td class="x1"] [/td] [td class="x2"]Text goes here[/td] [td class="x3"] [/td] [/tr] [/table]

Tds [td] [/td] do not need to have anything in them and can be completely empty.
The table would look like this:

Text goes here

CSS (3 of 6) Next Page