Scribd
Upload
59 views

Cascading Style Sheets, Level 1 Cascading Style Sheets, Level 1 Quick Reference Guide Quick Reference Guide

The document provides a quick reference guide for Cascading Style Sheets level 1. It describes how to implement styles using <LINK>, <STYLE>, or @import and explains how to assign styles to different HTML tags. It also covers defining classes and IDs, inheritance of styles, and includes a sample CSS stylesheet with comments.

Uploaded by

Himakar Reddy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Cascading Style Sheets, Level 1 Cascading Style Sheets, Level 1 Quick Reference Guide Quick Reference Guide

The document provides a quick reference guide for Cascading Style Sheets level 1. It describes how to implement styles using <LINK>, <STYLE>, or @import and explains how to assign styles to different HTML tags. It also covers defining classes and IDs, inheritance of styles, and includes a sample CSS stylesheet with comments.

Uploaded by

Himakar Reddy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Cascading Style Sheets, level 1 Quick Reference Guide

W3C Recommendation 17 Dec 1996 W3C document is at: http://www.w3.org/pub/WWW/TR/REC-CSS1 Authors: Hkon Wium Lie (howcome@w3.org) Bert Bos (bert@w3.org)

Implementing the Style:


<HTML> <HEAD> (1) (2) (3) <LINK REL=STYLESHEET TYPE=text/css HREF=<url>> <STYLE TYPE=text/css> @import url(http://style.com/basic); H1 { color: blue } </STYLE>

</HEAD> <BODY> (4) <P STYLE="color: green">This paragraph will be green.</P>

</BODY> </HTML>

Shortcuts:
Assigning Multiple Formats to different tags: H1, H2, H3 { font-family: helvetica } H1 { font: bold 12pt/14pt helvetica } the above tag is equivalent to H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; }

Classes and IDs:


