Fonts

CSS has enormous power and functionality. As a result, there is an equally enormous amount of examples and ways it can be used. These CSS tutorials will provide some common examples.

CSS also has to be used along side HTML. The examples provided will always show the CSS and, when necessary the HTML. The CSS code can be placed inside the CSS (inline CSS), at the top of the CSS file (internal CSS) or in an external file (external CSS).


Font Size

There are five different basic ways to specify font size to web page content using CSS.

  1. em - a scalable amd accessible unit equal relative to the current document font-size. Thus, if the font-size of the document is 12pt, 1em is equal to 12pt.
  2. px - px stands for pixels which are a fixed-size unit. One pixel is equal to one dot on the computer screen.
  3. pt - pt stands for points. One point is equal to 1/72 of an inch.
  4. percent - percent is similiar to em, where the current font-size is equal to 100%.
  5. name - font size can also be specified via names such as medium, large, and x-large.

Example: Specifying a font size in CSS

This example would format all HTML h1 headings with a font size of 1.5em.

HTML code


	<h1>Hello World</h1>
	

CSS code


	h1 {
	  font-size: 1.5em;
	}
	

Example: Using Internal CSS to specify font size many different ways

This example uses both internal CSS as well as classes to demonstrate how to specify font sizes many different ways. A CSS class allows you to specify CSS stylings on an HTML tag-by-tag basis (versus all tags). Thus, in this example, the font size of all p tags are not changed - only those with the class= reference.

HTML and CSS Code on Same File (Internal CSS)


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>HTML Example</title>
		<style>
			.one 	{  font-size: x-small; }
			.two 	{  font-size: large; }
			.three 	{  font-size: 15px; }
			.four 	{  font-size: 150%; }
			.five 	{  font-size: 2em; }
			.six 	{  font-size: 14pt; }
		</style>
	</head>

	<body>

	<p class="one">Large font size</p>
	<p class="two">Large font size</p>
	<p class="three">15px font size</p>
	<p class="four">150% font size</p>
	<p class="five">2em font size</p>
	<p class="six">14pt font size</p>

	</body>
	</html>
	

Output:

   fonts.png screenshot

Run it now


Example: Using External CSS to specify font size

The screenshot below demonstrates how to implement the previous example ("Using Internal CSS to specify font size many different ways") using external CSS . In this method two files have been created: html2.html which links to the external CSS file css2.css. This is the better method to implementing CSS.

css2 screenshot

Run it now


Example: Using Inline CSS to specify font size

Inline CSS is the third method in which CSS can be implemented, i.e. inline, internal, and external. Inline CSS is like a class in that the CSS applies to only one HTML tag. However, with inline CSS the CSS code is integrated into the HTML code/tag. With a class, the HTML links to CSS code located elsewhere (internally and externally).


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>HTML Example</title>
	</head>

	<body>

	<h1 style="font-size: 24pt;">Welcome to this Web Page</p>

	<p style="font-size: 10pt;">Hello World!</p>
	<p style="font-size: 14pt;">Hello World!</p>

	</body>
	</html>
	

Output:

   html3 screenshot

Run it now