CSS Primer

External CSS

If one is beginning with css, and or if one has multiple pages nearly all the same, one can create one set of css instructions for all the pages. This is an External CSS file. First create an external file with a ".css" file extension, such as external.css All that is needed on this page is [style type="text/css"] and [/style], with all appropriate css in between that every page will share. If one wants to change all the pages at once, it can all be done from just one page file.

[style type="text/css"]
a:link { color: brown; }
a:visited { color: brown; }
body { margin-left: 8%; margin-top: 12%;
margin-bottom: 8%;
background-color: #d9b9bc;
font-family: times new roman;
font-size: 40px;
font-weight: 700; } color: blue;
[/style]

Then create a new page or use an old one. All the css that is necessary for this page is
[link rel="stylesheet" type="text/css" href="external.css"]
One uses only this one line, as style sheet type shown below.

[head]
[meta name="robots" content="index, follow"]
[link rel="icon"href="favicon.ico"]
[link rel="stylesheet" type="text/css" href="external.css"]
[/head]
[body]

"external.css" is the address of the .css page in this particular case, where all pages are directed. This new page is shown here.

One can also use properties and tables on the external css page for special circumstance differing from the basic page layout for instance headings.

p.one { font-style:italic;
font-family: times new roman;
font-size: 25px;
font-weight: 700;
color: green; }

[p class="one"]

External CSS

[/p]

Afterthoughts

One can create designs with blocks of color just using the property CSS and empty html.

p.bla { margin-top: 5%;
margin-left: 20%;
position: relative;
height: 100px;
width: 100px;
background-color: orange; }

p.blb { margin-top: -10%;
margin-left: 25%;
top: 1cm;
height: 100px;
width: 100px;
background-color: red; }

p.blc { margin-top: -13%;
margin-left: 30%;
top: 1cm;
height: 100px;
width: 100px;
background-color: black; } [p class="bla"][/p]
[p class="blb"][/p]
[p class="blc"][/p]

Float text around a Table:

To create a flow of text around an object, such as text around a table or image, one uses the float: attribute. This is float: left; float: right; or float: none; which will place the table or image to left or right of the page. This will not work using the position: absolute; attribute. The space around the object is created by margin: or margin-right; margin-left or top or bottom. The html [p class="flow"][/p] is placed on the page above the text.

p.flow { top: 3%;
height: 100px;
width: 100px;
float: left;
margin: 30px;
margin-bottom: 3px; background-color: green; }
[p class="flow"][/p]

When a floated object is placed to the right side, the text border can be uneven. In this case one can attempt to even the border by using the text-align: right; or text-align: justify; It may or may not do much. For instance for fill from a dictionary.com: "1. To show (an act, claim, statement, etc.) to be just or right: The end does not always justify the means. 2. to defend or uphold as warranted or well-grounded: Don't try to justify his rudeness. 3. Theology. to declare innocent or guiltless; absolve; acquit. 4. Printing. a. to make (a line of type) a desired length by spacing the words and letters, esp. so that full lines in a column have even margins both on the left and on the right. b. to level and square (a strike)."

p.flows { top: 3%;
height: 100px;
width: 100px;
float: right;
margin: 30px;
background-color: gold;
text-align: justify; }

[p class="flows"][/p]

CSS (6 of 7) Next Page