| More on Cascading Style Sheets |
Style Sheet Properties:
selector
|
{ property:
|
value(s) }
|
body
|
background
|
transparent |
color name | hex value
url(image1.gif)
|
background-attachment
|
fixed | scroll
|
font-family
|
generic (serif,
sans-serif, cursive, fantasy, monospaced)
specific (Arial,
Garamond, Looseprint, Comic Sans MT, etc.)
|
font-style
|
normal | italic |
oblique
|
font-size
|
#px (where
# corresponds to the point size you want)
medium | large | larger | x-large | xx-large
small | smaller | x-small | xx-small
|
margin
|
#px, #px, #px,
#px (top, right, bottom, left)
|
text-align
|
right | justify |
left
|
|
|
h1
h2
h3
h4
h5
h6
|
font-family
|
generic
(serif, sans-serif, cursive, fantasy, monospaced)
specific (Arial,
Garamond, Looseprint, Comic Sans MT, etc.)
|
font-size
|
#px
(where # corresponds to the point size you want)
medium | large | larger | x-large | xx-large
small | smaller | x-small | xx-small
|
color
|
color
name | hex code
|
background
|
color
name | hex code
|
a: link
a: active
a: visited
a: hover
|
font-family
|
|
font-size
|
|
color
|
|
font-weight
|
bold
|
text-decoration
|
none
|
background-color
|
|
blockquote
|
border-style
|
double
| dotted | dashed | solid | groove | ridge | inset | outset | none
|
padding
|
#px
|
table
td
tr
|
border
|
|
bordercolor
|
|
font-family
|
|
padding
|
|
background-color
|
|
|
Links With No Underlines:
- Remove the underline from all of the links on your page by
putting this in the HEAD of your document:
<head>
<style type="text/css">
a:link {text-decoration: none}
a:visited {text-decoration: none}
</style>
<head>
- Or, remove the underline form individual links by forming
them like this:
<a href="webpage.html" style="text-decoration:
none">click here</a>
|
10 CSS Tricks (these tricks work with Internet
Explorer 5+ and Netscape 6+)
- No underline with hyperlinks
- <head>
<style type="text/css">
a {
text-decoration: none }
</style>
</head>
- Link changes color when your mouse moves over it
- <head>
<style
type="text/css">
a:hover {
color: #FF00FF }
</style>
</head>
- Text looks like it is highlighted
- <span style="background-color:
yellow">this text will be highlighted in yellow</span>
- Links have lines above and below when your mouse moves over
it
- <head>
<style type="text/css">
a:hover {
text-decoration: overline underline }
</style>
</head>
- Text is highlighted when your mouse moves over it
- <head>
<style type="text/css">
a:hover {
color: orange;
background-color: black }
</style>
</head>
- Use images as bullets in unordered lists
- <ul style="list-style-image: url(imagename.gif)" >
- Add spacing between the letters in words
- <h1 style="letter-spacing:
20px" >
- Place borders around your images
- <img src="image.jpg" style="border: 5px bordertype color" >
- where border type can equal: dotted, dashed, solid,
double, groove, ridge, inset, or outset
- where color can equal any color name or color hex code
- Remove the horizontal and vertical scroll bars from browser
window
- <head>
<style type="text/css">
body {
overflow: hidden }
</style>
</head>
- Change your horizontal rule
- <hr noshade style="width: 350px; color: blue; height: 10px;
border: 3px inset" >
|
Changing the Scroll Bar Color:
- here is the code to change the scroll bar color (works
only in Internet Explorer)
<head>
<style type="text/css">
body
{ SCROLLBAR-FACE-COLOR: FF5400;
SCROLLBAR-HIGHLIGHT-COLOR:
FFDFCF;
SCROLLBAR-SHADOW-COLOR:
742600;
SCROLLBAR-3DLIGHT-COLOR:
003B74;
SCROLLBAR-ARROW-COLOR: FFE5D8;
SCROLLBAR-TRACK-COLOR: 003B74;
SCROLLBAR-DARKSHADOW-COLOR:
003B74 }
</style>
<head>
|
CSS Tricks and Tips Web Sites...
- Fun
CSS Tricks You Can Use
- CSS tips
& tricks
- CSS
Stylesheet web tutorials tricks, tips, and skills
|