Font Properties (and Color)

Submitted by Yorkiebar on Friday, January 24, 2014 - 10:21.
Introduction: This is the fifth part in my CSS Styling tutorials, in which I will be covering font properties. Weight: The first of the font properties I will be covering is the weight property, this lets you set the weight of the font (how bold it is). You can either use the values 'normal', 'bold', 'light', etc. or a number (around 100-600)... 
  1. font-weight: 200; // or font-weight: normal;
Family: The font family property lets you set the actual font of the text, you can choose multiple fonts within the family in-case the previous fonts are unavailable... 
  1. font-family:"Times New Roman",Georgia,Serif;
Style: Style sets the font to be; italic, oblique or normal... 
  1. font-style: italic;
Size: As you can probably guess, this will set the size of the font. The size can be set in px, percent or em... 
  1. font-size: 18px;
Variant: This will change the text itself to display as either; typed in the document (normal), the same as it's container (inherit), or all small caps (small-caps)... 
  1. font-variant:small-caps;
Color: The colour variable is not a 'font' property, but it does only affect the colour of the font's text, so here it is... 
  1. color: #ffffff; //Hex value
Linking CSS To a HTML Element: To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add... 
  1. class='myClass'
... to the attributes of that element if you chose a class, or... 
  1. id='myID'
if you chose an id. Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with... 
  1. .myClass {
  2. 	//Properties go here
  3. }
if you chose a class, or... 
  1. #myID {
  2. 	//Properties go here
  3. }
(You can remove the line beginning with // if you wish). Here's an example... 
  1. <html>
  2. 	<head>
  3. 		<style>
  4. 			.blue {
  5. 				background-color: #000;
  6. 				color: blue;
  7. 				width: 300px;
  8. 				height: 100px;
  9. 				font-family: Arial;
  10. 				font-weight: bold; //or a custom value (600, for example)
  11. 				//Blue text, bold, Arial font
  12. 			}
  13.  
  14. 			.hexwhite {
  15. 				background-color: #000;
  16. 				color: #fff;
  17. 				width: 300px;
  18. 				height: 100px;
  19. 				font-family: Times New Roman;
  20. 				font-style: italic;
  21. 				//White through hex, Italics, Times New Roman font.
  22. 			}
  23.  
  24. 			.hexblack {
  25. 				background-color: #000;
  26. 				color: #000;
  27. 				width: 300px;
  28. 				height: 100px;
  29. 				font-family: Verdana;
  30. 				font-size: 20px;
  31. 				font-variant: small-caps;
  32. 				//Black through hex, 20px font size, all small caps, Verdana font
  33. 			}
  34. 		</style>
  35. 	</head>
  36. 	<body>
  37. 		<div class='blue'>Blue Text</div>
  38. 		<div class='hexwhite'>Hex White</div>
  39. 		<div class='hexblack'>Hex Black</div>
  40. 	</body>
  41. </html>

Add new comment

About text formats
  • 35 views