tags:

views:

67

answers:

5
Q: 

HTML Class not working?

I'm trying to change the text color in a <p> to gray. I thought doing something like <p class="gray">content</p> and p.gray { color: #333333; } would work but it's not doing anything. The color remains black. Help please?

EDIT TO INCLUDE ENTIRE CODE

HTML:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>TITLE</title>

<link rel="stylesheet" type="text/css" href="c/main.css?90" />

</head>
<body>
<div id="wrapper">
  <div id="divider">
  <h1 class="logo5">NAME</h1>
  <ul class="underlinemenu">
    <li><a href="index.html">HOME</a></li> 
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="subscribe.html">SUBSCRIBE</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    <li><a href="login.html">LOGIN</a></li>
  </ul>
  </div> <!-- end divider -->

  <div id="divider">
  <div class="article">
    <h2 class="header">HEADER</h2>
    <div class="content">
      <p class="gray">CONTENT</p>
      <p>CONTENT</p>
    </div>
  </div>
  </div> <!-- end divider -->

  <div id="divider">
  <div class="article">
    <h2 class="header">HEADER</h2>
    <div class="content">
      <p>CONTENT</p>
      <p>CONTENT</p>
    </div>
  </div>
  </div> <!-- end divider -->

  <div id="divider">
  <div class="article">
    <h2 class="header">HEADER</h2>
    <div class="content">
      <p>CONTENT</p>
    </div>
  </div>
  </div> <!-- end divider -->

  <div id="footer">
    <p class="copyright">COPYRIGHT</p>
  </div>
</div> <!-- end wrapper -->
</body>
</html>

CSS:

/*
    Name: Smashing HTML5
    Date: July 2009
    Description: Sample layout for HTML5 and CSS3 goodness.
    Version: 1.0
    Author: Enrique Ramírez
    Autor URI: http://enrique-ramirez.com
*/

/* Imports */
@import url("reset.css");
@import url("global-forms.css");

/***** Global *****/
/* Body */
    body {
        background: #FFFFFF;
        color: #000305;
        font-size: 87.5%; /* Base font size: 14px */
        font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        line-height: 1.429;
        margin: 0;
        padding: 0;
        text-align: left;
    }

/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */

h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: .8em;
}

/* Anchors */
/*a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
    color: #C74350;
    padding: 0 1px;
    text-decoration: underline;
}
a:hover, a:active {
    background-color: #C74350;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #333;
}*/

/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}

/* Lists */
ul {
    list-style: outside disc;
    margin: 1em 0 1.5em 1.5em;
}

ol {
    list-style: outside decimal;
    margin: 1em 0 1.5em 1.5em;
}

dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */
blockquote {font-style: italic;}
cite {}

q {}

/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}

    /* Thead */
    thead th {padding: .5em .4em; text-align: left;}
    thead td {}

    /* Tbody */
    tbody td {padding: .5em .4em;}
    tbody th {}

    tbody .alt td {}
    tbody .alt th {}

    /* Tfoot */
    tfoot th {}
    tfoot td {}


/* LAYOUT */
/* ----------------------------------------- */

div#wrapper {
    margin: 0 auto;
    width: 936px;
}

div#divider {
    border-bottom: 1px dotted #c5c5c5;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.underlinemenu{
font-family: Delicious;
font-weight: bold;
width: 100%;
}

ul.underlinemenu {
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}

ul.underlinemenu li{
display: inline;
}

ul.underlinemenu li a{
color: #FF0080;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 1px dotted; /*bottom border is 3px*/
}

ul.underlinemenu li a:hover, ul.underlinemenu li a.selected{
color: #009ee8;
border-bottom-color: #009ee8;
}

p.copyright a{
color: #FF0080;
text-decoration: none;
}

p.copyright a:hover{
color: #009ee8;
}

/* embedded fonts */

@font-face {
font-family: Delicious;
src: url(fonts/Delicious-Heavy.otf)
}

.header {
font-family: Delicious;
}

.logo5 {
font-family: Delicious;
}

p.gray {
color: #333333;
}

I know it's a hacked up mess, sorry. I'm learning.

+1  A: 

This is where a tool like Firebug or Chrome's developer tools come in handy. Most likely, you have CSS that's at a later point in your CSS file that's overriding this style, or maybe you have some Javascript which is doing it. It's hard to tell without a good web debugger.

If you use Firebug on Firefox, you can open up the HTML view and select your element, and it will show you why that element is styled the way it is. From there, you can eliminate the problem.

EDIT: It works fine. Seriously -- #333333 is a really dark color, almost indistinguishable from black on a white background.

Dave Markle  2010-08-06 20:00:56
My class is at the very bottom, so shouldn't it override anything above?And I use Google Chrome. Are the developer tools built in?
MW2000  2010-08-06 20:04:53
Yes, Chrome's dev tools are built in. Where to look for them depends on your platform, but I highly recommend playing with it.
Dave Markle  2010-08-06 20:19:59
Will do I'm sure it's useful. In the mean time though can you help me out? I posted the entire code now. And inline styling seems to work, just not my linked CSS.
MW2000  2010-08-06 20:28:19
+1  A: 

QUICK FIX: In your css file use '!important'. This will override the conflicting CSS you have unless you have used it in the first place.

p.gray { color: #333333 !important; }

REAL FIX: Was mentioned above. Use firebug (FireFox plugin) and inspect the element to see what CSS is affecting the element in question.

Juuccy  2010-08-06 20:05:15
I tried adding !important as a quick fix but still no change. My original post's been appended with the entire code if that helps.
MW2000  2010-08-06 20:09:15
+4  A: 

It should work fine. try more lighter color #666.

Nahar  2010-08-06 20:10:55
I agree. If you want to make sure, try a very different color, like yellow.
Bertine  2010-08-06 20:12:00
It doesn't, nice catch though. It works when I style the `<p>` inline like `<p style="color: #FF0000">CONTENT</p>` just not with my linked CSS.
MW2000  2010-08-06 20:25:29
It works in FF. Why are you linking to css file with `?90`? If you are developing under some CMS, your file could be cached by it. Check the resources page of chrome to see if you have the updated file.
Nahar  2010-08-06 20:46:13
+1  A: 

Using ids and classes in parent elements can sometimes take precedence in confusing ways. To see if this is the issue, get very, very specific and try:

#wrapper #divider .article .content p.gray{
color:red;
}

Bright colors are good for testing. If it now works you should probably read up on how ids and classes override each other when they conflict.

I looked over this article and it seems like a decent start: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Syntax Error  2010-08-06 20:11:17
Nice suggestion but it didn't work :(. I even made sure my CSS wasn't cached.Why do things never work right?
MW2000  2010-08-06 20:15:54
My bad, I shouldn't have put .header in there. I've edited to fix. Try it now?
Syntax Error  2010-08-06 20:36:13
+1  A: 

Could there be a typo in the CSS file somewhere that is causing the browser to ignore your p.gray definition?

Try putting the p.gray CSS higher up in the file, such as after the * p:last-child CSS, and see if that makes a difference.

KMW  2010-08-06 20:36:23
+1, there's a mistyped comment in the CSS (`//set value to "left", "center", or "right"*/`) which might be causing the problem. Works for me on Firefox, but OP is using Chrome, which may be too strict. **Edit:** Works fine on Chrome too, don't know why it doesn't work for OP.
casablanca  2010-08-06 20:38:17

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?