Styles Sheets
Contents
Referencing
Style Sheet
| Linking to External Sheet |
<link rel=STYLESHEET type="text/css" href=url> |
| Importing |
@import url(url); |
| Embedded |
<head>
<style type="text/css">
H1 {color:red};
H2 {color: blue};
</style> |
| Inline |
<p style="font-family:helvetica">The text</p> |
|
Note: style sheets use C style comments. Lines like "<!-- hide from older browsers" and "// -->" can't be used.
back to top
Grouping
Styles
H1, H2, H3 {font-family:helvetica,arial,san-sarif}
H1 {
background-color: blue;
font-style: italic
}
back to top
Referencing
Styles
| Example |
Resulting page |
<html>
<style type="text/css">
P.marked {color: red}
SPAN.highlight {color: blue}
#001 {text-transform: uppercase}
</style>
<head>
<p class=marked>Red doesn't work in IE 5.5 or Netscape
4.73. <span class=highlight>Blue text works in both IE 5.5 and
Netscape 4.73.</span></p>
<p id=001>Upper case text works in IE 5.5 but not Netscape
4.73.</p> |
Red doesn't work in IE 5.5 or Netscape 4.73. Blue
text works in both IE 5.5 and Netscape 4.73.
Upper case text works in IE 5.5 but not Netscape 4.73
|
|
back to top
Backgrounds
| Attribute |
Format |
Notes & Examples |
| image |
selector {background-image: url(some_url.gif)}
selector {background-image: none} |
BODY {background-image: url(paper.gif)}
P {background-image: none} |
| repeat |
selector {background-repeat: repeat-x}
selector {background-repeat: repeat-y}
selector {background-repeat: no-repeat} |
|
| position |
selector {background-position: key1 key2} |
Valid key1 values are: top, middle, bottom & #%
Valid key2 values are: left, center. right & #% |
| attachment |
selector {background-attachement: fixed} |
Fixes the background in place instead of letting it scroll with the
page. |
| combined |
body {background: url(some_url) 50% 50% no-repeatfixedwhite} |
|
|
back to top
Boxes
Each element is contained in a box. Changing the box for images is
useful, but usually not for text.
Borders
They are specified in the order top, right, bottom & left. Following
is the list of attributes:
| dashed |
|
Dashed lines |
| dotted |
|
Lines made of dots |
| double |
|
Double line with space between the lines |
| groove |
|
A 3D etched groove |
| inset |
|
A 3D effect looking like it's pressed into the page |
| none |
|
No border (default) |
| outset |
|
A 3D effect looking like it's coming out of the page |
| ridge |
|
Like groove except it sticks out of the page instead of into the page |
| solid |
|
An unbroken line |
IMG { border-width: 10px thin medium thick }
IMG { border-left-width: 10px thin medium thick }
IMG { border-style: solid ridge }
IMG { border-color: blue>
IMG { border-top: thick blue ridge }
IMG { border: thin dotted green }
back to top
Floating
& Clearing
Each box can float inside of its parent box. The clear parameter
stops the floating around the element.
| Parameter |
|
|
Values |
|
|
Example |
| float |
|
|
left, right, none |
|
|
IMG { float: left } |
| clear |
|
|
left, right, both |
|
|
H1 {clear: both } |
back to top
Height
& Width
Sets the size of the box. The default size is "auto"; the
size the box needs to be.
IMG {
width: 200px;
height: 100px;
}
back to top
Margins
Setting all margins to the same value
IMG { margin: 0.5in }
Setting each margin individually. They are specified in the order
top, right, bottom & left.
IMG { margin: 1.5% 0.25in 1% 0.8cm }
back to top
Padding
Behaves the same as Margins.
back to top
Fonts
font-family
A list of fonts can be given. The browser will use the first font
it has.
H1 {font-family: Arial, Helvetica, sans-serif}
BODY {font-family: Times, "Times New Roman", sari}
| Family |
Example Font |
| serif |
Times, Times New Roman |
| sans-serif |
Helvetica, Arial |
| monospace |
Courier |
| cursive |
Zapf-Chauncery |
| fantasy |
Western |
back to top
font-size
Absolute
xx-small <= x-small <= small <= medium <= large <= x-large
<= xx-large
P {font-size: medium}
Relative
The valid values are larger and smaller.
| Note: |
Scale factor used by Netscape 4 for larger & smaller |
1.5 |
|
Scale factor used by IE 5 for larger & smaller |
1.35 |
Percentage
H1 {font-size: 150%}
Length
Valid units are pt, px, em & ex. For em & ex the values are
calculated based on the size of the parent element
H1 {font-size: 12pt}
back to top
font-style
| Style |
Effect |
| Normal |
Displays normal style |
| Oblique |
Displays oblique style |
| Italic |
Displays italic style if available otherwise displays oblique |
back to top
font-variant
H1 {font-variant: small-caps }
back to top
font-weight
The font weight can range from 100 to 900. Normal is 400. Bold
is 700.
Keywords : lighter, bolder, normal and bold.
back to top
letter-spacing
The amount of space between letters. The spec allows the browser
to render any letter spacing as normal.
P {letter-spacing: 1pt}
back to top
text-align
Align is left, right or justify. Unfortunately, the spec says justify
can be treated like left or right depending on which way the language goes.
Both Netscape 4 & IE 5 treat it like left.
back to top
text-decoration
Valid values are underline, overline, line-though & blink. The
spec says that browsers can ignore blink.
back to top
text-indent
Valid units are pt, px, em & ex.
back to top
text-transform
The valid values are uppercase, lowercase & capitalize.
back to top
vertical-align
| Alignment |
Affect |
| baseline |
Aligns the baseline to the baseline of the parent element |
| bottom |
Aligns the bottom to the lowest element on the line. |
| middle |
Aligns the middle to the middle of the parent element. |
| sub |
Subscript |
| super |
Superscript |
| text-bottom |
Aligns the top with the parent's bottom |
| text-top |
Aligns the top with the parent's top |
| top |
Aligns the top with the top of the tallest element on the line. |
back to top
word-spacing
The amount of space between words. This isn't supported by Netscape
4 or IE 5.
P {word-spacing: 2em}
back to top
Last Updated: $Date: 2004/05/22 16:41:18 $ GMT ($Revision: 1.9 $)