adrake9
asked on
How do I style the body tag?
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
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;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Try to do this:
#ContentContainer h1
{
...
}
#MainContent h1
{
...
}
ASKER
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
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;
}ASKER
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!
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.
ASKER
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
<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
ASKER
-a