<!-- Home|Web Hosting/Design ->
<!--CSS-->

What the heck is a CSS?

You may be wondering why CSS is in the "Basic" category? CSS aka. Cascading Style Sheets are in my opinion the basics to a proper web site. So, there you go... Advanced Basics...:)
CSS is a simple method of adding style (eg fonts, colors, spacing) to Web documents. CSS allows you to make changes to several pages by only changing one style sheet. With CSS you can build multiple different web sites using the same style sheet.

Let's build a CSS Web Page!

Now it get's really fun! You are about to build a professional grade web site! You can use this template to build endless web sites by only changing a few pictures!
(preview your page)
Start by pasting this code into my Live Page Builder:
( HINT: In IE You can triple click in the middle of the code to highlite then copy )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>My First CSS Page!</TITLE>
<link rel="StyleSheet" type="text/css" href="stylecss.css" media="screen">
</HEAD>
<BODY>
<DIV id=header>
<div class="title">
<a href="http://htmlinc.com" >Your Title</a>
</div>
</DIV>
<DIV id=container>
<DIV id=content>
<DIV class="paragraph">
<DIV align="center">
<a href="http://htmlinc.com/index.php">Home </a>|
<a href="http://htmlinc.com/services.php"> Service </a>|
<a href="http://htmlinc.com/aboutus.php"> About </a>|
<a href="http://htmlinc.com/contactus.php"> Contact</a> |
<a href="http://htmlinc.com/sitemap.php"> Sitemap</a>
<H4 style="text-align:center">Page Title</H4>
</div>
<DIV>
Your Body Content - goes here. This page is held together with CSS. The more text you put here the more your page will grow along with the text.<BR>
You can use this template to form several different websites by changing only three pictures:<BR><BR>
<img src="images/bullet.jpg" alt="Bullet" style="padding:10px 10px 0px 10px"> header.jpg<BR>
<img src="images/bullet.jpg" alt="Bullet" style="padding:10px 10px 0px 10px"> body.jpg<BR>
<img src="images/bullet.jpg" alt="Bullet" style="padding:10px 10px 0px 10px"> footer.jpg<BR><BR>
We will use this template for all future lessons.
</DIV>
</DIV>
</DIV>
<DIV id=navlist>
<DIV id=nav-1>
<H3>Your Menu</H3>
<UL>
<LI><A href="http://htmlinc.com/web101.php">Web 101</A></LI>
<LI><a href="http://htmlinc.com/code.php">HTML Code</a></LI>
<LI><a href="http://htmlinc.com/htmlcolorcodes.php">Color Codes</a></LI>
<LI><a href="http://htmlinc.com/css.php">CSS</a></LI>
</UL>
</DIV>
</DIV>
</DIV>
<DIV id=footer>
</DIV>
</BODY>
</HTML>
I hope you are but if not get into the habit of saving your work religiously!
  • Create a folder on your desktop and call it CSS (or anything you want)
  • Now download these IMAGES to the folder named CSS
  • Go to the folder and double click the self extracting file named imagescss.exe, this will extract the pictures to a folder named images and the CSS sheet
  • Now select all (ctrl+a) the code from the page builder > Copy (ctrl+c) and paste (ctrl+v) into notepad ( PC | Start > Programs > Accessories > NotePad The NotePad icon)
  • After you have made changes such as title, menu names and links save as index.html inside of the folder CSS

Web 102.3 <-- previous     next --> CSS 101.2

For we walk by faith, not by sight. -- Corinthians 5:7 (one of my personal favorites)