5 Replies - 1547 Views - Last Post: 28 October 2013 - 10:22 AM

#1 samerina  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 17-February 12

CSS not changing font size on div.class

Posted 26 October 2013 - 04:16 PM

I have looked over this so many times and I'm sure there's something going on with my CSS, but I can't figure out what. I can't for the life of me get my elements in the
div.coupon p
section to resize the font. It's doing everything else I've asked it to, but is ignoring the font size. The font size works in all my other elements. Another odd thing is that my
aside h1
element is not changing color as I've asked it to. Thanks for any help!

htm file
<!DOCTYPE html>
<html>

   <head>
      <meta charset="UTF-8" />
      <title>Red Ball Pizza</title>
      <script src="modernizr-1.5.js"></script>
	  <link href="pizza.css" rel="stylesheet" />

   </head>

   <body>
      <div id="container">
         <header><img src="rblogo.png" alt="Red Ball Pizza" /></header>

         <nav class="horizontal">
            <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Menu</a></li>
               <li><a href="#">Locations</a></li>
               <li><a href="#">Catering</a></li>
               <li><a href="#">About Us</a></li>
            </ul>
         </nav>

         <nav class="vertical">
            <ul>
               <li><a href="#">Pizza</a></li>
               <li><a href="#">Salad</a></li>
               <li><a href="#">Pasta</a></li>
               <li><a href="#">Sandwiches</a></li>
               <li><a href="#">Appetizers</a></li>
               <li><a href="#">Pocket Pizzas</a></li>
               <li><a href="#">Fish &amp; Shrimp</a></li>
               <li><a href="#">Chicken &amp; Wings</a></li>
               <li><a href="#">Beverages</a></li>
               <li><a href="#">Dessert</a></li>
               <li><a href="#">Catering</a></li>
               <li><a href="#">Download Menu</a></li>
               <li><a href="#">Catering Menu</a></li>
            </ul>
         </nav>

         <section id="main">
            <img src="toppings.png" alt="" />
            <p>At Red Ball Pizza, we want to satisfy every appetite. That's 
               why our menu contains a variety of different items. With 
               so many choices, everyone's favorites are available!
            </p>
            <p>
               Red Ball Pizza is NOT a franchise, a chain, or a corporation. 
               It is 100% locally owned and operated. Red Ball Pizza is 
               devoted to providing the highest quality and the best service 
               possible. Our only goal is to provide you with a great 
               pizza … EVERY TIME!
            </p>

            <div class="coupon">
               <h1>Classic Combo</h1>
               <p>16" 1-Topping Pizza
                  &amp; a 2-Liter of Your Choice
                  For Only $14.99
               </p>
               <p>Expires 3/14</p>
            </div>
            <div class="coupon">
               <h1>Pizza &amp; Stix</h1>
               <p>16" Specialty Pizza
                  Reg. Cheese Stix &amp; a 2-Liter
                  For Only $21.99
               </p>
               <p>Expires 3/14</p>
            </div>
            <div class="coupon">
               <h1>1/2 Price</h1>
               <p>Buy any 16" Specialty Pizza
                  at Reg. Price &amp; Get a 2nd
                  Pizza For Half Price
               </p>
               <p>Expires 3/14</p>
            </div>
            <div class="coupon">
               <h1>Pizza &amp; Wings</h1>
               <p>14" 2-Topping Pizza 
                  &amp; 12 Wings
                  For Only $15.99
               </p>
               <p>Expires 3/31</p>
            </div>
            <div class="coupon">
               <h1>$3.00 Off</h1>
               <p>Get $3.00 Off
                  any 16" Pizza at
                  Menu Price
               </p>
               <p>Expires 3/31</p>
            </div>
            <div class="coupon">
               <h1>Sub Dinner</h1>
               <p>1 Toasted Sub &amp; Chips
                  &amp; 1 20oz Soda
                  For Only $6.99
               </p>
               <p>Expires 3/31</p>
            </div>
         </section>

         <aside>
            <h1>Pizza Pizzazz</h1>
            <ul>
               <li>93% of Americans eat pizza at least once a month.</li>
               <li>Mozzarella was originally made from the milk of Indian 
                   water buffalo in the 7th century.</li>
               <li>75 acres of cheese is eaten every day.</li>
               <li>23 pounds of cheese is eaten every year by the average 
                   person.</li>
               <li>The tomato was brought back to Italy by Spaniards returning 
                   from Mexico in the 16th century.</li>
               <li>The busiest night for take-out pizza orders is                    Halloween.</li>
               <li>The first pizzeria opened in 1830 in Naples, Italy and is                    still operating today. We've been open since 1982 and 
                   we're happy to serve you today and tomorrow!</li>
            </ul>
         </aside>

         <footer>
            <address>
               Red Ball Pizza &bull;
               811 Beach Drive &bull;
               Ormond Beach, FL  32175 &bull;
               (386) 555 - 7499 
            </address>
         </footer>

      </div>

   </body>

</html>



CSS file
section, aside, footer, nav {
	display: block;
}

* {
	margin: 0px;
	padding: 0px;
}

/*Body Styles */
header {
	display: block;
	background-color: white;
	height: 100px;
}

body {
	background-color: red;
	font-family: Verdana, Geneva, sans-serif;
}

#container {
	width: 1000px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	border-left: 1px solid black;
	border-right: 1px solid black;
	background: white url(redbar.png) top left repeat-y;
}

/* Horizontal navigation styles */
nav.horizontal {
	height: 70px;
	width: 100%;
	background-color: white;
}

nav.horizontal li {	
	background-color: white;
	font-size: 16px;
	height: 50px;
	line-height: 50px;
	width: 180px;
	display: block;
	float: left;
	margin-left: 5px;
	margin-right: 5px;
}

