CSS 2.1 Reference

[Noob Saibot 38]

ID

 

CSS Tag: #

 

Description: This is used when an ID is called in HTML (e. g. <span id=Content>)

 

Example: #content

 

Class

 

CSS Tag: .

 

Description: This is used when a Class is called in HTML (e. g. <div class=ImageContent>)

 

Example: .ImageContent

 

Body Tag Start

 

CSS Tag: {

 

Description: Used after a ID or Class and tells the browser that this is the start of the CSS code for this class or ID

 

Example: #Content {

 

Body Tag End

 

CSS Tag: }

 

Description: Used after a ID or Classes content and tells the browser that this is the end of the CSS code for this class or ID

 

Example: .Image Content { }

 

CSS Content End Tag

 

CSS Tag: ;

 

Description: Used after the CSS tags used between the { and } tags. It tells the browser that this code is done/ended.

 

Example: #Main Title { ;}

 

Background Color

 

CSS Tag: background-color: #Hex Number OR Color Name

 

Description: Used to define the body background color or a table background color.

 

Example: #Main Title { background-color: #000; } OR {background-color: red;}

 

Background Image

 

CSS Tag: background: url (http://url_address.com/image.png)

 

Description: Used to define the body background color or a table background color.

 

Example: #GuestBar { background: url (http://eminainformer.net/maintitle.png); }

 

Border Solid

 

CSS Tag: border: 1px solid color: #000

 

Description: Used to define a border on a body, table, row, <div>, etc.

 

Example: #GuestBar { background-color: #000; background: url (http//:site.com/guest bar.png); border 1px solid color: #fff; }

 

Border Dotted

 

CSS Tag: border: 1px dotted color:#000

 

Description: Used to define a border on a body, table, row, <div>, etc.

 

Example: #GuestBar { background-color: #000; background: url (http//:site.com/guest bar.png); border 1px dotted color: #fff; }

 

Other Border Styles

 

Below is examples of more Border Styles.

 

Dashed: border: 1px dashed color: #000

Double: border: 1px double color: #000

Groove: border: 1px groove color : #000

Ridge: border: 1px ridge color: #000

Inset: border: 1px inset color: #000

Outset: border: 1px outset color: #000

Hidden: border: 1px hidden color: #000

None: border: none

Border Types

 

Below is examples of a more defined border type.

 

Right: border-right: 1px solid color: #000

Left: border-left: 1px dotted color: #fff

Top: border-top: 2px groove color: # 808080

Bottom: border-bottom: none

 

Proper Border Coding

 

The above examples are quick ways of making borders, but to look more professional, look at ways a webmaster would properly code his borders in CSS so he/she doesn?t look like an amateur.

 

#Guest Bar { background-color: #000;
color: # fff;
border-top-style: dotted;
border-bottom-width: thick;
border-left-width: 3px;
border-right-width: 3px;
border-color: #fff; 
}

 

As you can see each section of CSS is on its own line because this is the proper way to code be it CSS or HTML. Below is another example.

 

#Guest Bar { background-color: #000;
color: # fff;
border-top-style: inset;
border-width: 3px;
border-color: #fff; 
}

 

Margins & Padding

 

Below are some examples of Margins & Padding; also from here on out all example are shown in proper coding form.

 

#Guest Bar { background-color: #000;
color: # fff;
margin-top: 5px;
margin-bottom: -65px;
margin: 3px;
border-width: 3px;
border-color: #fff; 
}

#Guest Bar { background-color: #000;
color: # fff;
padding-bottom: 3px;
padding-top: 3px;
padding-left: 5px;
padding-right: 5px;
margin-top: 5px;
margin-bottom: -65px;
margin: 3px;
}

 

Another way of doing padding & margins is below.

 

#Guest Bar { background-color: #000;
color: # fff;
padding: 5px, 5px, 5px,5px;
margin: 3px, 0px, 3px, 0px;
border-top-style: outset;
border-width: 3px;
border-color: #fff; 
}

 

In the above example instead of typing: padding-left I simply defined all sides by margin: #px, this can also be done like so: { padding: 0px 0px 0px 0px; } as you can see I took out the commas, but to stay in the proper method if you use this then use commas.

 

Links

 

With links you can give all your links one solid color or give a specific link such as <div class=GuestBarContent>Click Here To Register</div> its own color. Are you lost? Let me explain by showing you to different example of CSS.

 

Body { font: 11px;
font-style: italic;
font-family: Georgia, Times, serif;
color: #000;
background-color: #fff;
Border: none;
}

a:link {color: #808080;
}

a:visited, a:active {color: #202020;
}

a:hover {color: #C0C0C0;
text-decoration: underline;
}

 

