View Thread: CSS Tutorial #1 - Killersites.com Forum

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: CSS - Styling your pages with Cascading Style Sheets.

Thread: CSS Tutorial #1

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 8

[ ]

Author

This topic has been viewed 888 times and has 7 replies

atreiber
Stranger

Canada
Joined: Jan 5, 2005
Post Count: 1
Status: Offline


CSS Tutorial #1

I am an absolute beginner at CSS!
I have worked through Tutorial #1 three times, using two different computers with two different browsers (IE6.0 and Mozilla Firefox). I have copied and pasted into the two files, PracticeHTML.htm and MyCSS.css, but when I open up the htm file I do not get the effect of the CSS - "The Main Navigation" appears immediately above "The Main Heading" instead of to the left, and the little green lines defining the sections of the page do not appear.
Any suggestions as to what I am doing wrong? Could it be that my browsers do not support CSS? Somehow I doubt that.
Many thanks

[Jan 5, 2005 9:42:13 AM]

[Link]

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6285
Status: Offline


Re: CSS Tutorial #1

Check the path where you linked the HTML to the CSS in the header. The link is not calling up the CSS correctly.

[Jan 7, 2005 6:31:26 AM]

[Link]

jackienell
Stranger

United States
Joined: Jan 20, 2005
Post Count: 2
Status: Offline


Re: CSS Tutorial #1

Hi! I have gone through the "Killer Web Design Videos" through CSS Video 2. Because I couldn't get my webpage to reflex the root.css applications, I started studying the CSS Tutorial. I have gone through Lesson 1 and am still having the problem reflected in the first post.

Until this glich, I was feeling pretty smug. Stefan Mischook's Videos make building the first website incrediblily easy. cool

I think this is the problem. When I save my page "mycss.css," it is still saved as a text file instead of a css file. In the videos, when Stefan saved his css page it looks different.

Can anyone tell me what I am doing wrong?

Thank you and God bless,
Jackie Nell (Texas' gals have to go by 2 names! tongue

)

[Jan 20, 2005 3:43:42 PM]

[Link]

jackienell
Stranger

United States
Joined: Jan 20, 2005
Post Count: 2
Status: Offline


Re: CSS Tutorial #1

I went back and worked on it again. I typed my page exactly from the view source of Stephan's My Practice HTML. Then I saw how I was able to create a HTML page the same way I was able to create a TXT page. This time when I saved to the extention .css, the page did save correctly.
___________________________________________________________________
This is how my html page, called "First CSS Tutorial.html" looks:
_____________________________________________________________________
The Main Heading
Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page ... and do it now!

The Main navigation
__________________________________________________________
This is the view source:
_______________________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="centerDoc">

<h1>The Main Heading</h1>

<p>

Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'.

Follow the instructions there and create your basic HTML page ... and do it now!

</p>

</div>

<div id="navigation">

<h2>The Main navigation</h2>

</div>

</body>

</html>
_________________________________________________________________

This is the new html page, saved as "mycss.css" looks:
_________________________________________________________________
/* Generic Selectors */

body {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

color: #333333;

background-color: #F9F9F9;

}

p {

width: 80%;

}

li {

list-style-type: none;

line-height: 150%;

list-style-image: url(../images/arrowSmall.gif);

}

h1 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: bold;

color: #000000;

}

h2 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 16px;

font-weight: bold;

color: #000000;

border-bottom: 1px solid #C6EC8C;

}

/**************** Pseudo classes ****************/

:link {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

li :link {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

:visited {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

li :visited {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

:hover {

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

text-decoration: underline;

}

li :hover {

display: block;

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C6EC8C;

}

:active {

color: rgb(255, 0, 102);

font-weight: bold;

}

/************************* ID's *************************/

#navigation {

position: absolute;

z-index: 10;

width: 210px;

height: 600px;

margin: 0;

margin-top: 50px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

#centerDoc {

position: absolute;

z-index: 15;

padding: 0 0 20px 235px; /*top right bottom left*/

margin-top: 50px;

}
<HTML></HTML>
_________________________________________________________________
And everything is saved in a folder called "My CSS Website" and I did refresh all the pages.

Now, maybe you can tell me what I am doing wrong. Please, help me!
Jackie Nell

[Jan 20, 2005 4:34:25 PM]

[Link]

Thelma
Advanced Member

Texas, USA
Joined: Dec 8, 2003
Post Count: 3021
Status: Offline


Re: CSS Tutorial #1

You see all this on one page? Just the way you posted it here?

Do you have the page uploaded somewhere to where we can see it in action?

Are you lookign at the pages through a browser?

If they are online, it's no question, but if they are on your computer, open your browser, click file and open - and find and open the html page.

Does that help any?
----------------------------------------
...

[Jan 20, 2005 6:58:25 PM]

[Link]

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6285
Status: Offline


Re: CSS Tutorial #1

Never use empty spaces in names of files.

Either:

firstCSSTutorial.html
first-CSS-Tutorial.html
first_CSS_Tutorial.html

1 & 2 are the best, you can use underscores but that is not the best way, causes accessibility problems.

Also never name a file with a Capital first letter.

When I file saves as *.css.txt, just drop the .txt and all should be well.

[Jan 21, 2005 2:54:33 AM]

[Link]

landscaper


Re: CSS Tutorial #1

I was having same problem...notepad was saving it as text and I wasn't sure how to get it saved as a css file...see how notepad is saving it...it is probably still a text doc. Close files then try this
open myCSS.css
click FILE
click SAVE AS
retype "myCSS.css"
change file to "All Files"
click save

open html file again- I hope it works.

[Jan 21, 2005 6:45:30 AM]

[Link]

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6285
Status: Offline


Re: CSS Tutorial #1

External CSS and JavaScript are in fact simply text documents. so all you really need to do is right click and rename or just click twice so you can change the name and replace the .txt to .css or .js.

Your PC may warn you you could make the file unusable but it won't.

[Jan 21, 2005 7:45:17 AM]

[Link]

[ ]

Current timezone is GMT
May 19, 2013 4:58:00 PM