After you've finished chosing a style you like the final
step is generating your CSS Code. To do that first you have to press
the "Get CSS Code" link above the column of text which you would like
to get the CSS code for. After you click that link you should see the
dialog below...
This is what I call the "Get CSS Code" dialog. You'll
notice at the top of this dialog it gives you a number of options as to
how you would like your CSS code to be generated. You can choose from
3 different types of CSS Selectors:
• a Type Selector
• a Class Selector
• an ID Selector
You can also quickly jump between the CSS
Code for the 3 different columns simply by clicking on the approriate
radio button, "Column 1 CSS", "Column 2 CSS", or "Column 3 CSS".
You may be wondering, "what's the difference between the
different types of selectors?". Well, I'll try to explain them as best I can here.
Type Selector
You use the Type Selector when you want to affect all elements
of a certain type on your page. For example, if
you wanted all paragraph elements (<p>) or all <h1> elements
or all <input> elements on your page to share the same style you
would want to use a Type Selector. With a Type Selector, your CSS code
would look like this...
p {
color: blue;
}
In this case, all paragraph elements (<p>) on the page will
appear blue in color. Type Selectors are very easy to make, you simply
type out the type of element you would like to style (in this case, "p")
and then an opening curly brace, {, then some CSS style rules (seperated
by semi-colons), and finally a closing curly brace, }.
Class Selector
So that's one type of selector, another type of selector is called the
"Class Selector". The Class Selector allows you to affect all elements
on the page of a certain class. So what does that
look like in code? Well, it looks like this...
p.example_class_name {
color: blue;
}
Here my class name is example_class_name and my base
HTML element is <p> (the paragraph element). I could have also
set my base HTML element to be * so that that class name can be used
with any HTML element. Or, instead of typing the *, you could have
also typed nothing at all, which would look like this...
.example_class_name {
color: blue;
}
Which will apply those styles to any element on the page
which has it's class attribute set to example_class_name. My HTML
would then look like this...
<p class="example_class_name">This is some example text</p>
The Class Selector can be very useful and is probably the
single most often used type of selector. Here is an example, let's say
you wanted 5 paragraphs on your page to appear in blue and another
5 paragraphs to appear in red. Well, in that case you could simply
create 2 CSS Class Selectors (one for red and one for blue), and simply
use the class attribute to assign the correct class to each paragraph.
Which would end up looking like this...
CSS Code
p.blue { color: blue; }
p.red { color: red; }
HTML Code
<p class="blue">This is paragraph 1</p>
<p class="blue">This is paragraph 2</p>
<p class="blue">This is paragraph 3</p>
<p class="blue">This is paragraph 4</p>
<p class="blue">This is paragraph 5</p>
<p class="red">This is paragraph 6</p>
<p class="red">This is paragraph 7</p>
<p class="red">This is paragraph 8</p>
<p class="red">This is paragraph 9</p>
<p class="red">This is paragraph 10</p>
Class Selectors are really useful when you need to apply
the same styles to multiple elements on the page.
ID Selector
The final type of selector you can generate is an ID Selector.
An ID Selector is used when you need to apply styles to only one
specific element on the page. Here is what it looks like in code...
p#example_id {
color: green;
}
Notice how I'm using the pound sign (#) to seperate my
base HTML element from my id name. ID Selectors are used in almost
exactly the same way as Class Selectors, only instead of specifying the
class attribute for the element you specify it's id attribute in the HTML like so...
<p id="example_id">This is an example</p>
Now, only that one element will get those styles. Also,
for your code to be valid HTML or XHTML you cannot include the same
id name more than once on the same page. In other words, id's are
unique and can only be used once.
OK, so now you've generated your CSS Code. You just need
to copy and paste that code into the CSS Code section of your website and
copy and paste the HTML into the HTML section of your website.
Tip:
I have also included convenient "Select All" buttons underneath both the
CSS and HTML Code textboxes so you can easily select all of the text in
these textboxes (for when you're getting ready to copy them).
Once you've finished copying and pasting your code simply press the "OK"
button to close the dialog.