If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Problem with only some of css file being linked to html file

I have built a website (at long last). Whilst developing it I included the css code at the top of each html file. I am now trying to transfer the css code to it's own file and linking the html file to it.

My problem is that the link works for the menus but not for the rest of the file. It looks like only the html file is displayed because text boxes and positioning etc are missing.

My link is set up in the head section; <link rel="stylesheet" type="text/css" href="menu.css"/>

That is what the html would look like.
In the CSS for that same html, it would look like this:

.book_2 {
property: 20px;
etc: 30px;
}

If you were using ID's, you would have to use # instead of a period in front of the slector name in your CSS file.

an ID would look like this:
<div id="book_2">
<!--Some HTML inside a DIV named book_2-->
</div>

The css for that would look similar to the class one, but with a small change.
#book_2 {
property: 20px;
etc: 30px;
}

Also, consider running your CSS file through csslisible.com/?lang=en
It will format it so its easier to read and navigate.
You start off with spacing, but a quarter of the way through you drop the spacing.
It just makes things more organized. Its a great tool.

I fixed the top part of your CSS file so you could see what I mean. You were declaring each ID name, like they were elements.
[Elements are the HTML name elements like "h1, h2, h3, body", etc. Even title and head, (which isn't actually style-able)]

So since you are mostly using ID's to declare selectors, you must add # to your selectors, otherwise you are declaring elements...

You used the squiggly brackets inside of already using them. Which isnt possible in CSS, so it would break the style.

If you are declaring a style for the h3 element inside of the div id main-box you must write it like this:

Code:

#main-box h3{ }

That will apply your properties to all the H3 elements inside of the #main-box div, and only those. No other h3 outside of #main-box will not be effected.

So remember if you want to style all the h1-h6 elements in the page, and not seperately, you could just use

Code:

h3 { }

Also notice that h3 doesnt have a " . " or a " # " in front of it. Because it is not a Class nor an ID. It is an HTML element. Elements dont need anything in front of them.

Remember it is the best practice not to over declare selectors.
For example you declared a selector similar to this:

Code:

#title ul li a { }

When you just remove the ul or li like this:

Code:

#title li a { }

Also take into account when you specify a style like the above example, you are targeting only one something very small in the whole HTML file.
Maybe you want to style all the anchor elements inside of a list, and not just the anchors inside of the list in the div ID title.
You could just use:

Code:

ul a { }

and that will style all the of links in a list with that style, instead of styling everything one by one.

Hopefully all of this helped a bit to understand. Let me know if you need anymore help, or for me to further explain something better.

By the way I recommend downloading both "Sublime Text 2", and "Aptana Studio 3"
Sublime text is smaller, and can be used portable. I love it. It is really nice. But it is mainly just an Editor. It is free for an evaluation period and there is not an enforced limit of usage at this time. So you can use it and evaluate it as long as you would like at this time.
Aptana Studio is Open Source and free. It is not just an editor, it is an IDE. (integrated development environment) So when you copy and paste or open your CSS file in aptana studio, it will show you all the mistakes you made as you make them. It helps sometimes when you cant figure out where in your code you messed up.
Also if you start a project, you can open both your HTML file and matching CSS file and it will already know what the right ID and Class and Element selectors you are using in your HTML so it will know which you can use in your CSS file.
I highly recommend it, especially for this issue.

thanks for your help.

Thanks for your help.

The problem for me is that I bought a book that teaches html and supposedly css but it doesn't explain what the code does or why you need to set it out the way that they show. In reality the css is just coding examples with no explanations as to what the code does.