User:Ccsmith/sandbox/wiki3

Common.css vs Inline styling
Common.css allows you to change CSS coding once without having to go to each inline style entry to make CSS coding changes. Please Note: All coding will be done on user's pages. Practice you coding on one of your user pages while the CSS coding is done on "user:yourUserName/common.css" which we go over below.

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.
 * Often times, you may have many lines of text that you have made to be green.
 * What if you want want to change the color?
 * You have to go to each occurance of the inline style to change it and there may be many of them.
 * 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 installed on a page called common.css. These classes will then control attributes on every place and on every page where your class is entered. The text we want to be green
 * First we will type this code where on the pages 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 green with a class named "amphibianQuotes."

Create classes
. amphibianQuotes { color:green }
 * You may be asking, where is the CSS code "color:green" in this class?
 * I will show you, first you need to create a page if you have not done so already: User:YourUserName/common.css.
 * Then on this page, 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 green text.

Placing classes
The text you want to be green
 * As mention, to place this class on a page, you type the following:
 * Notice we have substitued:
 * for
 * As you look at the differences, you will notice that the inline style calls out the text color.
 * Whereas it is in the class named amphibianQuotes that contains the text color.
 * So where is the advantage of classes you ask. It looks like more typing.
 * So where is the advantage of classes you ask. It looks like more typing.

Advantage of classes
. amphibianQuotes { color:green; font-size:2em; border:1px solid black; padding:5px; }
 * Well here is where classes come into their own.
 * First, if you want to change the color of the text, all you have to do is change the code on the class "amphibianQoutes" in you "User:YourUserName/common.css" to whatever color you want and it will show up on the pages wherever the class "amphibianQuotes" is located
 * This illiminates 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 your common.css page.

changing CSS coding on div tags inside of other tags
p.amphibianQuotes { color:red; } Notice the period between the tag p and the name of the class.
 * Let say you have a div tag inside of a p tag and you only want to change the attributes of div tags inside of p tags but not div tags outside of p tags.
 * The coding on your common.css page will be:
 * What these coding is saying is that whenever the class "amphibianQuotes" is within a p tag the color of the text will now be red.
 * The other places where the class amphibianQuotes is located, the color is not changed.