how to overrule prior css

Question

why can't I control the < p > tag below with the div class "title left"

<td align="left" >
                    <div class="pop-posts-image-left">
                            <a href="http://www.livecrafteat.com/live/meal-planning-template/"> 
                                <img src="http://www.livecrafteat.com/wp-content/uploads/2012/08/menu-plan-sidebar-thumbnail-2.jpg" alt="" />  
                            </a>
                           <div class="title left">
                                <p text-align="center">  
                                     This Is An Example Post Title 
                                </p> 
                           </div>  
                     </div>
</td>

Instead it is being controlled by:

body, h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6, p, select, textarea {
color: #70635A;
font-family: "Century Gothic",AppleGothic,Arial,sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 22px;
margin: 0;
padding: 0;
text-decoration: none;
}

Answer 1

The reason why it's not applying it now is because CSS styles by tag name take precedence over styles defined with a class.

Using the style you defined you can specify that you want it applied to the <p>:

.title-left, .title-left p {
    color: #000;    
    font-size: 20px;
}

And in the HTML:

<div class="title-left"> 
  <p> This Is An Example Post Title </p>
</div>

Or alternatively if you only want the style applied to the <p> and not the <div>:

.title-left {
    color: #000;    
    font-size: 20px;
}

And in the HTML:

<div> 
  <p class="title-left"> This Is An Example Post Title </p>
</div>

You can test the modification here.

Answer 2

title left is not a class. It's two classes: title and left

You can apply styles to the P tag using one of them:

.title p {your styles}

or both, if you want

.title.left p {your styles}