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.

Classes
The easy way is by the use of CSS classes in which we will place attributes such as color of text, padding, etc. Classes are listed on a common.css page. These classes will then 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 "amphibianQuotes."
 * In other words, we are going to color the text with a class named "amphibianQuotes."

Create classes
. amphibianQuotes { 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 classes with their attributes on this 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 "amphibianQuotes" 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
.amphibianQuotes { color:green; font-size:2em; border:1px solid black; padding:5px; }
 * As you look at the differences, you will notice that the inline style calls out the text color, whereas the next line calls out the class which contain the text color. So where is the advantage of classes you ask.  It looks like more typing.
 * 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 the class amphibianQoute on you "User:YourUserName/common.css" to whatever color you want and it will show up on the page wherever the class "amphibianQuotes" is located which does away with having to go to each inline style to change the color.
 * 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.