Kwik-n-free instant css tutorial
A free web page design tutorial for using CSS immediately, without learning much HTML first. Wednesday, January 7. Last edited: 2008.01.12
This tutorial has you working immediately with the same CSS techniques used to create Kwik-n-free and other websites.
The way that I (and I think most people) learned web design was first to spend a month learning HTML. Then afterwards, to learn CSS. I believe that was a mistake. Another month or so was wasted un-learning half of what I had learned. Then struggling to learn CSS. And then struggling again to sort out what was useful. This tutorial bypasses all of that. Here on "day two" you are about to learn what it took me several months to piece together.
The basics of CSS are easy.
The important thing is to plunge in. Once you get the general idea--the rest is mostly a matter of looking up any CSS code you do not know.For the official list of CSS codes go to:
w3schools.com/css/css_reference.asp.
Also, the initials "CSS" stand for perhaps the most confusing techno-babble ever invented.
I suggest that you think of CSS as "Coordinated Style Sheets." Or perhaps, "Completely Simple Sites." CSS allows all text on your page--and your entire site--to act in coordination with a single "style sheet." CSS is designed to make things simple. And yet, the official name--"Cascading Style Sheets"--tends to give the opposite impression of everything "cascading" into endless directions. For beginners, that name is useless! The more it is explained, the more confusing it can seem. So forget about it! You only need to know that CSS is like a streamlined HTML with the following features.- CSS is an upgrade for HTML and can do many things that basic HTML cannot.
- CSS allows you to change the look of an entire site--instantly.
- CSS is essential to building a modern web page.
- The Kwik-n-Free Beginner CSS is just as easy as basic HTML--and yet also can build an advanced website.
So here goes the lesson...
1. Start a new folder named "Sites" on your desktop.
2. Click on this little link to open
the file "beginner.css" as a web page:
beginner.css
3. Click on "File" in your browser window. Then "Save As" or "Save Document As..." and save as beginner.css
--Be sure it is not "beginner.txt" and not "beginner[1].css" or anything else.
--Be sure to save in
the "Sites" folder.
--If you have trouble, try "Edit > select
all" for the page. Then "copy" and paste into Notepad. Save as
beginner.css
.
6. Now look at what you pasted:
--First, there is a "doctype" code. Among other things, this helps different browsers to read your CSS in the same way.
--Next is a <head></head> section. This makes a place
for "general codes." Inside is this CSS code:
<LINK rel=stylesheet
href="beginner.css" type=text/css
MEDIA=screen>
Translating into plain English, this simply says: "The Style Sheet for this page is called beginner.css." Make sure that beginner.css and second.htm are both in the "Sites" folder.
7. Now find this part of second.htm:
<center><font size="4"><b>
Change that to:
<div class=
"c f4
b">
Also for this part:
</b></font></center>
Change to:
</div>
Notice how CSS usually makes things simpler!
8. Now open the style sheet beginner.css. You will find:
.c
{text-align:center} = <center>
.f4 {font-size:large} = font size 4
.b {font-weight:bold}
= <b>
Therefore all this: <center><font
size="4"><b>
can be replaced with: <div
class="c f4 b">
Also in beginner.css
you can find that:
.f2 = small = size 2
.f3 = medium =
size 3
10.
Now let's try a fancy type style. Using HTML you
would need something like this:
<center><b><font face= "comic sans ms,trebuchet ms,serif" size="4">(text)</font>
But using
beginner CSS, we just add "fancy" to the style:
<div
style="c f4 b fancy">(text)</div>
11. Return to beginner.css and find this:
.fancy {font-family:
"comic sans ms","trebuchet ms",georgia,serif}
So, now you know what class="fancy" means! And you can change the meaning.
Try placing "trebuchet ms" first in the list for ".fancy" in your "beginner.css" style sheet. Then, if a browser has this font, "trebuchet ms" = fancy. Otherwise, a browser will use the next on the list. If all listed fonts are missing, the browser will use whatever "serif" font it has. (Therefore, careful research was done so that almost all fonts in beginner.css are installed in over 90% of browsers.)
Also--several months later--suppose you change your mind? You only need to change one line in beginner.css and the meaning of class="fancy" will change everywhere on your website.
Also notice other font-family styles. In particular:
.ftiny {font-size:x-small; font-family:verdana,helvetica,sans-serif;}
I have included "x-small" along with "ftiny". Therefore, you do not need to say class="ftiny f1". I did this because Verdana only looks good at x-small size. (If you disagree--change it!)
12. Open the "Sites" folder and double-click on second.htm to view with Internet Explorer or your favorite browser. See the web page? Now use Notepad and experiment with style changes.
13. Using Notepad, return to second.htm. Return to this:
<div style="c f4 b fancy">(text)</div>
Change to:
<h1>(text)</h1>
14. Return to beginner.css
and find this:
.hcaps {font-weight:bold; font-size:medium;
padding: 0;
text-align:center;
font-variant:small-caps;}
Add a comma (,)
after .hcaps. Then add h1 like this:
.hcaps, h1 {font-weight:bold;
font-size:medium; padding: 0;
text-align:center;
font-variant:small-caps;}
Note that there is no period (.) before h1.
- This is because this is a "general rule" to apply to every <h1> area.
- If you put a period before h1 in the style sheet, then the rule would only apply to areas with class="h1"
Also look for this:
p {text-indent:1em;}
This is a code that says, every time <p> appears, the first word will be indented by 1 space. Perhaps you noticed? If you don't like this, remove it.
15. Return to your Internet Explorer or other browser, and view the results. It should look like this:
Testament of (your name)
I hereby give all my money to saving the rainforest.
If the rainforest is already cut down, then never
mind.
16. Return to beginner.css .
Notice several "h" styles:
.hbold, .hbillboard, .hborder, .highlight,
.hnormal.
Try moving h1 to a different style. Remember the (,) comma--but no
period (.)--before h1. Well, see what happens. If you
do not like my codes--change it! Here is an official list of CSS codes:
http://www.w3schools.com/css/css_reference.asp
17. Understanding <span> and <div>. Instead of div, often you can use span. What's the difference?
<div></div> means: an invisible
box.
<div></div> also means: a new line
will begin. (Because of the box.)
<span></span>
means: there is no new line. There is no box.
Therefore text-align:center and
border-style:solid and such things do not work
with span. There is no box to center, there is no box to
border. But, most everything else works. Therefore:
--Use
div to change an entire paragraph or heading.
--Use
span to change only a few words inside of a paragraph or
heading.
--If div does not work, try span. And if span does not work, try
div.
--By the way, often you do not need either <span> or <div>. CSS commands can be put inside of any existing HTML tag. For example:
<p class="c">This will create a centered paragraph.</p>
<a href="/" class="b">This link will be bold.</a>
You are well on your way to building websites. This of course is simplified--but will get you started. Did everything make sense? If not--try again! Persistence is in. When ready, please find the link below for the Kwik-n-Free links, colors, images, and PHP tutorial. (You also will learn more CSS.)