"Creating Web Pages With HTML - Simplified"
Chapter 11: Pages 170-189

Style Sheets

IDG's 3-D Visual Series
Navigation Bar
Main Table of Contents Previous Chapter Next Chapter

Table of Contents

Introduction To Style Sheets
Set Up A Style Sheet
Create A Class
Hide A Style Sheet
Change Text Alignment
Bold Or Italicize Text
Change The Font
Change Font Size
Change Text Color
Set The Width And Height
Add A Background 
	172 Introduction To Style Sheets
	

		
• You can use style sheets to define the formatting and layout of information on your Web pages.

		
 

		
• Style sheets are also known as Cascading Style Sheets (CSS). You can find more information about style sheets at the http://www.w3.org Web site.

		
 

		
    
		
  1. How Style Sheets Work.
    
		A style sheet allows you to specify in one centralized location how you want information for each tag to appear on one or more Web pages. For example, you can specify that you want all H1 headings to appear in a specific font and color.
    
		A style sheet allows you to perform the same tasks as many HTML tags and is now the preferred method for performing these tasks.
    
		
    
		
  2. Style Sheet Structure
    
		When creating a style sheet, you enter a tag you want to define characteristics for, such as H1 (H1 headings), P (Paragraphs) or B (bold text) and then list the characteristics you want the tag to use. A semi-colon (;) must separate each characteristic. The characteristics you define for a tag will affect all the information that uses the tag on your Web page(s).
		

		
» Reasons For Using Style Sheets

		
 

		
    
		
  1. Additional Features
    
		Style sheets allow you to format and lay out text and images in ways you cannot accomplish with HTML tags. You can create sophisticated Web pages that look like pages from a magazine. For example, you can change the line spacing and specify the position of text and images on a Web page.
    
		
    
		
  2. Save Time
    
		Style sheets allow you to define in one location how you want information that uses a tag to appear throughout your Web page(s). This saves you time since you do not have to type the same information in each individual tag. For example, you can define how you want all the text that uses the P (paragraph) tag to appear throughout a Web page.
    
		
    
		
  3. Easy To Update
    
		When you use style sheets, you can make changes to your Web page(s) in one centralized location. This prevents you from having to change each tag on your Web page(s) individually and helps maintain a consistent appearance for your Web page(s). For example, you can change the appearance of all your H1 headings at once.
    
		






	174 Set Up A Style Sheet
	

		
• You can set up a style sheet that will define the formatting and layout for a single Web page or multiple Web pages.

		
 

		
» For A Single Web Page

		
 

		
    
		
  1. On the Web page you want to use a style sheet, type <Style> between the <Head> and </Head> tags.
    
		
    
		
  2. Type a tag you want to define characteristics for.
    
		Note: You can define characteristics for tags such as H1 (H1 headings), P (paragraph) and B (bold text).
    
		
    
		
  3. Type { to begin the characteristics for the tag.
    
		
    
		
  4. Type } to end the characteristics for the tag.
    
		Note: You can enter characteristics for the tag between the brackets { }. A semi-colon (;) must separate each characteristic.
    
		
    
		
  5. Repeat sets 2 to 4 for each tag you want to define characteristics for.
    
		
    
		
  6. Type </Style> to complete the style sheet.
    
		

		




		
Example: Set Up A Style Sheet

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		H1{text-align: center; font-style: italic}

		P{Color: White}

		</Style>

		</Head>

		<Body>

		

		




	

		
