
Your Guide to Professional Web Site Design and Development	• HTML Tips • HTML Codes • Web Development	• Web Design Tips • JavaScript Codes • 216 Web Safe Colors	• CSS Tutorial • JavaScript Tutorial • ASCII Character Codes

CSS Tutorial: Using Cascading Style Sheets (CSS) to Specify Web Page Formatting

Formatting Your Web Page

CSS will enable you to specify all aspects of your web page formatting, such as your web page background color, font size, font color, font face, page margins and much more simply by including special CSS tags between the comments.

Let's start with defining the body of the web page. Using HTML code, this is done inside the <body> tag. But using CSS, it is done within the comment section of the <style> tag. Therefore, there is no need to define anything inside the HTML <body> tag. In CSS, the body tag looks like this: body { }. The information that concerns how the body will be styled goes inside the brackets. The upper portion of your code should now look like this:

<html>
<head>
<title>Your Page Title</title>

</head>
<body>

</body>
</html>

Formatting the Background and Foreground Color of a Web Page with Cascading Style Sheets (CSS)

Next, we define the background color of the page. Colors are defined, in both HTML and CSS with a series of letters and numbers. These numbers are referred to as hexadecimal numbers, and each one represents a color. For instance, the hexadecimal for the color white is #FFFFFF. The hexadecimal is always represented with the # sign followed by a combination of six letters or numbers.

Visit the 216 Safe Colors section to find a complete color code chart.

With CSS, we can define different colors for the background and foreground of our web page. This is done as follows:

Body { background-color: 000000; color: ffffff }

Our page now has a black background with a white foreground. However, please note, defining a foreground color is optional. In addition, defining the background color is also optional. This should only be defined if you'd like a background color other than the default color of white.

Anytime you are defining a format in CSS, you must first state what you are defining, followed by a colon, and then the value. If you would like to include additional tags, they must be separated with a semicolon.

In our example, we are first defining the background color. Following the background color is a colon, which is followed by the value (hexadecimal color code). A semicolon is placed at the end to tell the browser that this definition is complete.

Formatting the Margin of a Web Page with Cascading Style Sheets (CSS)

In the next example, we will be defining the web page margins. Type in margin: 100px.
PX stands for pixels and is telling the browser to display the margin at 100 pixels.

Body { background-color: 000000; color: ffffff; margin: 100px }

Formatting the Font Face within a Web Page with Cascading Style Sheets (CSS)

Next, we need to give our fonts more style. We are still working in the <style> tag, inside the comment tag. Starting with the font face or typeset, it is important to use font faces that are commonly installed on computers. If the font face that you select is not on your user's computer, the page will be displayed with their default font face. Therefore, the text may not appear on that user's computer screen as you had intended.

You can specify more than one font face. By doing this, the browser will look to see if the first font is installed on the users computer. If it is not, it will look for the second, and then the third, and so on, until it finds one that is installed. In CSS terms, this is known as a font family.

A good selection of fonts would be Arial, Verdana, Georgia, Times New Roman, and Sans-Serif.

Add this to your CSS as follows:

Font-family: Arial, Verdana, Georgia, "Times New Roman", Sans-Serif;

Note that each font face is separated by a comma, and Times New Roman is in quotation marks, while others are not. Any time you use a font face that has more than one word in its name separated by spaces, you must use quotation marks.

Formatting Font Size within a Web Page with Cascading Style Sheets (CSS)

Next, define the size of the fonts, either using terms, such as small, or numbers, such as 1 or +1. It can also be defined in pixels. Browsers recognize and accept font sizing in a variety of ways.

We will be using pixels within the following example:

Font-size: 12px;

Formatting Spacing between Lines within a Web Page with Cascading Style Sheets (CSS)

The spacing between lines can also be defined. If you don't want to define the line spacing, it will naturally be set to 120% of the size of the font. However, if you want more line spacing than that between lines of text, you can specify a different amount.

Line-height: 160%

Notice that there is no semicolon after 160%. This is because we are finished defining the body section of the CSS. The final definition needs no semicolon after it.

The upper portion of your HTML/CSS code should now look like this:

<html>
<head>
<title>Your Page Title</title>

<style type= "text/css" title="styleid" media="all">

</style>

</head>
<body>

</body>
</html>

Formatting Head Tags within a Web Page with Cascading Style Sheets (CSS)

You can use CSS to specify how your Head tags should be formatted. For example, you can specify the font face and color of the <H1> tag within your web page like this:

H1 { color: ff0000; font-family: Arial, "Times New Roman"; }

Your HTML code would look like this:

</body>
</html>

As you can see, we are still working inside the comment tag of the <style> tags. Now that the H1 definition has been added, anywhere the H1 tag appears within the web page, the color of that text will be red, and it will appear in the Arial font.

Formatting Paragraph Indentions and Letter Spacing within a Web Page with Cascading Style Sheets (CSS)

With CSS, you can even control the indention of paragraphs and the spacing between letters in words. To define the indention that should be used for each paragraph, include the following code:

P { text-indent: 5em }

This will cause a five space indention at the beginning of each paragraph. To specify spacing between letters, use the following example:

P { text-indent: 5em; Letter-spacing: 0.5em }

Now, the paragraphs will be indented five spaces, and the spacing between each letter will be half a space. This also works when defining headings, such as:

H1 {color: ff0000; font-family: Arial, "Times New Roman"; letter-spacing: 0.5em}

As you are beginning to see, CSS allows you to manipulate all of the text within the page in ways that HTML doesn't allow. In the following lessons, you will learn how to manipulate other HTML tags with CSS.


Previous	Next

An Introduction to Cascading Style Sheets
Creating a Basic HTML Page
Embedding Cascading Style Sheets
Using Cascading Style Sheets (CSS) to Specify Web Page Formatting
Manipulating Bulleted and Numbered Lists with Cascading Style Sheets (CSS)
Formatting Hyperlinks with Cascading Style Sheets (CSS)
Creating Tables within a Web Page with Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Classes and ID's
Cascading Style Sheet Codes Chart - Property Index

Web Development Tutorials

Cascading Style Sheets Tutorial: An Introduction to Cascading Style Sheets
JavaScript Tutorial: An Introduction to JavaScript
Web Development: A step by step guide to developing a successful Internet business
HTML Codes Chart: Copy and paste HTML codes for your web page
HTML Tips: Copy and paste special effect HTML codes for your web page
Web Design Tips: Tips, tricks, and special effect codes for your web page
JavaScript Code Snippets: Copy and paste special effect JavaScript codes for your web page
216 Web Safe Color Chart: Hexadecimal and RGB Color Codes for your web page
ASCII Character Codes Chart: American Standard Code for Information Interchange character codes chart