Jump to content

CSS Tutorial


ksheila

Recommended Posts

So I have done "exactly" what this page... http://how-to-build-websites.com/css-tutorial/part1.php#basicPage ..says to do several times. I still end up with a page that looks like this...

 

(The Main navigation

;

The Main Heading

Go to the Web Designer's 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!)

 

(it is supposed to look like this)

 

(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)

 

I cannot get the page to read the css doc. I can't get the border, colors, nothing. Both are in the folder.

Any help would be much appreciated..

Link to comment
Share on other sites

Copy and paste all of your code so we can see everything you have. Check the exact spelling of the file name of your .css - it has to match the path exactly and is case sensitive.

Link to comment
Share on other sites

I have the exact same problem. I have checked that the file name matches exactly, and have tried swapping the code between the <head></head> tags and <body></body> tags.

My coding is as follows..

 

PractiseHTML.html:

 

 

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<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">

<title>My Practice HTML Page</title>

<meta http-equiv="Content-Type"

content="text/html; charset=iso-8859-1">

</head>

<body>

<div id="navigation">

<h2>The Main navigation</h2>;

</div>

<div id="centerDoc">

<h1>The Main Heading</h1>

<p>

Go to the Web Designer's 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>

</body>

</html>

 

And in the myCss.css file:

 

/* 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 ****************/

a:link {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

 

li a:link {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

 

a:visited {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

 

li a:visited {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

 

a:hover {

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

text-decoration: underline;

}

 

li a: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;

}

 

a:active {

color: rgb(255, 0, 102);

font-weight: bold;

}

 

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

 

#navigation {

position: absolute;

z-index: 10;

width: 210px;

height: 600px;

margin: 0;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

#centerDoc {

position: absolute;

z-index: 15;

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

margin-top: 50px;

margin-left: 235px;

}

 

Please help!

Link to comment
Share on other sites

Ksheila - I'm not sure if you've worked out what went wrong yet? I've just shuffled my code around a bit and managed to get very similar to the example posted, although my text seems to be a slight bit smaller, but in the same proportions. I needed to change my .html file only.

If it helps you below is my new coding..

 

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<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">

<title>My Practice HTML Page</title>

<meta http-equiv="Content-Type"

content="text/html; charset=iso-8859-1">

</head>

<body>

<div id="navigation">

<h1>The Main Heading</h1>

<p>Go to the Web Designer's 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="centerDoc">

 

<h2>The Main navigation</h2>

 

</div>

</body>

</html>

 

I have simply swapped <h1> and <h2>, and taken <p> with <h1>.. if that makes sense? Anyway, I hope that helps you :)

 

Oh, and as for the border and colours.. I don't think with the code we have been given thus far, that any parameters in regards to these have been set yet. I may be completely wrong (I only started learning ANY of this today, so I'm basically making it up as I go), but you did say "Any help would be much appreciated.." ;D

Link to comment
Share on other sites

Changing the order of the code has nothing to do with it.What does so, is this:

 

<link href="myCss.css" rel="stylesheet" type="text/css">

 

That should be actual quotes,not the code for them - like this:

 

<link href="myCss.css" rel="stylesheet" type="text/css">

 

Also, looking at the code you posted in Posts #4 and # 5, I note the following:

 

You're missing the '!' in <!DOCTYPE

You have 2 charsets and two title tags in your head section - only one needed (each)

In your CSS, the quotes around 'Times New Roman' must be actual quotes, not the code for quotes. (Note - there are several incidences of this)

In Post #4, there is a semi-colon following the closing h2 tag that does not belong.

 

Make the above changes, and your code will work: http://aandbwebdesig...rum/berry1.html

 

Changing the order like you did in #5 (after my corrections above) just gets you this: http://aandbwebdesig...um/berry2.html.

 

Let me know if you have any questions.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...