CSS Primer

Property

CSS code p stands for property, like position, font-style, font-color, height and width or border properties, etc. The property p must be identified so that it is the same as in the html. The CSS code p is called an 'ID' and the html code p is called 'class'.

p.one { top: 10%; }
[p class="one"]Whatever you are doing[/p]

CSS property p is always followed by a dot and an ID identifier. Sometime the ID may not work like numbered IDs.

p.one { }
p.a { }
p. tva { }
p. seventeen { }

p.one { position: absolute;
top: 40%;
left: 10%;
font-family: times new roman;
font-size: 20px;
font-weight: 700; }
[/style]
[/head]
[body]
[p class="one"]Title of section[/p]

Properties are used to create special characteristics independent of the page body and default settings.

p.three { font-family: times new roman;
font-size: 22px;
font-weight: 700;
color: blue; }
[p class="three"]Spacing[/p]

This is the one word paragraph title (Properties) which is of different size and color. The html class identifier and html must be closed with [/p]

Positioning

Positioning means placement of items like blocks of text or tables on the page. These definitions are taken from www.w3schools.com

position: absolute; "An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties."

position: relative; "An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position."
position: static; "An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)"

position: fixed; "An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling."

Spacing

Spacing can use as many as nine different attributes. These are such px for pixel, % for percentage, cm for centimeter, in for inch, mm for milimeter and others. See CSS Units. px gives a pixel space which may differ in different browsers. px is usually used for font size like 20px. % shows a specific percentage on each kind of browser, and thus may be more exacting in different browsers, since it spaces relative to the page size. cm is often used with the attribute position:relative; where position: relative; can use positive or negative numbers such 3cm or -3cm, and where the minus might pull the object all or partially off the page. Fractions can also be used, and they are sometimes the only way to get proper position. This would be like 3.5cm or -1.7cm.

p. ten { position: relative;
top: -3cm;
left: 20% }

One can mix space attributes relative to the situation, like one can use px, cm, % or whatever, in the same property code like as shown above (p.ten).

HTML [p] for paragraph is not used with CSS, as it would get confused with the property p tag. What is used for line breaks is [br] or [br][br] for double space or paragraph break. Break signs can also be used to space the top first paragraph from the top of the page. To create space between the first element and the top of the page one can use breaks [br] or create:

p.three { margin-top: 20%;
font-family: times new roman;
font-size: 20px;
font-weight: 700;
color: blue; }

[p class="three">Page text, first paragraph or whole page.[/p]

Because sometimes property class and tables create too much space between it and text below this can corrected with:

display: inline;

which would put the following text on the same line. Then one uses [br] to create space.

The amount of space between lines and line attributes can be set such as:

p.a { line-height: 1.4 }
p.b { line-height: 14pt }
p.c { line-height: 140% }

or:

p.one { word-spacing: 1em; }
p.two { letter-spacing: normal; }
p.three { letter-spacing: 0.1mm; } /*length*/

One can also create space with the margin and padding attributes. For instance margin could be thought of as outside of a table and padding thought of as inside a table. Sometime top: or left: or right: or bottom: will create the necessary margins, and sometime what is needed is margin-top: or margin-left: or margin-right or margin-bottom.

Horizontal Center

Centering does not seem so difficult, except when the font size is changed. The margin of an object like a table can be centered horizontally with margin-left: However margin will hold position on top and left but object will increase in size to the bottom and right. To hold positional center in all directions one must use:

p.six { margin-left: auto; margin-right: auto; }

Anything centered this way will center relative to the margin established in the body as: body { margin-left: 20px; Center and size can be easily checked, by holding down keyboard control, and scroll with a mouse scroll wheel larger and smaller. All centering CSS should contain:

p.one { text-align: center; }

as sometimes it is all that works, and also they say it is required for Microsoft browsers.

A major problem is to hold position relationships between elements such as properties and tables to one another. when scrolling font size (control + scroll mouse wheel up and down or control plus/minus). Objects may tend to fly away from each other. Need to place all elements inside an invisible table container or border.

CSS (2 of 6) Next Page