User:Ccsmith/sandbox/wiki3

Common.css
Common.css allows you to change CSS coding once without having to go to each inline style to make CSS coding changes.

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.
 * And if you should want to change the color, you have to go to each occurance of the inline style to change it.
 * But there is an easier way.

Class
The easy way is by the use of CSS classes in which we will place attributes such as color of text, padding, etc. When put in our common.css page it will control the attribute in every place and on every page where your class is entered. 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?
 * I will show you, first you need to bring up the page: User:YourUserName/common.css. You will place the class' attributes on this page.  Again, you need to know that wherever you have place the class "greenText" the color will be green.  If you change the color, for example, it will change the color for the text on any and all pages where class "greenText" has been placed.
 * 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 attribute 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:
 * Again, you don't have to go into every inline style to add or change coding, just on you common.css page.