Style Cheats
Created | Updated Dec 18, 2006
| ||||||||||||||||||||||||||||||||||||||||||
|
Cascading Style Sheets
Meant to create a uniform layout over pages of a website.
STYLE also be used as an 'inline' property without the sheets.
Most enclosing TAGs can have a STYLE="" attribute. This comes in handy if you want to change properties of a text but do not want (or can) to change the overall layout.
Some of the STYLE parameters are also available as attributes. Take care not to confuse these as the values can (and will) have different properties.
Style parameters are seperated by semicolons. Parameters and their value are seperated by colons. I advise to use lots of spaces, the readability for the user is most important.
STYLE=" Color:^#000000;^ Font-Family:^ Times New Roman;^ "
The parameters and values are case insensitive however I kick on reading it the first time right. Notice the parameter has a hyphen to connect, while the value has spaces. Automatic generated GuideML does generate line breaks halfway such value.
While there is no real difference I prefer the method with the least bytes. This means I wil rarely use 'Font-Family: Font Name; ' if this can be done in eight bytes less using the single FACE="Font Name" attribute.
Well, the STYLE parameters and more or less how they function in GuideML:
|
Font-Size:
The width of (average) character. This value can be expressed in points, picture elements, percentage or in pixels. Our best results are in percent and pixels. The value can not be negative. Keep in mind what the FONT FACE or Font-Family is, they scale different.
Color:
They can not write. Ok they gave us the choise of named colours, decimal color values and geeky hexadecimal values. The numbered colors give control over the intensity of the three basic colours. You can also give a percentage instead of a value in the RGB( 100%,0%,12.5%) form. The values above 255 and below 0 result in total ignoring of the colour parameter.
Position:
We have got two tastes: absolute (browser)window position and relative to the position on the screen. The left top point is the focus.
It is NOT polite with respect to our hosts, the BBC, to cover their part of the page!
Top:
Down is positive, up is negative. Very big values are not in display they have hitchhiked off to nearby villages.
Left:
Is more or less the same story besides negative for going left and positive for growing right.
Line-Height:
The height the characters get on the line where they show if not dispositioned. Images are not affected!
The highest object on the line determinates the actual height.
Very important, at least for font-art, by making Line-Height: 0px; and dispositioning the characters no vertical space is used on the place of origin.
Dispositioned zero height characters do not attract focus so you can not use them to LINK. They also do not disable background LINKs!.
Vertical-Align:
The values Sub and Bottom shift the baseline for text half the 'line height' down. Super and Top shift the text half the 'line height' up.
Letter-Spacing:
Create extra distance between characters, or let them overlap.
Text-Decoration:
You can Underline (as with <U>) or Line-Through (<S>) or Overline an object.
Font-Weight:
This will not add to the mass of the page. The weight is just the volume of ink that would be needed to print. The values Bold and Bolder increase the blackness of a character. The numeric values increase in steps of 100, (where 600-800 is the same as <B>) upto a very fat 900. Also the size of the font is influenced by this parameter.
Font-Style:
Either Italic (as with <I>) or Oblique wich does the same.
Margin:
Padding:
Border-Width:
Border-Color:
Border-Style:
Or you give one parameter for all four sides, or each his own.
Parameter: Value-Left Value-Top Value-right Value-Bottom;
An example Margin: 20px 15px 10px 5px;
You can also give only one side the value by stating Left, Top, Right or Bottom in the parameter.
Next is a table giving an idea of where each space is
The outside, other objects
Margin
|
Border-Style:
The values for the kind of border decoration you would like to use. Simple Dotted creates a dotted line round the object. Dashed creates a line of short lines. Solid creates yes, well, a line. Double creates two lines one inside the other. Groove creates a trench shaded line. Ridge creates a border as for a painting. Inset creates a shade as if there is a hole in the page, the inside on a page behind. Outset creates a shade as if there is a piece lying on top of the page.
There must be enough sites on the WEB with more information about STYLE