As you can see from above you can define all of them by separating them with a comma a:link, a:visited, a: active { color: #800000; } but never add the a:hover as that should always be seprate from the other 3.

 

Now lets use the example above ?GuestBarContent? to give it its own link properties.

 

Body { font: 11px;
font-style: italic;
font-family: Georgia, Times, serif;
color: #000;
background-color: #fff;
Border: none;
}

a:link { color: #808080;
}

a:visited, a:active { color: #202020;
}

a:hover { color: #C0C0C0;
text-decoration: underline;
}

.GuestBarContent { font: 11px;
font-style: italic;
font-family: Georgia, Times, serif;
color: #fff;
background-color: #000;
border-width: 1px;
border-style: solid;
}

.GuestBarContent a:link, .GuestBarContent a:visited, .GuestBarContent a:active,  {color: #200000;
text-decoration: none;
}

.GuestBarContent a:hover {color: #222222;
text-decoration: underline;
border-width: 1px;
border-style: dotted;
}

 

Now the body has a defined link color and our Guest Bar Content has its own as well. Also note I added a border to the ?.GuestBarContent a:hover? to give it more decoration.

 

Font Color, Style, Weight, & Family

 

This is very simple first to give something a basic color (not a link or background, but your text as a whole) you use: { color: #000; } now our text would appear as black.

 

Lets add some weight to the text (never to the whole body of text). Do this by: { font-weight: 700; } or { font-weight: bold; } the 700 & word bold both mean the same thing see key below for some words you can use or the numbers that correspond to those words:

 

Numeric Values | Keyword

 

100 | lighter

??? | light (do not add ??? I simply did not know the numeric value)

400 | normal

700 | bold

900 | bolder

 

Lets give this text some style by adding: { font-style: italic; } or replace italics with: normal or oblique. The normal tag should not really be used, but below is an example in which you would use it.

 

Body { font: 11px;
font-style: italic;
font-family: Georgia, Times, serif;
color: #000;
background-color: #fff;
Border: none;
}

.GuestBarContent { font: 11px;
font-style: normal;
font-family: Georgia, Times, serif;
color: #fff;
background-color: #000;
}

 

In the above example our body used Italic and we did not want our Guest Bar Content to use it either so that is a case which you would use the normal font style tag.

 

So now lets give the font some size by adding: { font-size: ?keyword?; } replace the word & quotes: ?keyword? using one of the words below:

 

xx-small, x-small, small, medium, large, x-large, and xx-large; 100%, 200%, or any other percent, & lem.

 

Now come font families and you can do these like so: { font-family: arial; } OR { font-family: Georgia, Times, serif; }

 

You can also use your own font, but take note that unless other people have that text on their computer they won?t see it.

 

Now lets Align our text by: { text-align: left; } OR { text-align: right; } OR { text-align: center; } OR

{ text-align: justify; } this can also be used to align tables, <div>, and other content besides text.

 

Text Decoration

 

Remember how we used: { text-decoration: underline; } well you can replace the word ?underline? with any of the words below:

 

none: used to remove default underlining of linked text.

overline: places a line above the selected text.

line-through: this places a line through the selected text.

blink: makes text blink (is not supported by Internet Explorer).

 

Transforming & Varying Text

 

Lets transform our text or a Heading by adding: { text-transform: none; } replace the word none with any of the words below:

 

capitalize, uppercase, or lowercase.

 

Lets give our text the effect of having capitalized words that are small by adding

{ font-variant: small-caps; } and again you can use the word normal, but only if you need to.

 

First-Letter & First-Line

 

This is cool; I just learned this one myself not to long ago it allows you to give the first line of a paragraph effects or decoration same with the first letter, but to the very first letter typed in the first line of a paragraph. This one is not hard to do, but it might get you lost. Lets look at our GuestBarContent for this one.

 

.GuestBarContent:first-line { color: #000; }
.GuestBarContent:first:letter { font-weight: bold; }

 

Look at the examples above in order for this to work you need to call a class or id: Class:firt-line OR ID:first-letter so lets say you wanted all the lines in Post 1 (found in your CSS) to be bold face then it would look like: .post1:first-line { font-weight: bold; }

 

Closing

 

Well that?s all of the basic stuff you will find in your Skin CSS plus I added stuff not normaly found in a Skin CSS. Now that you have learned so much why not try the project below.

 

CSS Project

 

In this project we will learn how to use everything above by adding a box that only guests can see. This box should not be kept on your forum so make sure you do this on a Test skin. You can make one by going to: Admin CP >> Skin Manager >> HTML Templates >> Base new Template Off then go to: Admin CP >> Skin Manger >> Edit >> change the HTML Template for that skin.

 

UNDER DEVELOPMENT