CSS (What They are and How to Use Them)
What is CSS?
CSS stands for cascading styling sheet. Lots of web-designerss like myself, use it so it is
much, easier to change the text colours, etc, to match a layout. It is much easier than
changing each table/box in detail in a html code.
Here is a definition I got from google:
''A series of instructions that specify how text should appear on a Web page. You can use CSS to
set styles for text, borders, and other elements, and apply these styles to an entire Web site.''
How to Use Them
Now that you know what CSS is, let's get started! Some of these require a bit of
general/basic html knowledge.
1. Open up a new document in notepad and name it style.css
2. Copy and paste the code below into your style.css document.
3. Now, I want you to go through the entire CSS code I just gave you, and everytime you
see the word''background'' and next to it has ''#COLOUR'' replace the word ''COLOUR'' with
the background number colour code to match your layout.
4. Again, go through the entire CSS code, and where it says ''font'' OR
''font-family'' type in the font you want to use on your website. I usually use either
arial, tahoma, and georgia. Make sure the font you put in is viewable in most computers.
5. OK, so once you've done that, we're going to re-code bit by bit of the CSS.
As I said earlier,to edit CSS, you need some general/basic html knowledge. So what's going to
happen is, i'm going to show you part of the css code, and tell you what it's for, and you're
going to edit the settings yourself.
6. At the top of the code, there should be something like this:
<![CDATA[
a {
text-decoration: none;
font-weight: none;
font-family: tahoma;
color: #COLOUR;
background-color:#COLOUR;
border-bottom: 0px dashed #COLOUR;
text-transform: none;
font-size: 8pt;
cursor: default;
]]>
This section of the CSS, is the link settings.
7. After the part of the CSS code shown in step 6, there should be something like this:
<![CDATA[
a:hover {
text-decoration: none;
border-bottom: 0px solid #COLOUR;
color: #COLOUR;
background: #COLOUR;
]]>
This part of the CSS is what the link will look like when a computer mouse hovers over it.
8. After the part of the CSS code shown in step 7, there should be something like this:
<![CDATA[
input, select {
color: #COLOUR;
background: #COLOUR;
font-size: 6pt;
font-weight: normal;
font-weight: none;
text-decoration: none;
font-family: Tahoma;
text-align: left;
border-width: 1px;
border-style: dashed;
border-color: #COLOUR;
]]>
This part of the CSS is what your ''input'' things will look like. For example, the ''GO''
button on a drop down menu or music player, a form, etc.
9. After the part of the CSS code shown in step 8, there should be something like this:
<![CDATA[
TEXTAREA {
color: #COLOUR;
background: #COLOUR;
font-size: 6pt;
font-weight: normal;
text-decoration: none;
font-family: arial;
text-align: left;
border-width: 1px;
border-style: dashed;
border-color: #COLOUR;
}
]]>
This part of the CSS is the box where you can give out html. Here's an example:
10. After the part of the CSS code shown in step 9, there should be something like this:
<![CDATA[
b {
color: #COLOUR;
background: #COLOUR;
font-family: arial;
font-size: 8pt;
]]>
This is where you can change the settings for bold.
11. After the part of the CSS code shown in step 10, there should be something like this:
<![CDATA[
i {
color: #COLOUR;
font-family: arial;
font-size: 8pt;
]]>
This is where you can change the italic settings.
12. After the part of the CSS code shown in step 11, there should be something like this:
<![CDATA[
u {
font-size: 8pt;
color: #COLOUR;
border-bottom: #COLOUR 1px solid;
font-family: arial;
]]>
This is where you can change your underline settings. If you want to have a
double underline, where it says ''border-bottom: #COLOUR 1px solid;'', change the
colour and width of the bottom underline. Then put in the type of underline you want at the bottom.
You can have solid, dotted, and dashed. (Make sure you have at least 1px as well; the
higher the number next to px is, the thicker the width of the bottom border is.)
13. After that, you should see something like this:
<![CDATA[
strike {
font-size: 8pt;
color: #COLOUR 1px solid;
font-family: tahoma;
]]>
Here is where you can change your strikeout settings.
14. After that, you should see something like this:
<![CDATA[
h1{
font-size: 30px;
text-transform: none;
border-bottom: 0px solid #COLOUR;
color: #COLOUR;
padding: 0px;
font-family: arial;
background: #COLOUR;
text-align: left;
letter-spacing: -3px;
margin-bottom: 0;
line-height: 1.3;
]]>
This is your 1st header. This is often used for titles.
header 1 example!
To use header 1, use this code:
15. After the h1 part of the CSS, you should see h2 which looks like this:
<![CDATA[
h2 {
padding: 0px 0 0px 0px;
color: #COLOUR;
font-family: arial;
letter-spacing: 1px;
font-size: 10px;
word-spacing:1.5px;
line-height: 1.5;
text-transform: none;
background: #COLOUR;
]]>
This is exactly like your 1st header (title) except this is called the 2nd header.
Usually in the 2nd header, is where all the main text goes. To use h2, use this code:
16. And in the last part of the CSS, you should see something like this:
<![CDATA[
body {
background-color: #COLOUR; }
]]>
All you have to do is put the the colour number code of your page background.
This part of the CSS is a life saver when it comes to using iframes as there is a
default white border around it.
17. Now just upload your style.css - You can read a tutorial on using Smart FTP
Client here.
18. To get the CSS settings working on every page, you MUST paste the code
given below on every page!
(Where it says CSS URL HERE put in your CSS url. E.g. http://yourwebsite.org/style.css
And viola! Your very own customised cascading styling sheet! If you are ever unsure
what some part of the CSS does, have a play around. It's the only way you'll learn something new
using CSS!
Goodluck, and I hope this tutorial helped!