what follows are the properties (and values) that i use the most often. for a complete list, consult a css reference book. my favorite, by far, is cascading style sheets 2.0 programmer's reference by eric meyer.
text:
font-weight: normal;
/* text with normal weight */
font-weight: bold;
/* bolded text */
/* text with normal weight */
font-weight: bold;
/* bolded text */
font-style: normal;
/* plain text */
font-style: italic;
/* italicized text */
/* plain text */
font-style: italic;
/* italicized text */
text-decoration: none;
/* most commonly used for links, to get rid of the underline */
text-decoration: underline;
/* underlined text */
text-decoration: overline;
/* overlined text */
/* most commonly used for links, to get rid of the underline */
text-decoration: underline;
/* underlined text */
text-decoration: overline;
/* overlined text */
color: #0000FF;
/* blue text, using hex color value */
color: blue;
/* blue text, using literal value */
note that the property is simply color, and NOT font-color./* blue text, using hex color value */
color: blue;
/* blue text, using literal value */
font-size: 12px;
font-size: 10pt;
font-size: medium;
font-size: 10pt;
font-size: medium;
text-transform: uppercase;
/* makes all the characters uppercase. there is also a value of lowercase, which makes all the characters lowercase. */
/* makes all the characters uppercase. there is also a value of lowercase, which makes all the characters lowercase. */
font-variant: small-caps;
/* displays all characters in their uppercase form, with lowercase characters being displayed at a smaller height than uppercase characters. */
/* displays all characters in their uppercase form, with lowercase characters being displayed at a smaller height than uppercase characters. */
letter-spacing: 2px;
/* specifies the amount of space between characters */
/* specifies the amount of space between characters */
borders:
border-width: 1px 2px 1px 2px;
/* 1-pixel border on the top, 2-pixel border on the right, 1-pixel border on the bottom, 2-pixel border on the bottom */
border-width: 1px;
/* 1-pixel border all around */
/* 1-pixel border on the top, 2-pixel border on the right, 1-pixel border on the bottom, 2-pixel border on the bottom */
border-width: 1px;
/* 1-pixel border all around */
border-style: solid dotted solid dotted;
/* solid border on the top, dotted border on the right, solid border on the bottom, dotted border on the bottom */
border-style: solid;
/* solid border all around */
/* solid border on the top, dotted border on the right, solid border on the bottom, dotted border on the bottom */
border-style: solid;
/* solid border all around */
border-color: #000000 #0000FF #000000 #0000FF;
/* black border on the top, blue border on the right, black border on the bottom, blue border on the bottom */
border-color: #000000;
/* black border all around */
/* when specifying a color, remember you can use either hex RGB values or literals. you could also use decimal values rgb(0,0,255) but WHY?? */
/* black border on the top, blue border on the right, black border on the bottom, blue border on the bottom */
border-color: #000000;
/* black border all around */
/* when specifying a color, remember you can use either hex RGB values or literals. you could also use decimal values rgb(0,0,255) but WHY?? */
shortcut version:
border: 1px solid #000000;
/* a 1-pixel, solid black border all around */
/* properties must be defined in this order (i.e, width style color). */
/* similarly, there are also... */
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
/* a 1-pixel, solid black border all around */
/* properties must be defined in this order (i.e, width style color). */
/* similarly, there are also... */
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
margin and padding:
margin (space outside of the border) and padding (space inside the border) work similarly to border... they each can be used plainly (which applies the values to all four sides), or could be used in their -top, -right, -left, and -bottom forms.
margin: 2px;
/* 2-pixel margin all around */
margin: 1px 2px 1px 2px;
/* 1-pixel margin on the top, 2-pixel margin on the right, 1-pixel margin on the bottom, 2-pixel margin on the bottom */
margin-left: 2px;
/* 2-pixel margin on the left */
/* 2-pixel margin all around */
margin: 1px 2px 1px 2px;
/* 1-pixel margin on the top, 2-pixel margin on the right, 1-pixel margin on the bottom, 2-pixel margin on the bottom */
margin-left: 2px;
/* 2-pixel margin on the left */
padding: 2px;
/* 2-pixel padding all around */
padding: 1px 2px 1px 2px;
/* 1-pixel padding on the top, 2-pixel padding on the right, 1-pixel padding on the bottom, 2-pixel padding on the bottom */
padding-left: 2px;
/* 2-pixel padding on the left */
/* 2-pixel padding all around */
padding: 1px 2px 1px 2px;
/* 1-pixel padding on the top, 2-pixel padding on the right, 1-pixel padding on the bottom, 2-pixel padding on the bottom */
padding-left: 2px;
/* 2-pixel padding on the left */
alignment:
text is aligned to the left by default.
text-align: center;
/* centers the text */
text-align: right;
/* aligns the text along the right edge */
text-align: justify;
/* aligns the text along both the left and right edges. the amount of space between words are adjusted to accomplish this. */
/* centers the text */
text-align: right;
/* aligns the text along the right edge */
text-align: justify;
/* aligns the text along both the left and right edges. the amount of space between words are adjusted to accomplish this. */
backgrounds:
this property is most commonly used with body and td, as well as links and divs (both of which i'll explain later).
background-color: #CCCCCC;
/* sets the background color to grey. */
background-image: url(watermark.gif);
background-repeat: no-repeat;
/* sets watermark.gif as the background image, and specifies that it not repeat. */
background-image: url(bluetile.gif);
background-repeat: repeat;
/* sets bluetile.gif as the background image, and specifies that it repeat both horizontally and vertically. */
background-image: url(leftborder.gif);
background-repeat: repeat-y;
/* sets leftborder.gif as the background image, and specifies that it repeat vertically only. as you might have guessed, repeat-x will cause the background to repeat horizontally only. */
/* sets the background color to grey. */
background-image: url(watermark.gif);
background-repeat: no-repeat;
/* sets watermark.gif as the background image, and specifies that it not repeat. */
background-image: url(bluetile.gif);
background-repeat: repeat;
/* sets bluetile.gif as the background image, and specifies that it repeat both horizontally and vertically. */
background-image: url(leftborder.gif);
background-repeat: repeat-y;
/* sets leftborder.gif as the background image, and specifies that it repeat vertically only. as you might have guessed, repeat-x will cause the background to repeat horizontally only. */
links:
links are interesting. they have pseudo-classes...
/* unvisited link */
a:link {
text-decoration: none;
font-weight: bold;
color: #536895;
}
/* visited link */
a:visited {
text-decoration: none;
font-weight: bold;
color: #536895;
}
/* active link */
a:active {
text-decoration: none;
font-weight: bold;
color: #536895;
}
/* link with mouse pointer over it */
a:hover {
text-decoration: underline;
font-weight: bold;
color: #536895;
}
a:link {
text-decoration: none;
font-weight: bold;
color: #536895;
}
/* visited link */
a:visited {
text-decoration: none;
font-weight: bold;
color: #536895;
}
/* active link */
a:active {
text-decoration: none;
font-weight: bold;
color: #536895;
}
/* link with mouse pointer over it */
a:hover {
text-decoration: underline;
font-weight: bold;
color: #536895;
}
suppose you need to have more than one type of link (e.g., the links in a navigation bar look different than the links in the main body of the page) and you need to create classes for your links...
a.nav:link {
text-decoration: none;
font-weight: bold;
color: #536895;
}
/* and so on... */
a.main:link {
text-decoration: underline;
font-weight: bold;
color: #0000FF;
}
/* and so on... */
text-decoration: none;
font-weight: bold;
color: #536895;
}
/* and so on... */
a.main:link {
text-decoration: underline;
font-weight: bold;
color: #0000FF;
}
/* and so on... */
how to position elements:
i go by the philosophy that tables should be used only when presenting tabular data. i create sections within a page by defining "containers" using css.
#navigation {
position: absolute;
left: 5px;
top: 100px;
width: 150px;
background-color: #526994;
}
#content {
position: absolute;
left: 160px;
top: 100px;
width: 400px;
}
/* what this does is create two "containers"... one called "navigation" (which has a blue background, and is 150 pixels wide and is positioned 5 pixels over and 100 pixels down from the top left corner of the browser window) and another called "content" (which is 400 pixels wide and is positioned 160 pixels over and 100 pixels down from the top left corner of the browser window). */
position: absolute;
left: 5px;
top: 100px;
width: 150px;
background-color: #526994;
}
#content {
position: absolute;
left: 160px;
top: 100px;
width: 400px;
}
/* what this does is create two "containers"... one called "navigation" (which has a blue background, and is 150 pixels wide and is positioned 5 pixels over and 100 pixels down from the top left corner of the browser window) and another called "content" (which is 400 pixels wide and is positioned 160 pixels over and 100 pixels down from the top left corner of the browser window). */
did you notice something different? navigation and content are precided by # rather than . - this notation indicates an id rather than a class.
<div id="navigation">
<a href="home.htm" class="nav">home</a><br />
<a href="about.htm" class="nav">about us</a><br />
<a href="services.htm" class="nav">our services</a><br />
<a href="contact.htm" class="nav">contact us</a><br />
</div>
<a href="home.htm" class="nav">home</a><br />
<a href="about.htm" class="nav">about us</a><br />
<a href="services.htm" class="nav">our services</a><br />
<a href="contact.htm" class="nav">contact us</a><br />
</div>
it looks the same as a class, so what's the difference? as you can see in the example above, the class nav (which, if you remember from the previous section, specified that links be bolded, colored #536895, and have no decoration) was applied to four different instances, whereas the id navigation was applied to only one.
an id should only be used once in an html document. a class can be used multiple times. looking at our example, you know that there is one navigation section, and one content section.
→ resources