Fonts in CSS


With CSS the fonts on your webage can be added easily. If you use Internet Explorer as your browser, the text in the #navigation, #mainarea and #footer will currently be Times New Roman by default. In Firefox, the default font is Arial.


The size of font can be described either by percentage, emphasis (em) or height in pixels. It is recommended that the latter is not used because it is bad for accessibility of your website. It is good practice to define the font size in the }body section to 100% and adjust the paragraph font size accordingly.


We will now add a different font to your work. Copy the red text below and add it to your tutorial.css document. Click save and refresh your browser to see the change.


body {

background-color: #ffe4b5;

background-color: #ffe4b5;

font-size:100%;

}


p {

font:1.2em verdana,garamond,arial,sans-serif;

}




What has changed? Have a look at the Example.


The text in the #navigation, #mainarea and #footer boxes has changed to the Verdana font. Have a close look at the CSS because 3 other fonts were also listed. Some Browsers do not support all the fonts and so will display the first one in the list that it does support.



Vary the fonts


Fonts can vary from box to box as you choose. We will now add some CSS for the different boxes and see what happens. Also we will change the fonts, colours and sizes. Add the red text below to your CSS and HTML documents.




p {

font:1.2em verdana,garamond,arial,sans-serif;

}

p.nav{

font:1.6em garamond,arial,sans-serif;

color:blue;

}

p.main{

font:1.4em courier,sans-serif;

color:green;

}





<div id="navigation">

<p class="nav">This is a great place to put your navigation links</p>

</div>

<div id="mainarea">

<p class="main">I am going to build my first website using CSS and HTML. This is the main area of the website where all or most of my content would go. This could include text and images.</p>

</div>

<div id="footer">

<p>This is the footer area for further information, as required.</p>

</div>

</body>

</html>




What has changed? Have a look at the Example.


The text in the #navigation box is now blue and font Garamond, size 1.6em, The text in the #mainarea is now green and font Courier, size 1.4em. This has been possible by using the class in the HTML to identify the differing CSS instructions. Have a play around and discover the art of the possible.