Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help With Font-Weight in Css...

    First, I'm a major newbie to css, and I know I'm probably going to sound really dumb before I finish this post! So please bear with me.

    Second, here's my page so you can see what I've done so far.
    Disney Heaven

    What I'd like to do is make the word "Animation" bold, as well as the words in my footer. It's my understanding that I need to do this on my css stylesheet, but I cannot get it to work. As you can see, because of the css code I've written, it's "bolding" all of my left nav. And...I can't get the words in my footer to resize any smaller. I've even tried writing in "ems". Hope I'm making any kind of sense here.

    Can anyone please help me with this code?

    Thanks so much!

    charmarie1962

    *****

    Code:
    <!DOCTYPE html>
    <html>
    
    <!-- Begin Head -->
    
    <head>
    <title>Disney Heaven</title>
    	<meta name="description" content="Disney Heaven takes pride in offering its guests a variety of entertainment with a touch of Disney magic!  &quot;To all who come to this happy place - welcome!&quot;">
    	<meta name="keywords" content="Disney, Disney Heaven, WDW, Walt Disney, Walt Disney World, Animation, Characters, Clipart, Disney Fairies, Disney Princesses, Hundred Acre Wood, Lyrics, Mickey Mouse, Midis, Movies, Tinker Bell, Winnie the Pooh,">
    	<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen">
    
    <!-- Begin Styles -->
    
    <style type="text/css">
    .style1 {
    	list-style-type: none;
    }
    
    .style2 {
    	text-align: center;
    }
    
    </style>
    
    <!-- End Styles -->
    
    </head>
    
    <!-- End Head -->
    
    <!-- Begin Body -->
    
    <body>
    
    	<div id="masthead">
    	
    		<a target="_parent" href="http://disneyheaven.com">
    	
    		<img src="images/DHTitle-620x125.jpg" width="620" height="125" ></a>
    
    	</div>
    
    	<div id="topnav">
    	
    		<ul>
    			<li><a href="http://disneyheaven.com">Home</a>&nbsp; &nbsp; <a>ºoº</a></li>&nbsp;&nbsp;&nbsp;&nbsp; 
    			<li><a href="http://disneyheaven.com/new/animation1.htm">Animation</a>&nbsp; &nbsp; <a>ºoº</a></li>&nbsp;&nbsp;&nbsp;&nbsp; 
    			<li><a href="http://disneyheaven.com">Characters</a>&nbsp; &nbsp; <a>ºoº</a></li>&nbsp;&nbsp;&nbsp;&nbsp; 
    			<li><a href="http://disneyheaven.com">Mickey's Playground</a>&nbsp; &nbsp; <a>ºoº</a></li>&nbsp;&nbsp;&nbsp;&nbsp; 
    			<li><a href="http://disneyheaven.com">Walt Disney</a>&nbsp; &nbsp; <a>ºoº</a></li>&nbsp;&nbsp;&nbsp;&nbsp; 
    			<li><a href="http://disneyheaven.com">Walt Disney World</a></li>
    		</ul>
    	</div>
    
    	<!-- Begin Container -->
    	
    	<div id="container">
    	
    		<!-- Begin Sidenav -->
    		
    		<div id="sidenav">
    	
    			<ul class="style1">
    					
    				<li><a href="http://disneyheaven.com/new/animation1.htm" target="_parent">ANIMATION</a></li>
    				<li><a href="http://disneyheaven.com" target="_parent">Animated Movies</a></li>
    				<li><a href="http://disneyheaven.com" target="_parent">Lyrics</a></li>
    				<li><a href="http://disneyheaven.com" target="_parent">Midis</a></li>	
    							
    			</ul>
    
    		</div>
    	
    		<!-- End Sidenav -->
    	
    		<!-- Begin Content -->
    		
    		<div id="content" class="style2">
    		
    			<p>&nbsp;</p>
    			<p align="center">
    			<img src="images/WaltDisneyMickeyMousePartnersByJenniferHickey.jpg" width="345" height="400" ></p>
    			<p>&nbsp;</p>
    			<p>Welcome to Disney Heaven, a fan site dedicated to the memory of Walt Disney and his works.</p>
    			<p>&nbsp;</p>
    			<p>The above portrait entitled, "Walt Disney Mickey Mouse Partners" is courtesy of artist, <a href="http://www.jenniferhickey.com/">
    			<strong>Jennifer Hickey</strong></a>.</p>
    			
    		</div>
    		
    		<!-- End Content -->
    	
    	</div>
    	
    	<!-- End Container -->
    
    	<!-- Begin Footer -->
    	
    	<div id="footer">
    	
    		<p><a href="http://disneyheaven.com">About Me</a> | 
    			<a href="http://disneyheaven.com">Email Me</a> |
    			<a href="http://disneyheaven.com">Link to Me</a> | 
    			<a href="http://disneyheaven.com">Links</a> |
    			<a href="http://disneyheaven.com">Terms</a>
    			<p><a href="http://facebook.com/disneyheaven" target="_blank">
    			<img src="images/FacebookIcon-Thumb.jpg" width="25" height="25" >Find Me on Facebook</a></p>
    
    	</div>
    
    	<!-- End Footer -->
    
    </body>
    
    <!-- End Body -->
    
    </html>
    *****

    Code:
    /* CSS layout */
    * {
    	font-family:Tahoma, Georgia, sans-serif;
    	font-size:12px;
    	color:#000000;
    	font-weight:normal;
    	font-style:normal;
    	margin:0;
    	padding:0;
    	border:0;
    	text-decoration:none;
    	}
    	
    * {
    	scrollbar-arrow-color: #000000; 
    	scrollbar-face-color:  #ffffff; 
    	scrollbar-track-color: #ffffff;
    	}	
    	
    body {
    	background-color: white;
    	}
    
    
    #masthead {
    	padding-left: 65px;
    	padding-right: 0px;
    	padding-top: 5px;
    	padding-bottom: 0px;
    	}
    
    #topnav {
    	width: 880px;
    	margin: 5px auto;
    	padding: 3px;
    	background: black;
    	font-style: normal;
    	text-decoration: none;
    	text-align: center;
    	}
    
    #topnav ul li {
    	display:inline
    	}
    
    #topnav ul li a {
    	color: white;
    	font-size: 10px;
    	font-weight: bold;
    	font-family: Tahoma;
    	text-decoration: none;
    	}
    
    #container {
    	position: relative;
    	width: 900px;
    	}
    
    #sidenav {
    	width: 200px;
    	position: absolute;
    	left: 65px;
    	top: 0px;
    	}
    	
    #sidenav ul li a {
    	font-weight: bold;
    }	
    
    #content {
    	margin-left: 275px;
    	width: 500px;
    	}
    	
    #footer {
    	padding-left: 75px;
    	padding-right: none;
    	padding-top: 50px;
    	padding-bottom: 15px;
    	text-align: center;
    	text-decoration: none;
    	font-size: 0.8em;
    	font-weight: bold;
    	clear: both;
    	width: 880px
    	}

  • #2
    New Coder
    Join Date
    Dec 2011
    Posts
    80
    Thanks
    5
    Thanked 12 Times in 12 Posts
    I first would get rid of * { } declaration of your font(s).

    Instead I would do something like :

    Code:
    /* TYPOGRAPHY STYLING 
     *********************************************/
    h1 {
    	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    	font-size: 1.8rem;
    	line-height: 1.5;
    	color: #2e2e2e;
    }
    
    p {
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 1.2rem;
    	line-height: 1.5;
    	color: #2e2e2e;
    }
    That way it's only tied down to individual HTML tags and not everyone of them. Then styling individual sections can be do as simple as

    Code:
    <span class="specialText">Animation</span>
    Code:
    .specialText {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 1.2rem;
    	line-height: 1.5;
    	font-weight: bold;
    	color: orange;
    }
    Oh it's em not ems and I use rem instead of em for I'm lazy and don't want to do calculations. I also would stay away from using px for font-size.
    Last edited by Strider64; 04-23-2014 at 12:28 PM.
    True courage is about knowing not when to take a life, but when to spare one. PDO Tutorial


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •