| Description | Property | Values | Code |
| Setting background color | background-color | "color hexidecimal i.e. - #ffffff" "color name i.e. - blue" transparent |
<style type="text/css"> body {background-color: #0000ff} </style> |
| Setting a background image | background-image | url | <style type="text/css"> body{background-image:url("http://images.neopets.com/backgrounds/petpet7.gif")} </style> |
| Setting the background image to be fixed | background-attachment | fixed scroll |
<style type="text/css"> body {background-image: url("http://images.neopets.com/backgrounds/petpet7.gif"); background-attachment: fixed }</style> |
| Making the background image repeat or not repeat | background-repeat | repeat repeat-x repeat-y no-repeat |
<style type="text/css"> body {background-image: url("http://images.neopets.com/backgrounds/petpet7.gif"); background-repeat: no-repeat; } </style> |
| How to center your background image | background | center | <style type="text/css"> body {background: center fixed; background-image: url("http://images.neopets.com/backgrounds/petpet7.gif"); background-repeat: no-repeat;} </style> |
| Description | Code | Example |
| Change the color | <style type="text/css"> body {color: #6600ff;} </style> |
Sample Text |
| Change the font | <style type="text/css"> body {font-family: verdana} </style> |
Sample Text |
| Change the font size | <style type="text/css"> body {font-size: 13pt } </style> |
Sample Text |
| How to align text values are: center, left and right |
<style type="text/css"> body {text-align: center} </style> |
Sample Text |
| How to bold your text | <style type="text/css"> p {font-weight: bold}} </style> |
Sample Text |
| How to set italics to your text | <style type="text/css"> body {font-style: italic} </style> |
Sample Text |
| How to add text decoration values are: underline, overline, line-through, and none |
<style type="text/css"> body {text-decoration: underline} a {text-decoration: overline} p {text-decoration: line-through} div {text-decoration: none} </style> |
underline: Sampe Text overline: Sampe Text line-through: Sampe Text |
| How to set the space between text | <style type="text/css"> body {letter-spacing: 15px} </style> |
Sample Text |
| How to add a border to your text | <style type="text/css"> p {border-style: solid} p {border-style: double} p {border-style: dashed} p {border-style: dotted} p {border-style: groove} p {border-style: ridge} p {border-style: inset} p {border-style: outset} </style> |
solid: Sample Text double: Sample Text dashed: Sample Text dotted: Sample Text groove: Sample Text ridge: Sample Text inset: Sample Text outset: Sample Text |
| How to change the size of your text border | <style type="text/css"> p {border-style: solid; border-width: 1px} </style> |
Sample Text |
| How to add color to your bordered text | <style type="text/css"> p { border-style: solid; border-color: #cc99ff } </style> |
Sample Text |
| Description | Code | How to set the color of your links | <style type="text/css"> a:link {color: salmon} </style> |
| How to set the color of a visted link | <style type="text/css"> a:visited {color:#cc33cc} </style> |
| How to set the color of an active link. A link is active when you click on it. | <style type="text/css"> a:active {color:white} </style> |
| How to change the color of a link when you place your mouse over it. | <style type="text/css"> a:hover{background:gold} </style> |
| Description | Code | Example |
| How to add a border to your input and text area fields. | <style type="text/css"> textarea {border:1px dashed #000066} input {border:1px dashed #000066} </style> |
|
| How to set the color and font of the text inside your input and textarea fields. | <style type="text/css"> textarea {color: purple; font:13px 'Comic Sans MS'} input {color: purple; font:13px 'Comic Sans MS'} </style> |
|
| How to add a background image to your input and textarea fields. | <style type="text/css"> textarea {background: url(enter your url here)} input {background: url(enter your url here)} </style> |
|
| How to change the opacity of the background in the input and textarea fields. Your value for opacity should be a number between 0-100 percent. Note: Your border, scrollbar, and text with also be affected. | <style type="text/css"> textarea {background: url(http://www.pepmint.com/images/bg_paperclips.jpg); filter: alpha(opacity=50)} input {background: url(http://www.pepmint.com/images/bg_paperclips.jpg); filter: alpha(opacity=50)} </style> |