nav.horizontal li a {
	display: block;
	background-color: red;
	color: white;
	-moz-border-radius: 30px 25px;
	-webkit-border-radius: 30px 25px;
	border-radius: 30px 25px;
	text-decoration: none;
	text-align: center;

}

nav.horizontal li a:hover {
	background-color: rgb(255, 101, 101);
	color: black;
}

/*Vertical navigation styles */
nav.vertical {
	clear: left;
	float: left;
	width: 200px;
}

nav.vertical li {
	list-style-type: none;
	text-indent: 20px;
	margin-top: 20px;
	margin-left: 20px;
}

nav.vertical li a {
	color: white;
	text-decoration: none;
}

nav.vertical li a:hover {
	color: black;
}

/*Main styles */
#main {
	background-color: rgb(255, 211, 211);
	float: left;
	width: 600px;
}

#main p {
	font-size: 20px;
	margin: 15px;
}

#main img {
	float: right;
	margin: 15px;
	width: 350px;
	-moz-border-bottom-left-radius: 350px;
	-webkit-border-bottom-left-radius: 350px;
	border-bottom-left-radius: 350px;
}

/* Coupon styles */
div.coupon {
	border: 5px dashed black;
	float: left;
	width: 170px;
	height: 150px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 10px;
	margin-right: 10px;
	background: url(notice.png) bottom right no-repeat, 
				url(slice.png) center no-repeat white;
}

div.coupon h1 {
	color: white;
	background-color: rgb(192, 0, 0);
	font-size: 16px;
	letter-spacing: 2px;
	text-align: center;
	height: 25px;
	font-variant: small-caps;
}

div.coupon p {
	font-size: 14px;
	text-align: center;
	margin: 5px;
}

/* Aside Styles */
aside {
	float: left;
	width: 200px;
}

aside h1{
	font-color: rgb(192, 0, 0);
}

aside li{
	background-color: rgb(255, 135, 135);
	border-radius: 5px 5px 5px 5px;
	color: black;
	list-style-type: none;
	margin: 10px;
	padding: 5px;
}

/* Footer styles */
footer{
	clear: left;
	margin-left: 200px;
}

footer address {
	border-top: 1px solid red;
	color: red;
	font-size: 10px;
	font-style: normal;
	text-align: center;
	margin-top: 25px;
	padding-bottom: 20px;
}



Is This A Good Question/Topic? 0
  • +

Replies To: CSS not changing font size on div.class

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4436
  • View blog
  • Posts: 12,307
  • Joined: 18-April 07

Re: CSS not changing font size on div.class

Posted 26 October 2013 - 04:35 PM

#main p you have defined there is pretty specific. I believe you will find that it is the one that is overriding your coupon p tag. This is the dangers of using ids in your CSS, they are very powerful and can override some other styling you have. Since your coupon p elements are within your #main div, the #main p styling is more powerful.

To prove this, comment out the font-size style in your #main p style and suddenly you will gain control of your coupon p styling font sizing. :)
Was This Post Helpful? 1
  • +
  • -

#3 Berret  Icon User is offline

  • New D.I.C Head

Reputation: 7
  • View blog
  • Posts: 16
  • Joined: 26-October 13

Re: CSS not changing font size on div.class

Posted 27 October 2013 - 05:31 PM

Your code for the #main p is overriding all the other styles for paragraphs within that section. However, the problem specifies paragraphs that are direct children of the main section, so to do that, the code should be:

#main > p {
     font-size: 20px;
     margin: 15px;
}



As far as your aside h1 not changing color, you used font-color, which is not valid. Your code should read:

aside h1 {
     color: rgb(192, 0, 0);
}



Hope this helps you out.

Eric
Was This Post Helpful? 2
  • +
  • -

#4 samerina  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 17-February 12

Re: CSS not changing font size on div.class

Posted 28 October 2013 - 09:25 AM

Thank you! I knew it was probably something small that I was just overlooking. It's always just one little thing, isn't it? :)
Was This Post Helpful? 0
  • +
  • -

#5 Berret  Icon User is offline

  • New D.I.C Head

Reputation: 7
  • View blog
  • Posts: 16
  • Joined: 26-October 13

Re: CSS not changing font size on div.class

Posted 28 October 2013 - 09:50 AM

View Postsamerina, on 28 October 2013 - 11:25 AM, said:

Thank you! I knew it was probably something small that I was just overlooking. It's always just one little thing, isn't it? :)/>/>/>


Yes, it's amazing how one little thing can give you 15 errors. Also, don't forget about the W3C Markup Validation Service at http://validator.w3.org/ for HTML, and the W3C CSS Validation Service at http://jigsaw.w3.org/css-validator/. Both are great resources, although they're not infallible, but a great starting point to make sure your code is correct along the way.
Was This Post Helpful? 2
  • +
  • -

#6 samerina  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 17-February 12

Re: CSS not changing font size on div.class

Posted 28 October 2013 - 10:22 AM

View PostBerret, on 28 October 2013 - 09:50 AM, said:

View Postsamerina, on 28 October 2013 - 11:25 AM, said:

Thank you! I knew it was probably something small that I was just overlooking. It's always just one little thing, isn't it? :)/>/>/>/>


Yes, it's amazing how one little thing can give you 15 errors. Also, don't forget about the W3C Markup Validation Service at http://validator.w3.org/ for HTML, and the W3C CSS Validation Service at http://jigsaw.w3.org/css-validator/. Both are great resources, although they're not infallible, but a great starting point to make sure your code is correct along the way.


Yeah I've been using that along the way. In this case they were all validating correctly, which is why I was at an impasse. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1