CSS won't take effect when I'm making my website?

Question

I'm making a website on a plain text editor and have the page named index.html and the stylesheet as style.css

When I change the css file to make a style, it doesn't have any effect. (I'm checking the page with Firefox and the files are on my Desktop)

Heres the code for the page:

Test

Testo test lorum ipsum nimquod alid

sjdiaj

Here's the code for the CSS:

div.mainbody {
padding-left: 11em;
}

div.mainnav {
position: absolute;
top: 2em
left: 1em;
width: 9em
}

How would I get this to work?

It has now been changed to:

Test

Testo test lorum ipsum nimquod alid

sjdiaj

AND

.mainbody {
padding-left: 11em;
}

.mainnav {
position: absolute;
top: 2em
left: 1em;
width: 9em
}

But it still won't work. What gives?

Answer 1

I would suggest a couple of things,

1) in your style.css file change your div's from .mainbody to #mainbody and .mainnav to #mainnav

2) in your website directory, where is the style.css in relation to this page that you have made? If it's in the same directory, then in the html page change

href="/style.css" to href="style.css"

3) you've missed one terminating ";" symbol in the css on the "top: 2em" line. And, as a good practice, you should also terminate the "width: 9em" line with a ";"

Here's what I rewrote and tested on my system. I added a default body style, just my preference.

=========
style.css - located in same directory as test.html
=========
body{
margin:0;
padding:0;
background-color: #ccc;
}

#mainbody {
padding-left: 11em;
}

#mainnav {
position: absolute;
top: 2em;
left: 1em;
width: 9em;
}


==========
test.html - no modifications needed here.
==========

Answer 2

Learn about selectors in css.

Answer 3

In your CSS, you forgot to add a semicolon to the "top" and "width" property values. i.e. is should be:

div.mainnav {
position: absolute;
top: 2em;
left: 1em;
width: 9em;
}

Answer 4

To open and edit your html pages you can use Kompozer. Download it for free here http://bit.ly/1rH1A9M
I have been using it for years
Cheers ;)

Answer 5

Now this is how the html/css tag is setup. it's no big deal, but you can download HTMLkit. That html editor will help you with your tags.

An external style sheet may be linked to an HTML document through HTML's LINK element:






The tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type--text/css for a Cascading Style Sheet--allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea.