CODEWITHSUNDEEP
htmlcss
MW2000
MW2000

Reputation: 593

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

Upvotes: 0

Views: 29126

Answers (6)

Nick
Nick

Reputation: 11

You need to make sure your p.grey is before your normal p {} in your css code

Upvotes: 1

Dave Markle
Dave Markle

Reputation: 97691

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.

Upvotes: 1

KMW
KMW

Reputation: 109

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.

Upvotes: 1

Syntax Error
Syntax Error

Reputation: 4527

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/

Upvotes: 1

Nahar
Nahar

Reputation: 255

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

Upvotes: 4

Jesse Burcsik
Jesse Burcsik

Reputation: 367

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.

Upvotes: 2

Related Questions