CSS... Back to Basics
If you don't have a solid foundation in HTML please check out my "HTML101" lens for a basic lesson or to recap on what you all ready know. We will build a very professional looking web page using basic CSS. You are free to keep this design and use it for your own.
What the heck is a CSS?
You may be wondering why CSS is in the "Basic" category? CSS or 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!
- Start by pasting this code into my Live Page Builder
- <!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 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>
- 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 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 id=footer>
- </DIV>
- </BODY>
- </HTML>
Save your work
I hope you are saving as you go 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
) - After you have made changes such as title, menu names and links save as index.html inside of the folder CSS
What did we just do?
Staying with the flow of these lessons. I gave you the end result first! That way those of you who just wanted the template can stop there and those who wish to learn a little can keep going.
Ok, let's take a look at the CSS you saved to your hard drive named stylecss.css:
- /* CSS Document */
- body {
- background-color: #c0c0c0;
- .title
- {
- padding-left:80px; font-size:24px; padding-top:25px
- body,td,th {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 12px;
- color: #666666;
- ul {
- margin: 0;
- padding: 0 0 10px 0;
- list-style: none;
- line-height: 1.2em;
- li {
- padding-bottom: 7px;
- a:link {
- color: #333333;
- text-decoration: none;font-weight:bold
- a:visited {
- color: #333333;font-weight:bold
- a:hover {
- color: #990000;font-weight:bold
- a:active {
- text-decoration: none;
- color: #993300;font-weight:bold
- #header {
- height: 71px;
- color:#4d5863;
- background: #D8DDE1 url("images/header.jpg") no-repeat;
- margin: 0px auto;
- #container {
- position: relative;
- color:inherit;
- background: #D8DDE1 url("images/body.jpg") repeat-y;
- text-align: left;
- #content {
- line-height: 1.6em;
- float: right;
- width: 550px;
- padding: 0px 0px;
- div.paragraph {
- margin: 10px 35px 50px 0px;
- padding: 0;
- /* NAVIGATION STYLES */
- #navlist {
- font-size: 0.85em;
- float: left;
- width: 160px;
- padding-left: 30px;
- #navlist ul {
- margin-right: 10px;
- margin-left: 10px;
- #navlist ul li {
- display:block;
- margin: 2px 0;
- /* CATEGORY NAVIGATION */
- #nav-1 ul {
- padding-bottom: 20px;
- #nav-1 a:link, #nav-topics a:visited {
- color: #000000;
- #nav-1 h3 {
- padding-left: 10px;
- #nav-1 li {
- color: #AC4444;
- background: url("images/nav_bg.gif") repeat-x left bottom;
- #nav-1 a:hover, #nav-topics a:active {
- color: #6A0909;
- background-color:inherit;
- #footer {
- margin: 0 auto;
- width: 755px;
- height: 33px;
- background: url("images/footer.jpg") no-repeat;
- }
CSS is made up of three parts:
A selector, property and value.
- selector {property: value}
- The selector is usually the HTML tag you want to define, the property is the attribute you want to change, and every property can take a value. The property and value are separated by a colon, and surrounded by {and}:
- body {color: #c0c0c0}
- If the value has more than one word seperate them with commas.
- body {color: #c0c0c0}
body,td,th {font-family: Verdana, Arial, Helvetica, sans-serif} - If you make more than one property separate them with a semi-colon ";"
- body,td,th
- {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 12px;
- color: #666666;
- }
- Notice how much easier to read it is if you don't put everything on one line! Also, notice how you can group several selectors by a comma "body,td,th"
- You make the selector into a class. You can use this to make different sections of your page appear different by specifying the "class" start with a period such as .title
- .title
- {
- padding-left:80px; font-size:24px; padding-top:25px
- }
- On your html page place the class like this <H4 class="title">stuff</H4>
- Keep your CSS clean and organized by placing comments that are not seen by anyone but you to divide different sections of your style sheet.
- /* This is a comment */
FANTASTIC JOB!
Use the sheet you downloaded and really tear it apart. Try different things and watch what happens to your html page. I know this is not an in depth course on CSS but then again it was meant to be "To the point" I will be happy to be more elaborate if I get enough requests. Look for the samples I will be making. Chances are I will be re-creating something of use to you.
I would love to hear from you!
Juan Colome
great job - Can I chat with you sometime soon ? Really want to learn CSS.
Juan Colome
jcolome@bellsouth.net
Posted November 12, 2007
|
apalm
Awesome lens! CSS is great for making webpages and you have definitely given a good introduction. Posted September 30, 2007 |
|
aande
Nice resource. It's good stuff . . . just enough to get people interested in CSS. westciv.com has some great tutorials for those who want to get serious about the subject. Posted September 22, 2007 |
|
Mr-Salesmanship
Nice lens. 5*. You could do with a before and after example to get your point across better tho. Posted August 30, 2007 |
|
Arizona-Snow
This is not an easy subject to get across on a single lens. 5*. Keep up the excellent work. Posted August 30, 2007 |
Other lenses by Forgiven:
Fetching RSS feed... please stand byLike what you read?
Then express how much (or how little) by clicking on one of the stars at the top of this page.
1 Star - this lens should have remained a thought2 Stars - the thought was there but-
3 Stars - there is hope yet
4 Stars - best thing since sweet tea
5 Stars - you like me, you really really, like me!
If you really like it, Lensroll Me =), Fav Click Me =) or tell someone else by using this Squidoo eMail page.
Thank you for your support
Modest Needs
This and every lens made by Forgiven (Scott Smith) proudly donates all proceeds to Modest Needs.Founded in 2002, Modest Needs is an award-winning charity that works to stop the cycle of poverty before it starts for low-income workers struggling to afford emergency expenses like those we've all encountered before: the unexpected auto repair, the unanticipated trip to the doctor, the unusually large winter heating bill.
At Modest Needs, we believe that EVERY person has the power to make a difference. So, by choice, the work we do at Modest Needs is funded exclusively by the 'small change' donations of people just like you.
The average gift of these extraordinary people? Between $5 and $100 at a time.
Since 2002, our donors' 'small change' has stopped the cycle of poverty for 3651 individuals and families who stood to lose everything over a short-term financial emergency. But with your support, we could reach even more of the hard-working people who need our help the most.
Discover your power to change a life. Please join your friends and neighbors in supporting Modest Needs.
Because Modest Needs has earned the highest possible charity rating from the Better Business Bureau's Wise Giving Alliance, you can give with confidence, knowing that we won't abuse your kindness.
But more importantly, simply by working together in this very modest way, we can make sure that no hard-working person is ever forced to choose between taking a child to the doctor and putting food on the table.
