HTML and CSS

Chazer27 · September 1, 2011

Hi All

I'm very new to this and just starting out so sorry if this is a stupid question but im having problems with the css code when i change the font weight or colour in the css file it doesnt change anything in the actual page. can you advise where im going wrong, it is part of the how-to-build-website.com tutorial below is what i have:

<html>

<head>

<title>First CSS Tutorial</title>

</head>

<body>

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

<h2>The Main navigation</h2>

<ul>

</ul>

</body>

</html>

and here is the css file that is linked to it:

/* 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: normal;

color: #000000;

}

h2 {

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

font-size: 16px;

font-weight: normal;

color: #000000;

border-bottom: 1px solid #C6EC8C;

}

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

a:link {

color: #00CC00;

text-decoration: underline;

font-weight: normal;

}

li a:link {

color: #00CC00;

text-decoration: none;

font-weight: normal;

}

a:visited {

color: #00CC00;

text-decoration: underline;

font-weight: normal;

}

li a:visited {

color: #00CC00;

text-decoration: none;

font-weight: normal;

}

a:hover {

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: normal;

text-decoration: underline;

}

li a:hover {

display: block;

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: normal;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C6EC8C;

}

a:active {

color: rgb(255, 0, 102);

font-weight: normal;

}

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

}

Its prob something really basic thats im doing wrong of have taking down wrong but any help would be really welcome.

Thanks

Carl

Andrea · September 1, 2011

Where are you making the change - what are you changing (from / to) and which part are you trying to get which color?

Chazer27 · September 1, 2011

Where are you making the change - what are you changing (from / to) and which part are you trying to get which color?

Hi Andrea

Thanks for the reply im trying to change it in ths CSS file, i was trying a few different changes i was changing the font weight from bold to normal in all areas where it had bold and stiil all text came up bold, i changed the colours to #000000 and the margins i tried changing these in id's for navigation & centerdoc but cant seem to get anything to change?

As i said im new to this and i was just following the tutorials just trying to get familar with the basics.

Thanks again

carl

Andrea · September 1, 2011

This line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">'>http://www.w3.org/TR/html4/strict.dtd">

You're missing the '! after the opening bracket - it should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

and this

Should be

and you're missing the closing tag to your navigation division.

And then your changes should show up just fine.

Chazer27 · September 1, 2011

This line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">'>http://www.w3.org/TR/html4/strict.dtd">'>http://www.w3.org/TR/html4/strict.dtd">

You're missing the '! after the opening bracket - it should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

and this

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

Should be

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

and you're missing the closing tag to your navigation division.

And then your changes should show up just fine.

Hi Andrea

Thanks for taking the time to look throught this and give me the corrections i have changed it to the below as you have advised and i still cant amend the actual page: still wont change for me :-( am i still missing soemthing?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>First CSS Tutorial</title>

</head>

<body>

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

<h2>The Main navigation</h2>

<ul>

</ul>

</div>

</body>

</html>

Andrea · September 1, 2011

Do you even see the current CSS? Does your site look like this: http://aandbwebdesign.com/KSforum/carl.html - minus the large, grey text - I changed that so you can see it works.

If you have the site uploaded somewhere, post a link. If not, paste the code AFTER you made your changes and point those out (color or something) and we can see what you have going on.

Chazer27 · September 1, 2011

Do you even see the current CSS? Does your site look like this: http://aandbwebdesign.com/KSforum/carl.html - minus the large, grey text - I changed that so you can see it works.

If you have the site uploaded somewhere, post a link. If not, paste the code AFTER you made your changes and point those out (color or something) and we can see what you have going on.

Hi Andrea

No it doesnt look like that ill attach what i have and you can see what its like:

Thanks Again

CarlpracticeHTML.htm

Andrea · September 1, 2011

Ok - it's not reading your CSS at all.

Make sure the file is really called myCSS.css - not caps - file names are case sensitive. Make sure the css file is in the same folder as your html file.

And make sure the css is not really called myCSS.css.txt - sometimes, extensions are added but hidden.

Chazer27 · September 1, 2011

Yes i check all what you have asked and it all looks ok to me, the css file matches whats it the HTML file and both are in the same folder........im stumped now and not sure where ive made an error.......Thanks for your toime with this i might start over again and see if i can get it......

Carl

Andrea · September 1, 2011

Something's amiss in the connection between your html and your css document.

Just looked at the code you send earlier - the line that inserts your style is still wrong

You have:

but should have:

September 2, 2011

The problem may be as simple as forgetting to upload the revised CSS file or uploading it to the wrong folder in the website. I've made that mistake more than once.

Sign In

HTML and CSS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest DavidinDelta

Link to comment

Share on other sites

Join the conversation