Defining classes: <STYLE TYPE="text/css"> H1.greenish { color: #00FF00 } .yellowish { color: #CCCC00 } #item1 { color: #FF0000 }

/* H1 specific class */ /* general class */ /* one use item ID */

</STYLE> </HEAD> <BODY> <H1 CLASS=greenish>This header will be green</H1> <H2 CLASS=yellowy>Yellow Text</H2> <H3 CLASS=greenish>Regular Text (NOT Green)</H3> <P CLASS=yellowy>This whole paragraph would be yellow</P> <SPAN ID=item1>this font will be red only use ID once per document</SPAN </BODY> </HTML>

Inheritance:
You can pass on attributes to other tags. An example makes thing fairly clear. UL LI { font-size: small }

For the above, all LI tags within a UL tag will have a small font size. If you have a LI tag that is not in a UL reference then it will be normal size. You can also use the CLASS and ID specifications. Examples: DIV P { font: small sans-serif } .reddish H1 { color: red } #x78y CODE { background: blue } DIV.sidenote H1 { font-size: large }

Comments:
The comment format is: /* commentted out */

Comments cannot be nested. For a CSS1 parser, a comment is equivalent to whitespace.

CSS1 properties
Formats:
<url> format: url(http://www.url.com/filename) <color> format: (1) rgb format: rgb(n, n, n) where n is a integer from 0-255 (2) hex format: #xxxxxx where x is from 0-F (ex: #FFFFFF is white ) (3) color name (blue, red, green, white, black, yellow, etc...) The first option listed in the specifications below is usually the initial or default value. pseudo elements: A:link { color: blue } /* unvisited link */ A:visited { color: violet } /* visited links */ A:active { color: grey } /* active links */ examples: A:link IMG { border: solid blue } A.external:link { color: grey } /* draw a blue border around all linked images */ /* specify a specific color for external links */

font properties 'font-family' [ serif, sans-serif, cursive, fantasy, monospace, Times, Courier, etc... ] 'font-style' [ normal | italic | oblique ]

'font-variant' [ normal | small-caps ] 'font-weight' [ normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900 ]
note: normal = 400, bold = 700

'font-size

[ point size: 8pt, 10pt, 12pt, .... relative size: xx-small | x-small | small | medium | large | x-large | xx-large percentage: 50%, 75%, 100%, 125%, etc... or em: .5em, .75em, 1.0em, 1.25em, etc... (same as percentage) you can also specify pixel size ex. 100px but it is not recommended ]

'font' (shorthand) [ <font-style> | <font-variant> | <font-weight> | <font-size> [ / <line-height> ] <font-family> ] examples: P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy }

Color and background properties 'color' [ color name | <rgb>) | hex# ]

'background-color' [ color name | <rgb> | hex# | transparent] 'background-image' 'background-repeat' [ <url> | none ] [ repeat | repeat-x | repeat-y | no-repeat ]

'background-attachment' [ scroll | fixed ] 'background-position' [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right] 'background' (shorthand) [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]

examples: BODY { background: url(banner.jpeg) 50% 0% } BODY { background-image: url(banner.jpeg); background-position: top center; } the above two are equivalent, as are the following two BODY { background: url(banner.jpeg) top left } BODY { background: url(banner.jpeg) 0% 0% } another ex: P { background: url(chess.png) gray 50% repeat fixed }

Text properties 'word-spacing' 'letter-spacing' 'text-decoration' 'vertical-align' 'text-transform' 'text-align' 'text-indent' 'line-height' [ normal | <length> ] [ normal | <length> ] [ none | [ underline || overline || line-through || blink ] [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | [ none | capitalize | uppercase | lowercase ] [ left | right | center | justify ] [ <length> | <percentage> ] [ normal | <number> | <length> | <percentage> ] Negative values are not allowed.

Box properties 'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 'margin'


(shorthand)

[ <length> | <percentage> | auto ] [ <length> | <percentage> | auto ] [ <length> | <percentage> | auto ] [ <length> | <percentage> | auto ] BODY{ margin: 2em } BODY { margin: 1em 2em } [ <length> | <percentage> ] [ <length> | <percentage> ] [ <length> | <percentage> ] [ <length> | <percentage> ] /* all margins set to 2em */ /* top & bottom = 1em, right & left = 2em */

'padding-top' 'padding-right' 'padding-bottom' 'padding-left' 'padding'


(shorthand)

'border-top-width' [ medium | thin | thick | <length> ] 'border-right-width' [ medium | thin | thick | <length> ] 'border-bottom-width' [ medium | thin | thick | <length> ] 'border-left-width' [ medium | thin | thick | <length> ] 'border-width'
(shorthand)

'border-color' 'border-style' 'border-top'


(shorthand)

[ <color> ] [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ] [ <border-top-width> || <border-style> || <color> ] [ <border-right-width> || <border-style> || <color> ] [ <border-width> || <border-style> || <color> ]

'border-right'
(shorthand)

'border'
(shorthand)

'width' 'height' 'float' 'clear'

[ auto | <length> | <percentage> ] [ auto | <length> | <percentage> ] [ none | left | right ] [ none | left | right | both ]

Classification properties 'display' [ block | inline | list-item | none ]

'white-space'[ normal | pre | nowrap ]

'list-style-type'

[ disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ] [ <url> | none ]

'list-style-image'

'list-style-position' [ outside | inside ] 'list-style' [ <keyword> || <position> || <url> ] (shorthand)

Units em ex px pt in cm mm pc the height of the element's font x-height, ~ the height of the letter 'x' pixels, relative to canvas font point size inches centimeters millimeters picas

Sample style sheet


<STYLE TYPE=text/css> BODY { margin: 1em; font-family: TimesRoman, Times, serif; background: white; /* white background */ color: black; /* black text */ A:link { color: blue } A:visited { color: violet } A:active { color: red } A.external:link { color: grey } LI { font: 12pt/16pt } /* more leading for list items */ /* unvisited link */ /* visited links */ /* active links */ /* external links */

H1 { font: bold 18pt Verdana, Palatino, sans-serif; color: #546081; text-align: center; } HR { border-top: dotted medium; width: 500px; } .indent .noshow { margin-left: 0.5in } { display: none }

/* format, color and center H1 */

/* dotted 500 pixel medium thickness */

/* indent, use with P to indent paragraphs */ /* wont show on CSS browsers this will show in non-CSS browsers */ /* use in a span tag for first char of a title it will have a colored box around it with white text inside */

.efx1 { color: white; background: #993333; font-size: 36pt; } .efx2 { color: #993333; font-size: 26pt; }

/* use in rest of title, color text like box */

</STYLE>

You might also like