Improve company productivity with a Business Account.Sign Up

x
?
Solved

How do I style the body tag?

Posted on 2009-07-16
7
Medium Priority
?
292 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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

608 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