If you want to know more about CSS and how to use it, there are many great resources out there that can help you get started: I would start with http://www.w3schools.com/Css/default.asp
Here are the basics that you will use:
Syntax
selector {property: value;}
External Style Sheet - (Added within the <head> tags)
<link rel="stylesheet" type="text/css" href="style.css" />
Internal Style - (Added within the <head> tags)
<style type="text/css">
selector {property: value;}
</style>
Inline Style- (Added within the <body> tags)
<tag style="property: value">
Or use the following table with some of the most basic Properties. I am using the .MS-Main class as a reference for all of the examples below.
Properties | Example | Other Values |
Backgrounds | ||
background-color | .MS_Main{ | black |
background-image | .MS_Main{ | none
|
background-position | .MS_Main{ | top center |
background-repeat | .MS_Main{ | repeat |
background-attachment | .MS_Main{ | scroll |
Borders |
|
|
border | .MS_Main{ | none |
Element Position and Visibility |
|
|
display Note: You will never use display none for the body of you website. | .MS_Main{ | Block |
visibility | .MS_Main{ | visible |
position | .MS_Main{ | static |
Heights and Widths |
|
|
height | .MS_Main{ | auto |
width | .MS_Main{ | auto |
Fonts and text treatments |
|
|
Font-family | .MS_Main{ | Times, Serif |
Font-size | .MS_Main{ | 10px |
Font-style | .MS_Main{ Font-style: italic; } | normal oblique |
Font-weight | .MS_Main{ | normal |
Text-align | .MS_Main{ | left |
Text-decoration | .MS_Main{ | none |
Line-height | .MS_Main{ | normal |
Spacing of Elements |
|
|
Padding | .MS_Main{ | padding-top |
Margin | .MS_Main{ | margin-top |
Pseudo-classes |
|
|
Hover Note: you apply this pseudo class after the class name to achieve a hover state effect. | .MS_Main:hover { |
|
Transparencies Note: You can make a class’s opacity to give it a transparent look. | .MS_Main: { | |
!Important tag Note: Sometimes your css will not override hardcoded inline styles or ids so you can simply force the style with the !important tag. | .MS_Main{ |
|
Differences between Classes and ID's
A class is referenced in the HTML as the following:
<td class="ms-main"></td>
Notice the class does not have the "." period in front of it. To add style to this class you would use the following syntax:
.ms-main {color: red;}
A ID is referenced in the HTML as the following:
<DIV ID="ms-main"></DIV>
To add style to this class you would use the following syntax:
#ms-main {color: red;}
So if you can remember that Classes use (.) periods and ID's Use (#) Pound signs you should be golden.
Comments
Imho they really should have let the team that did the CSS implemtation in CMS do it instead of using the CSS from SPS... It's still a mess :(