How To Style

A Few Common Attributes and Values

width

Common values nnpx or nn%

height

Common values nnpx or nn%

color

Some possibilities: #hhh, #hhhhhh, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, or yellow. (h is a hexadecimal digit: 0, 1, ..., 9, A, B, ..., F. Modern browsers recognize 140 color names.)

background-color

(See comments for "color".)

background-image

url(url)

font-size

Common values: xx-small,x-small, small, medium, large, x-large, xx-large, smaller, larger, nnn%, nnpx, nnpt.

font-style

Possible values: normal, italic.

font-weight

Common values: normal, bold, bolder, lighter.

font-family

Common values: (generic: serif, sans-serif, cursive, monospace, fantasy, Helvetica, Arial, "Times New Roman", ... .
Multiple alternatives separated by commas concluding with a generic font are strongly encouraged. E.g. Times, "Times New Roman", serif
because some fonts may not be available on a user's computer. The looks of a generic font may vary from browser to browser.

text-align

Possible values: left, right, center, justify.

text-decoration

Possible values: none, underline, overline, line-through.

text-indent

Indent first line of paragraph. Values such as nnpx can be positive or negative.

float

Possible values: none, left, right

margin

Common values: nnpx (the value sets the width of the external margin outside the border around the element and determines how close the element's border can be to other elements. All 4 sides can be set separately.)

padding

Common values: nnpx (the value sets the width of the internal padding inside the border of the element and determines how close the contents of the box can be to the border.)

border

Specify width, style, color. Separate with commons or handle each separately as shown below.

border-width

Common values: nnpx, thin, medium, thick. (All 4 sides can be set separately.)

border-style

Possible values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit. ("none" is the default so this attribute must be specified if you want a border.)

border-color

See color for color possibilities.

list-style-type

Used only for lists. For ordered lists, some common values: decimal, lower-roman, upper-roman, lower-alpha . For unordered list, some common values: none, disk, circle, square.

list-style-image

url(file name)

vertical-align:

Often used in tables. Common values: top, middle, bottom. (Addition values are available.)

table-layout

Sets table layout. Common values: auto (the default), fixed. Fixed is faster because widths are set by the first row.

overflow

Useful when the area's height and width are specified. Possible values: visible (even if outside of box), hidden, scroll (always add scroll bars) auto (add scroll bars if needed): Used in a div containing the table. Adds a scroll bar if table is too wide. One can specify overflow-x (for left/right edges) or overflow-y (for top and bottom edges).
This attribute division uses "overflow: auto;"

display

Display has a very long list of possible values. Some common values: none (pretend the element doesn't exist), block (show the element), inline-block, and inline. The none and block attributes are often used in web pages to hide and show information. To compare block, inline-block, and inline: Think of "block" as beginning and ending with <br> so that block elements are stacked. "inline-block" elements are the same except without the <br>'s but they still can have width, height, margins, and padding but are laid out something like words. "inline" elements are like words or spans in html.

visibility

Possible values: hidden (element takes up space but can't be seen), visible, collapse (only used in tables, pretends the element isn't there).

transform

This class allows one to translate, scale, rotate or skew an element but may only work on <div>. The element is transformed as specified but room is only reserved for the untransformed object. Example:
.r10 {transform: rotate(10deg);}
would rotate all elements with this class 10 deg clockwise. For more information: https://www.w3schools.com/css/css3_2dtransforms.asp", for example, or search for "css transform".

:link, :visited, :hover, :active

These are not attributes but :hover can be applied to most elements, the others are only for <a ... >. For example: p:hover {background-color: yellow;} would mean paragraphs would have a yellow background when the curser hovered over them. p.class1{color: red} means paragraphs having class "class1" would have a red font. You can also create a class having the hover property. For example:
.special:hover {background: yellow;}
was used on both a paragraph and a span in the section.
For anchors, the :link, :visited, :hover, and :active must appear in that order, if used.