CSS Style Sheet Parameters
Here is a summary of common css style sheet parameters to save you time.
CSS Color Parameters
Example: { color: red } The color property applies to all elements.
CSS Color Names
There are 16 colors that can be specified by name:
RGB Color parameters
You can specify a color value in hex (range: 0-9a-f), decimal (range: 0-255) or a percentage (0-100%)
Hex numbers are specified as #rgb or for greater precision as #rrggbb. For browser-safe colors use only hex digits: (0,3,6,9,c,f). Browser-safe colors are supposed to not confuse older web browsers.
Four ways to specify yellow text:
Setting the background color: { background-color: black; color: lime }
CSS Font Parameters
font-family specifies a list of one or more fonts in order of preference.
Common font names are arial and verdana.
Generic family names may also be used i.e.
font-style takes parameters of font-style:normal , font-style:italic and font-style:oblique
font-variant takes parameters of font-variant:normal and font-variant:small-caps
font-weight takes parameters of
font-size takes parameters of absolute-size , relative-size, length and percentage.
Possible parameters for absolute-size are: xx-small , x-small , small , medium , large , x-large , xx-large
Possible parameters for relative-size are: larger or smaller. The font size will then be larger or smaller than the text near that point.
Length parameters may be relative to the canvas or absolute.
Relative length units:
Absolute length units: Some examples:font is a shortcut way of specifying all the font characteristics in one line of code.
The sequence of optional parameters is:
font-style, font-variant, font-weight, font-size, line-height, font-family.
This example specifies a font size and a line height: P { font: 10pt/1.5em verdana }
Using all options: P{ italic small-caps bold 120%/150% arial}
font-family font-style font-variant font-weight font-size
CSS Text Parameters
word-spacing and letter-spacing only have a length parameter.
text-decoration takes the parameters underline, overline, line-through and blink.
text-transform takes the parameters capitalize, uppercase or lowercase.
text-align takes the parameters left, right, center or justify.
text-indent takes the parameters of length or a percentage of the parent element's width e.g. P { text-indent: 4em }
line-height takes parameters of a number, a length or a percentage. It is used to define the spacing between the baselines of adjacent lines of text. If a number is specified, it is multiplied with the font size to get the spacing value.
vertical-align is used to position elements such as images in relation to text. It takes these parameters:
CSS Box Model Parameters
These parameters set the size, margin, border style, padding and positioning of the box representing an element.
Margin Parameters
margin-left margin-right margin-top margin-bottom margin
These all take values of length, percentage or auto. The percentage is relative to the closest containing block element. Margin applies to all 4 sides.
padding-left padding-right padding-top padding-bottom padding
These all take values of length or percentage
border-left-width border-right-width border-top-width border-bottom-width
These take values of thin, medium, thick or a specified length. border-width takes 1 to 4 values affecting all 4 sides.
border-color takes a color value such as red or #f00
border-style takes from 1 to 4 values out of these choices:
dotted dashed solid double
groove ridge inset outset
border-left border-right border-top border-bottom border
These are shortcuts, optionally taking these parameters: border width, border style and color.
width and height are used to force a width or height value and take the parameters length, percentage or auto.
