User:Ccsmith/sandbox/wiki3

Common.css
Common.css allows you to put CSS coding in only once for a particular tag rather than having to put inline styling of each occurance of that tag.

Inline styling
It is not easy being green It is not easy being green
 * Lets say we want some text to be green in color. Such as:
 * If we use inline styling, the coding looks like this:
 * This coding is then required for everywhere you want the text to be green.
 * But there is an easier way.

Class
It is not easy being green
 * First we will type this code where we want the text to be green:
 * You will notice that we have substituted the word "class" for "style."
 * The word following "class =" is the name of the class which is in this case "greenText."
 * In other words, we are going to color the text with a class named "greenText."

Create classes
.colorText {color:green }
 * You may be asking, where is the "color:green" code in this class?
 * We start by creating the "class" named "greenText ."
 * The class is created on a page called: "User:YourUserName/common.css". Each of you have such a page.
 * Then type the following:
 * The period represents the word "class."
 * Then the name of the class you are creating.
 * Next two {} opening and closing curly brackets.
 * between the curly brackets, we add the CSS code which is in this case: color:green.
 * You have now created a class named greenText with the atrobute of color:green.

Placing classes
It is not easy being green.
 * To place this class on a page, you type the following:
 * Again notice we have substitued:
 * for

Advantage of classes
.colorText {color:green; font-size:2em; border:1px solid black; padding:5px; }
 * As you look at the differences, you may say, "I don't see much of a difference? Still almost the same amount of words."
 * Well here is where classes come into their own.
 * First, if you want to change the color, all you have to do is change the code on your "User:YourUserName/common.css" to whatever color you want and it will show up on the page wherever the class "greenText" is located.  So you now do not have to go through and change the color for each inline style.
 * Second, you can add other CSS coding by separating each item with a semi-colon, like so: