Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How do I style the body tag?

Posted on 2009-07-16
7
Medium Priority
?
289 Views
Last Modified: 2012-05-07
Why wont this work? I've attached the code below and it wont work.
It works if I give it a class or ID but not if I just try to style the tag. I think i'm missing something

Works if I do

<body id="page-background"> and change the below code to #page-background
 
but I would like to be able to give the body tag another id so that I can style an active page in my nav bar. Any help is appreciated.

-a
body {
	background-color: #4b4b4b;
	background-image: url(../img/header_bg.jpg);
	background-position: center top;
	background-repeat: repeat-x;
}

Open in new window

0
Comment
Question by:adrake9
  • 4
  • 3
7 Comments
 
LVL 8

Accepted Solution

by:
rseabird earned 2000 total points
ID: 24872836
Normally the way I work with div's is to put only margin and padding to 0 for the body. All the rest I place in different div's. Usually you have a container, with wraps actually all the content you will show. Inside the container, you place different div's for different objects (e.g. navigation bar, page header images, sidebars etc.)
Something like this:


<body>
  <div id="container">
     <div id="NavigationBar"></div>
     <div id="ContentContainer">
        <div id="MainContent"></div>
        <div id="RightSideBar"></div>
     </div>
  </div>
</body>

Open in new window

0
 
LVL 2

Author Comment

by:adrake9
ID: 24872909
I do have a "wrapper class" for my page, which sets the width of my main content to 900px wide but i cant figure out why I cant style h1 tags or body tags or p tags. I have a reset.css file, could this have anything to do with it?
-a
0
 
LVL 8

Expert Comment

by:rseabird
ID: 24873005
Try to do this:
#ContentContainer h1
{
    ...
}
 
#MainContent h1
{
  ...
}

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 2

Author Comment

by:adrake9
ID: 24873120
I have a page structure like that. lets get away from the <body> tag. I'll give another example.
If I style an <h1> like this:

h1 { color: red;}

it should make all pages that reference that stylsheet give me red text.
Unfortunately it doesn't.

Could it be my doctype?.........wait. a minute

just looked in firebug and turned off the background: transparent part of my reset.css style sheet. and it worked. take a look below.
-a
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
 
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Open in new window

0
 
LVL 2

Author Comment

by:adrake9
ID: 24873189
tried some other tags and they worked, finally. I'm not sure why this works this way, but I'm glad I figured it out. I'll give you the points, have a great day!
0
 
LVL 8

Expert Comment

by:rseabird
ID: 24873264
The 'reset' css is to give you full control about how you want to design your div's. So all tags are first reset, but when you place it inside a div, you can give them the properties/layout you want.
0
 
LVL 2

Author Comment

by:adrake9
ID: 24873319
I think I'm getting the picture should I assing classes and IDs to the divs? and then calling them like this?

<div id="page-title">This is the page title</div>

then style the tags through those?

#page-title h1 {
      color: red;
      font-size: 25px;
}

Is this considered best practices?
-a
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question