|
|
| HOME | AUTO | FUN | GADGETS | MOTORCYCLE | PERSONAL | RACING | SEARCH | TECH | TOOLS | TRAVEL | LINKS |
| HARDWARE | CISCO | LINUX | MICROSOFT | C++ | HTML | JAVASCRIPT | PERL | SHELL SCRIPTING | SQL | NOTES |
Embedding a Style Sheet
A style sheet may be embedded in the HEAD of document with the STYLE element:
|
<style type="text/css"> <!-- A:link { text-decoration: none; color: #0066FF; } A:active { text-decoration: none; color: #000000; } A:visited { text-decoration: none; color: #0033FF; } A:hover { text-decoration: none; color: #FF3333; } body { background: url(foo.gif) red; color: black } --> </style> |
...Or, inline as in the example below:
| <H1 style="color: blue; font-style:italic">This is blue<H1> |
Linking to an External Style Sheet
An external style sheet may be linked to an HTML document through HTML's LINK element:
| <link rel="stylesheet" href="stylesheet.css" type="text/css"> |
Or style sheet may be imported with CSS's @import statement inside the STYLE element:
|
<style type="text/css"> <!-- @import url(/stylesheet.css); --> |
The STYLE element also supports an optional MEDIA attribute which specifies the medium or media that the style sheet should be applied to. For example, to use a different stylesheet for printing use:
| <link rel="stylesheet" type="text/css" href="print.css" media="print" /> |
The MEDIA element supports the following values (may be comma separated):
|
Style Classes
|
<style type="text/css"> <!-- p.abstract { font-style: italic; left-margin: 0.5cm; } h1, p.centered { text-align: center; margin: 0 0.5cm 0 0.5cm; } p:first-line { font-style: small-caps } p:first-letter { font-size: 200%; float: left } .italic { font-style: italic } #yellow { color: yellow } h1#blue { color: blue } --> </style>
<p class="abstract">This is an abstract paragraph with indented margins</p> |
Note the nested style used with p.centered
CSS Properties table
Text Properties
| Property | What it Does | Possible Values |
| letter-spacing | Controls the amount of space between each letter in a section of text. | normal (default) number of pixels |
| line-height | Controls the amount of vertical space between lines of text | normal (default)number of pixelspercentage |
| text-align | Controls the alignment for a section of text | browser decides (default) left right center |
| text-decoration | Controls what the text looks like | none (default) underline overline line-through blink |
| text-indent | Controls the indentation of the first line in a section of text | 0 (default) number of pixels percentage |
| text-transform | Changes the case of a section of text | none (default) uppercase lowercase capitalize |
| vertical-align | Controls the vertical alignment of a section of text | baseline (default) sub super top text-top middle bottom text-bottom |
| word-spacing | Controls the amount of space between words (doesn't work as of yet) | normal (default) number of pixels |
Font Properties
| Property | What it Does | Possible Values |
| font-style | Controls the style of the font | normal (default) italic oblique |
| font-variant | Controls the variant of the font | normal (default) small-caps |
| font-weight | Controls the boldness of the font | normal (default) lighter bold bolder 100 200 300 400 500 600 700 800 900 |
| font-size | Controls the size of the font | small, x-small, xx-small medium (default) large, x-large, xx-large smaller larger number of pixels percentage |
| font-family | Controls the type of font shown on the page | browser decides (default) font family name |
font: font-style font-variant font-weight font-size/line-height font-family;
Color/Background Properties
| Property | What it Does | Possible Values |
| color | Controls the color of the text | browser decides (default) color name |
| background-color | Controls the color of the background | transparent (default) color name |
| background-image | Allows you to set a background image | none (default) image url |
| background-repeat | Allows different patterns of background repetition | repeat (default) repeat-x repeat-y no-repeat |
| background-attachment | Controls the scrolling of the background | scroll (default) fixed |
| background-position | Controls the position of the background on the page | 0% 0% (default) postion in pixels ie {20,20} percentage ie {5%,7%} top bottom left right center |
Background properties in shorthand order. See also W3schools: CSS Background
Box Properties
| Property | What it Does | Possible Values |
| width | Controls the width of a section | auto (default) number of pixels percentage |
| height | Controls the height of a section | auto (default) number of pixels percentage |
| border-color | Controls the border color of a section | default text color (default) color name |
| border-style | Controls the style of a border | none (default) solid double groove ridge inset outset dotted dashed |
| border-width | Controls the width of a border | undefined (default) number of pixels thin medium thick |
| border-top-width | Controls the width of a border side | medium (default) number of pixels thin thick |
| border-right-width | Controls the width of a border side | medium (default) number of pixels thin thick |
| border-bottom-width | Controls the width of a border side | medium (default) number of pixels thin thick |
| border-left-width | Controls the width of a border side | medium (default) number of pixels thin thick |
| margin-top | Controls the width of a margin from the specified side | 0 (default) number of pixels percentage |
| margin-right | Controls the width of a margin from the specified side | 0 (default) number of pixels percentage |
| margin-bottom | Controls the width of a margin from the specified side | 0 (default) number of pixels percentage |
| margin-left | Controls the width of a margin from the specified side | 0 (default) number of pixels percentage |
| padding-top | Controls the amount of padding from the specified side | 0 (default) number of pixels percentage |
| padding-right | Controls the amount of padding from the specified side | 0 (default) number of pixels percentage |
| padding-bottom | Controls the amount of padding from the specified side | 0 (default) number of pixels percentage |
| padding-left | Controls the amount of padding from the specified side | 0 (default) number of pixels percentage |
| float | Controls the floating of a section | none (default) left right |
| clear | Defines whether a section disallows other sections on its sides | none (default) left right |
Classification Properties
| Property | What it Does | Possible Values |
| white-space | Controls the white space formatting of a section | normal (default) pre nowrap |
| display | Controls the display of a section | block (default) inline list-item none |
| visiblity | Controls the visibility of an element | inherit (default) visible hidden |
| z-index | Controls the layering of an element | auto (default) number |
Helpfull Links
CSS Projects from School
http://www.htmlhelp.com/reference/css/style-html.html
http://www.pageresource.com/dhtml/cssprops.htm