When should I set up a style sheet for multiple Web pages?

		
 

		
• Setting up a style sheet for multiple Web pages allows you to give all of your Web pages a consistent appearance. When you make changes to the style sheet, all the Web pages that use the style sheet will display the changes.

		
 

		





	

		
» For Multiple Web Pages

		
 

		
    
		
  1. Create a new document in a word processor or text editor.
    
		
    
		
  2. Perform steps 2 to 5 from the "Setting Up A Style Sheet For A Single Web Page" to set up the information for the style sheet.
    
		
    
		
  3. Save the document in the text-only format. Use the .css extension to name the document (example: mystyles.css
    
		
    
		
  4. Type <Link Rel=stylesheet Type="text/css" between the  <Head> and </Head> tags. Then press the SpaceBar.
    
		
    
		
  5. Type HREF=?> replacing ? with the location of the style sheet on your computer.
    
		Note: You can specify the location of a style sheet as you would specify the location of an image.
    
		

		




		
Example: Style Sheet For Multiple Web Pages

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Link REL=stylesheet TYPE=text/css" HREF=mystyles.css>

		</Head>

		<Body>

		

		






	176 Create A Class
	

		
•You can create a class to format only some of the elements on your Web page that use a specific tag. 

		
 

		
• For example, you can create a class for elements that use tags such as H1 (H1 headings), P (paragraphs) or B (bold text).

		
 

		
» Create A Class

		
 

		
    
		
  1. Between the <Style> and </Style> tags, type the tag you want to create a class for, followed by a period (.).
    
		
    
		Note: You can create a class for tags such as H1 (H1 headings), P (paragraphs) or B (bold text).
    
		
    
		
  2. Type a name for the class you want to create.
    
		
    
		
  3. Type { to begin the characteristics for the class.
    
		
    
		
  4. Type } to end the characteristics for the class.
    
		
    
		Note: You can enter characteristics for the tag between the brackets { }. A semi-colon (;) must separate each characteristic.
    
		
    
		
  5. Position the cursor in the tag before an element you want to include in the class.
    
		Note: The element must use the tag you typed in step 1.
    
		
    
		
  6. Type Class=? replacing ? with the name of the class you typed in step 2.
    
		
    
		
  7. Repeat steps 5 & 6 for each element you want to include in the class.
		

		




		
Example: Create A Class

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		P.important{font-style: italic; Color: White}

		</Style>

		</Head>

		<Body>

		

		
 

		
The tags within the Body text look like:

		
<P Class=important> Once upon a time there were...

		




	

		
» Why Would I Create A Class?

		
 

		
• Creating a class gives you more control over the formatting and layout of information on your Web page. For example, you can create a class of important paragraphs (P.important) that will display slightly different formatting than regular paragraphs (P).

		
 

		
•The P.important paragraphs will display the formatting you define for regular (P) paragraphs as well as the formatting your define for P.important paragraphs.

		






	178 Hide A Style Sheet
	

		
• You can hide a style sheet from older Web browsers that cannot understand style sheets.

		
 

		
• If you do not hide a style sheet from older Web browsers, the information for the style sheet may appear on your Web page.

		
 

		
» Hide A Style Sheet

		
 

		
    
		
  1. Type <!-- directly below the <Style> tag.
    
		
    
		
  2. Type --> directly above the </Style> tag.
    
		

		




		
Example: Hide A Style Sheet

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		<!--

		H2{text-align: center; font-style: italic}

		P{Color: White}

		-->

		</Style>

		</Head>

		<Body>

		

		






	179 Change Text Alignment
	

		
» You can change the alignment of all the text on your Web page that uses a specific tag.

		
 

		
    
		
  1. To change the alignment of all the text that uses a specific tag, position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type text-align: and then press the SpaceBar.
    
		
    
		
  3. Type the way you want to align the text (left, center, right or justify).
    
		

		




		
Example: Change Text Alignment

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		H2{text-align: center}

		</Style>

		</Head>

		<Body>

		

		






	180 Bold Or Italicize Text
	

		
• You can bold or italicize all the text on your Web page that uses a specific tag.

		
 

		
• Bolding or italicizing text is useful for emphasizing information on your Web page.

		
 

		



	

		
» Bold Text

		
 

		
    
		
  1. To bold all the text that uses a specific tag, position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type font-weight: bold.
    
		

		



	

		
» Italicize Text

		
 

		
    
		
  1. To italicize all the text that uses a specific tag, position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type font-style: italic.
    
		

		



	

		
» Can I remove bold formatting from my Web page?

		
 

		
• You can remove bold formatting from all the text on your Web page that uses a specific tag. For example, you can remove bold formatting from text using a tag that automatically bolds text, such as B (bold) or H1 (H1 headings).

		
 

		
    
		
  1. Position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type font-weight: normal.
    
		

		
 

		
Note: You can also remove italic formatting from all the text that uses a specific tag. Perform steps 1 and 2, except type font-style: normal in step 2.

		






	182 Change The Font
	

		
» Why should I specify more than one font?

		
 

		
• You should specify more than one font in case your first font choice is not available on a reader's computer. One of the fonts you specify should be a common font, such as Arial, to increase the probability that your Web page will display one of your font choices.

		
 

		
» You can change the font of all the text on your Web page that uses a specific tag.

		
 

		
    
		
  1. To change the font of all the text that uses a specific tag, position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type font-family: and the press the SpaceBar.
    
		
    
		
  3. Type the name of the font you want to use, enclosed in quotation marks ("").
    
		Instead of typing the name of a font, you can specify a font type (serif, sans-serif or monospace).
    
		
    
		
  4. To specify a second font choice, type a comma (,) and the press the SpaceBar. Then type your second font choice, enclosed in quotation marks ("").
    
		

		




		
Example: Change The Font

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		H2{font-family: "Brush Script MT", "Arial"}

		</Style>

		</Head>

		<Body>

		

		






	184 Change Font Size
	

		
• Larger text is easier to read, but smaller text allows you to fit more information on a screen.

		
 

		
» You can change the font size of all the text on your Web page that uses a specific tag.

		
 

		
    
		
  1. To change the font size of all the text that uses a specific tag, position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type font-size: and then press the SpaceBar.
    
		
    
		
  3. Type a font size in points or pixels.
    
		Example: 14pt or 18px.
    
		Instead of typing a font size in points or pixels, you can specify a descripive font size:
    
		xx-small, x-small, small, medium, large, x-large, or xx-large
    
		




		
Example: Change The Font Size

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		P{font-size: 14pt}

		</Style>

		</Head>

		<Body>

		

		



	

		
» What other settings will affect the size of text on my Web page?

		
 

		
    
		
  1. Screen Resolution
    
		The screen resolution a reader uses will affect the size of text on your Web page.
    
		
    
		
  2. Web Browser Font Settings
    
		Readers can set their Web browsers to display text in a larger or smaller size. This may affect the size of text on your Web page.
    
		

		





	186 Change Text Color
	

		
»  You can change the color of all the text on your Web page that uses a specific tag.

		
 

		
    
		
  1. To change the color of all the text that uses a specific tag, position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type color: and the press the SpaceBar.
    
		
    
		
  3. Type the name or code for the color you want to use.
    
		Example: Red or #FF0000.
    
		

		




		
Example: Change Text Color

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		H2{Color: Red}

		</Style>

		</Head>

		<Body>

		

		






	187 Set The Width And Height
	

		
» You can set the width and height of every element on your Web page that uses a specific tag.

		
 

		
• For example, you can set the width and height of all your images (IMG) or the width of all your paragraphs (P).

		
 

		
• Netscape Navigator cannot currently use the width and height settings you specify for images.

		
 

		
    
		
  1. To set the width and height of every element that uses a specific tag, position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type width:?; height: ? replacing ? with a width and height in pixels.
    
		Example: 300px or as a percentage of the window 50%
    
		

		




		
Example: Set The Width And Height

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		IMG{Width: 180px; Height:121px}

		</Style>

		</Head>

		<Body>

		

		






	188 Add A Background
	

		
» You can set the width and height of every element on your Web page that uses a specific tag.

		
 

		
• For example, you can add a background to elements such as headings (H1 to H6) and paragraphs (P).

		
 

		
» Add A Background Color

		
 

		
    
		
  1. To add a background to every element that uses a specific tag, position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type Background: and then press the SpaceBar.
    
		
    
		
  3. Type the name or code for the color you want to use.
    
		Example: Red or #FF0000
    
		

		




		
Example: Add A Background Color

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		H2{Background: #FF0000}

		</Style>

		</Head>

		<Body>

		

		



	

		
» Add A Background Image

		
 

		
    
		
  1. To add a background image to every element that uses a specific tag, position the cursor between the brackets {} for the tag.
    
		
    
		
  2. Type Background: and then press the SpaceBar.
    
		
    
		
  3. Type URL("?") replacing ? with the locaton of the background image on your computer.
    
		

		




		
Example: Add A Background Image

		
 

		

		<HTML>

		<Head>

		<Title> Web Page Design Techniques </Title>

		<Style>

		H2{Background: URL("Photo.gif")}

		</Style>

		</Head>

		<Body>