HTML Color and Style
HTML Color and Style
|THREE WAYS TO INCLUDE STYLE INFO |LINKED STYLE SHEETS |
| | |
|The three most common ways to include style information are: |Linked style sheets have NO HTML other than properties, |
|Linked Style sheets (separate style page) |selectors, and values. They do not even have a style tag. |
|Embedded Style sheets (in head section style tag) | |
|Inline style notation (as attributes/values of tags) |USING CLASSES |
| | |
|THE LINK TAG | |
| | |
|The link tag usually consists of three parts: | |
|Type, Href, and Rel (hint: T, H, R - ee) |CONTEXTUAL SELECTORS |
| | |
| |italics in list items, you would select as follows: |
| | |
|THE STYLE TAG |LI I {property: value} |
| | |
|The style element consists of three elements: selectors, |COLORS |
|properties, and values. | |
| |Color values actually consist of 3 values, the red value, the |
| |green value, and the blue value. Two hexadecimal digits are used|
| |The most browser-safe colors are created by combining 6 degrees |
| |of red, 6 degrees of green, and six degrees of blue. The |
| |following table summarizes the values: |
|Example: |Hexadecimal |
| |Decimal |
| | |
| |51 |
| | |
| |66 |
|The comments are necessary to avoid the style appearing if a |102 |
|browser does not understand the style tag. | |
| |99 |
|INLINE STYLE |153 |
| | |
| |CC |
| |204 |
| | |
| |FF (Full color value) |
| |255 |
| | |
| | |
| |No brightness of all colors = black (#000000) |
| |Equal midrange brightness = grey (#666666) |
| |Full brightness of all colors = white (#FFFFFF) |
| | |
| |The safest colors that are also named: |
| |Aqua (Cyan) |
| |#00FFFF |
| | |
| |Black |
| |#000000 |
| | |
| |Blue |
| |#0000FF |
| | |
| |Fuschia (Magenta) |
| |#FF00FF |
| | |
| |Lime |
| |#00FF00 |
| | |
| |White |
| |#FFFFFF |
| | |
| |Yellow |
| |#FFFF00 |
| | |
| | |
|FONT SELECTORS |COMMON CSS MEASUREMENT UNITS |
| | |
|A list is used to select fonts because the chosen font may not be|In |
|on the computer. The list starts at the left and moves to the |Inches |
|right until it finds a specific or general font style it can use.| |
| |Cm |
|Arial, Helvetica, sans-serif |Centimeters |
|Times New Roman, Times, serif | |
|Courier New, Courier, mono |Mm |
|Georgia, Times New Roman, Times, serif |Millimeters |
|Verdana, Arial, Helvetica, sans-serif | |
| |Pt |
|FONT FAMILIES |Points (72 per inch, used with fonts) |
| | |
|Serif |Px |
|Sans-serif |Pixels |
|Cursive | |
|Fantasy |% |
|Monospace |Percentage |
| | |
|COMMON PROPERTIES |Color Names |
| |Red, Blue, Aqua, etc. |
|Font-family | |
|See above under font selectors and font families |Hex Numbers |
| |#FF0000, #0000FF, #00FFFF |
| | |
|Font-size | |
|See measurement units |PSEUDO-CLASSES |
| | |
|Font-style |The most common pseudo-classes are used to make text roll-overs |
|Italic, normal |in Internet Explorer. |
| | |
|Font-weight |A:link |
|bold |A:visited |
| |A:active |
|Text-transform |A:hover |
|Capitalize, uppercase, lowercase | |
| |You then add the chosen properties and values |
|Text-decoration | |
|None, underline, line-through |A:link {text-decoration: none; color: #CCCCCC} |
| | |
|font |WHY “CASCADING”? |
|Use a font name | |
| |Cascading Style Sheets are called such because they have a |
|Line-height |cascading order of importance. |
|See measurement units | |
| |Generally speaking the closer the style information is to the |
|Text-align |actual information it affects the higher the precedence is. |
|Left, right, center | |
| |Except in some versions of Netscape, Inline style information |
|Text-indent |takes precedence over embedded style information which takes |
|See measurement units |place over linked information. |
| | |
|Background |Some versions of Netscape place linked style information at a |
|A color value, url to an image |higher priority than embedded information. |
| | |
|Background-image |FOR MORE INFORMATION |
|A url/image | |
| |Webmonkey has numerous Web programming tutorials written in a |
|Text-indent |clear, easy-to-follow manner: |
|See measurement units | |
| |reference/stylesheet_guide/ |
|Margin-right | |
|See measurement units | |
| | |
|Margin-left | |
|See measurement units | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
|Author: Kevin Harville | |
|Rev: 02/05/01 | |
| | |
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.