CSS Tutorial

Open Tag

Your CSS Code must begin with this tag:

<style type="text/css">

Selectors

Selectors refer to a HTML element such as a hyperlink or table. Put the selector name followed by an opening squiggly bracket and then a closing squiggly bracket after the opening style tag.

a {  }
All hyperlinks.
a:link {  }
Regular hyperlinks.
a:visited {  }
Visited hyperlinks.
a:active {  }
Active hyperlinks.
a:hover {  }
Cursor over hyperlinks.
table {  }
Text in a table.
ul {  }
Text in a bulleted list.
ol {  }
Text in a numbered list.
p {  }
Text in a paragraph.
body {  }
Entire page.
img {  }
Images.
hr {  }
Horizontal lines.
form {  }
All form elements (lists, boxes, buttons, text areas).
select {  }
Drop down lists.
input {  }
Input boxes and buttons.
textarea {  }
Text areas.
div {  }
Div layers.
blockquote {  }
Blockquotes.
code {  }
Code.
h1 {  }
Heading (also h2, h2, h4, h5, and h6).
#nst {  }
Neopets: Clock.
center font b {  }
Neopets: User Lookup: Username.
.tl {  }
Neopets: Clock, Search, Sidebar Ad, Language, Link To Us
.tt {  }
Neopets: Welcome: Username, Pet, NP.
.sf {  }
Neopets: Show All, Neofriend/Neomail, Copyright, Trades/etc.
object {  }
Neopets: Sidebar Ad.
.hdr {  }
Neopets: Top Banner.
#ban {  }
Neopets: Top Ad.

IDs and Classes

If you would prefer to only change one specific instance of a HTML element, you would give it an ID.

<p id="redbox">This is the only red box.</p>

To refer to this element, you would use a pound sign ( # ) followed by the id name in the CSS code.

#redbox {  }

If you would prefer to change more than one HTML element, you would give it a class.

<p class="bluebox">This is the first blue box.</p>
<p id="redbox">This is the only red box.</p>
<p class="bluebox">This is the second blue box.</p>

You can also give different HTML elements the same class.

<div class="bluebox">This div is blue.</div>
<p class="bluebox">This paragraph is also blue.</p>

To refer to these elements, you would use a period (.) followed by the class name in the CSS code.

.bluebox {  }

Properties

Add this one of these lines inside the squiggly brackets. There is no limit on how many you can add.

text-decoration: none;
Normal text.
text-decoration: underline;
Text with an underline.
text-decoration: overline;
Text with an overline.
text-decoration: line-through;
Text with a strike through.
font-weight: normal;
Normal text.
font-weight: bold;
Bold text.
font-style: normal;
Normal text.
font-style: italic;
Italic text.
color: #FF0000;
Text colour.
font-size: 8px;
Text size.
font-family: 'Comic Sans MS';
Font.
text-transform: lowercase;
Lowercase text.
text-transform: uppercase;
Uppercase text.
text-transform: capitalize;
Capitalized text.
border-style: solid;
Solid border.
border-style: dotted;
Dotted border.
border-style: dashed;
Dashed border.
border-style: double;
Double border.
border-style: groove;
Groove border.
border-style: inset;
Inset border.
border-style: outset;
Outset border.
border-style: ridge;
Ridged border.
border-width: 1px;
Border thickness.
border-color: #00FF00;
Border color.
text-align: left;
Left-aligned text.
text-align: center;
Centered text.
text-align: center;
Right-aligned text.
text-align: center;
Justified text.
letter-spacing: 3px;
Letter spacing.
line-height: 6px;
Line height.
Line height.
list-style-type: none;
  • No bullet.
list-style-type: disc;
  • Disc bullet.
list-style-type: circle;
  • Circle bullet.
list-style-type: square;
  • Square bullet.
background-color: #0000FF;
Background colour.
background-image: url('URLHERE');
Background image.
background-attachment: fixed;
Background attachment.
background-attachment: scroll;
Background attachment.
background-position: center;
Background position.
background-position: center top;
Background position.
background-position: center bottom;
Background position.
background-position: left center;
Background position.
background-position: left top;
Background position.
background-position: left bottom;
Background position.
background-position: right center;
Background position.
background-position: right top;
Background position.
background-position: right bottom;
Background position.
background-repeat: repeat;
Repeating background.
background-repeat: no-repeat;
Non-repeating background.
background-repeat: repeat-x;
Horizontally-repeating background.
background-repeat: repeat-y;
Vertically-repeating background.
visibility: visible;
Visible.
visibility: hidden;
Hidden.
display: inline;
Inline.
display: block;
Block.
display: none;
None.
padding: 2px;
Padding.
margin: 2px;
Margin.
position: absolute;
Position from broswer window.
position: relative;
Position from inside element.
bottom: 0px;
Position from bottom.
top: 0px;
Position from top.
left: 0px;
Position from left.
right: 0px;
Position from right.
height: 20px;
Height.
width: 20px;
Width.
cursor: pointer;
Cursor.
cursor: crosshair;
Cursor.
cursor: n-resize;
Cursor.
cursor: e-resize;
Cursor.
cursor: move;
Cursor.
cursor: text;
Cursor.
cursor: wait;
Cursor.
cursor: help;
Cursor.
cursor: progress;
Cursor.
cursor: not-allowed;
Cursor.
cursor: no-drop;
Cursor.
cursor: vertical-text;
Cursor.
cursor: all-scroll;
Cursor.
cursor: col-resize;
Cursor.
cursor: row-resize;
Cursor.
filter: alpha(opacity=100, finishopacity=0, style=1);
IE Only: Fade.
filter: blur(strength=5);
IE Only: Blur.
filter: dropshadow(color=#FF00FF, offx=1, offy=1);
IE Only: Drop Shadow.
filter: glow(color=#00FF00, strength=3);
IE Only: Glow.
scrollbar-base-color: #FF0000;
IE Only: Scroll Bar colour.

Close Tag

Add this line to tell the computer you are finishing specifying CSS.

</style>

Simplify

Once you've put together several codes, you may find your page looks a little messy. For example, if your codes look like this:

<style type="text/css">
a:link { font-weight: bold; color: #FF0000; }
</style>
<style type="text/css">
a:visited { color: #0000FF; }
</style>
<style type="text/css">
a:active { color: #00FF00; }
</style>

It is very easy to get rid of four lines. Get rid of all the <style> tags except for one at the beginning and one at the end. Allow me to demonstrate:

<style type="text/css">
a:link { font-weight: bold; color: #FF0000; }
a:visited { color: #0000FF; }
a:active { color: #00FF00; }
</style>

If you have more than one element with the same specifications, like this:

<style type="text/css">
form { background-color: #FFFF00; }
hr { background-color: #FFFF00; }
</style>

You can put the names of the elements together, but they must be separated by a comma, like this:

<style type="text/css">
form, hr { background-color: #FFFF00; }
</style>

If you have colours specified in your CSS that follow the patter #AABBCC, where the first two letters are the same, the second two are the same, and the last two are the same, you can shorten it to #ABC. The above code would change to this:

<style type="text/css">
form, hr { background-color: #FF0; }
</style>