css style please help

[helen2263]

Hello Everyone,Can someone please help me with .css style for my website template.This is what I would like to do.1. main background colour grey2. add upper image background on main background,3. add navigation bar and text content on upper image background with drop shadow on text content part, so the upper image background would be underneath the navigation bar and text content area.4. add bottom background image on top of text content page.The problem I am having is to add the navigation and text content on top of the upper image background and to add the bottom image background on top of the navigation and text content area. I have posted a similar thread in the HTML/XHTML but for this instance I need help with the .css style. I am new with .css I don't want my work done for me but just guide me where to start and how do I create the .css style code for my website. Any help would be appreciated. Thanks helen

[tnd1000]

Hey there. Since I don't know how much experience you have with CSS, I'll try to stick with the basics. If you need some help getting started with CSS in general, this is the start of the tutorial: http://www.w3schools.../css_intro.asp. I would also strongly suggest checking out CSS3 (http://www.w3schools...ss3/default.asp), as several of the practices have been updated. For the background color, I'd recommend something like this in your stylesheet:

body {background-color: grey;}

You might try these pages for choosing the color best suited for your needs: http://www.w3schools..._colornames.asp & http://w3schools.com...rhex=%23330033. The first is good for finding the color of your choice, and the second helps you choose a shade. (Remember that you can use either the color name or the hexadecimal value, i.e. #00000, in the stylesheet) W3Schools also has a tutorial on placing different elements in front of each other: http://www.w3schools...positioning.asp Tutorial for making a drop-shadow: http://www.w3schools..._box-shadow.asp As for the upper and bottom background images, I would suggest using divs (http://www.w3schools...ags/tag_div.asp). For example:

<div id="top_background">[content goes here]</div>

In fact, it would probably be a good idea to use divs for all of your main sections/areas of content. Just remember to give your div a unique id if you plan on applying specific styles to it, so that you can refer to it in your stylesheet, i.e #top_background {style;}. Hope this helped. If you have any more questions, don't hesitate to ask.

[fromthericefields]

background-color: grey; for main background colorbackground-image: url(bgimage.png); for background imageAs for navagation bar there should be plenty of references in w3c schools website and other sites showcasing various examples.

[helen2263]

Hey there. Since I don't know how much experience you have with CSS, I'll try to stick with the basics. If you need some help getting started with CSS in general, this is the start of the tutorial: http://www.w3schools.../css_intro.asp. I would also strongly suggest checking out CSS3 (http://www.w3schools...ss3/default.asp), as several of the practices have been updated. For the background color, I'd recommend something like this in your stylesheet:

body {background-color: grey;}

You might try these pages for choosing the color best suited for your needs: http://www.w3schools..._colornames.asp & http://w3schools.com...rhex=%23330033. The first is good for finding the color of your choice, and the second helps you choose a shade. (Remember that you can use either the color name or the hexadecimal value, i.e. #00000, in the stylesheet) W3Schools also has a tutorial on placing different elements in front of each other: http://www.w3schools...positioning.asp Tutorial for making a drop-shadow: http://www.w3schools..._box-shadow.asp As for the upper and bottom background images, I would suggest using divs (http://www.w3schools...ags/tag_div.asp). For example:

<div id="top_background">[content goes here]</div>

In fact, it would probably be a good idea to use divs for all of your main sections/areas of content. Just remember to give your div a unique id if you plan on applying specific styles to it, so that you can refer to it in your stylesheet, i.e #top_background {style;}. Hope this helped. If you have any more questions, don't hesitate to ask.

Thank yes it has helped a lot I am afraid I am very new with css i've only concentrated on html. so I have no idea where to start my template with css. you've give me great tips and the links I shall make a start there.

[helen2263]

background-color: grey; for main background colorbackground-image: url(bgimage.png); for background imageAs for navagation bar there should be plenty of references in w3c schools website and other sites showcasing various examples.

Thank you appreciate your help, yes will do the background grey which I wanted light grey. I shall head to the w3c school tutorials area. Edited May 6, 2012 by helen2263