HTML: Style Tag

Author: Ronald S. Holland
at
Total Application Works




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2013 All Rights Reserved Total Application Works


    Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)

    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/Style.html">
    Style Tags </a>
    </table>
    </body>
    </html>




Introduction

In this tutorial, we will explore how to use HTML Style tags. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. What is the purpose of a HTML Style tags? The Style tags specify how the document should be formatted for display in browsers. Again, the purpose of this tutorial is to show you how to write a HTML page using an embedded Style tag, an inline style tag, or Cascading Style Sheets (CSS).

Before we get started, we need to know the answer to, "What is a Cascading Style Sheet (CSS)? A web page developer uses CSS to design/create the appearance of HTML pages in a browser. CSS allows a web page developer the ability to simultaneously change the visual appearance of several HTML files without having to change each file individually. CSS allows the separation of web page content/text from the manner in which that content/text is displayed. This means how the font, size, and color of the text is manipulated for visual display.

In the next section, we will explore how to write web pages using the CSS and/or style tag.

How to Use the Style Tags

How do we get started with Style Tags? When you want to create a uniform style for the document to be displayed, you may want to consider the example shown in Figure 1. You will note that style implementations included within the <head> tag effects the entire page. This implementation is called an embedded Style tag implementation.

Requirements for an Embedded Style Implementation

The following are the requirements for an Embedded Style Implementation.

  1. Implement a Style tag within the Head tag.
    • This Implementation will affect the entire document.
  2. The Style property type should be text/css
  3. The Body tag should implement a blue background and white text.
  4. The <p> tag should be implemented with and indentation of 20 pixels.
Figure 1 shows you how to code these requirements and the coding results.

Basic Style Tag Basic Style Tag Displayed in Your Browser
 
<html>
<head>
<style type="text/css">
body {background-color: blue ; color: white}
p {margin-left: 20px}
</style>
</head>
<body>
<p>This is the time for...
</p>
</body>
</html>
 

This is the time for...

Figure 1: Getting started with Style Tags


In the Figure 1 example, I have taken some liberties so that the style tag effects are displayed only in the Figure 1 table; otherwise, the effects would have affected the display of this entire tutorial.

The steps we took to get started in Figure 1.

  1. <html> - tag that indicates the start of a web page
  2. <head> - tag that indicates the start of the prolog for the web page
  3. <style> - tag that indicates the start of an internal style sheet
    • The elements included between the <style> and </style> are written in special style syntax notation rules. The syntax indicates that each rule starts with a tag name followed by a list of style properties enclosed within a "{" and a "}". In the Figure 1 example, we used the body tag for attribute modification. Keep in mind that when you modify the body tag you will be setting the overall look and feel of your Web page.
    • Each tag to be modified
      • Each tag to be modified starts with that tag's name
      • Then a colon
      • Lastly the new value for this tag's attributes.
    • When there is more than one attribute in the list to be modified, you need to use a semicolon between each of them to delimit one property from the next e.g., background-color: blue ; color: white.
  4. { } - enclose the tag and the attributes that are to be modified
  5. { }2 - enclose the second tag and the attributes that are to be modified
  6. { }n - enclose the nth tag and the attributes that are to be modified
  7. </head> - tag that indicates the end of the prolog for the web page
  8. <body - tag that indicates the start of the content that will be viewable on a browser
  9. <p> - tag that indicates the start of a paragraph
  10. </p> - tag that indicates the end of a paragraph
  11. <body - tag that indicates the end of the content that will be viewable on a browser
  12. <html> - tag that indicates the end of a web page

How to Set Page Margins

You may want to set the margins to make your web page look nicer. This is done by setting left and right margins with the "margin-left" and "margin-right" properties.

Requirements for Page Margins

The following are the requirements for Page Margins Implementation.

  1. Implement a Style tag within the Head tag.
    • This Implementation will affect the entire document.
  2. The Style property type should be text/css
  3. The Body tag should implement a blue background and white text.
  4. The <p> tag should be implemented inline with and indentation of 20 pixels.
Figure 2 shows you how to code these requirements and the coding results.

Setting Margins Setting Margins Displayed in Your Browser
 
<html>
<head>
<style type="text/css">
body {background-color: blue ; color: white}
</style>
</head>
<body>
<p style="margin-left: 20px;  margin-right: 10px"> 
You may want to set the margins to make
your web page look nicer. This is done by setting
left and right margins with the "margin-left" and
"margin-right" properties. </p> </body> </html>

You may want to set the margins to make your web page look nicer. This is done by setting left and right margins with the "margin-left" and "margin-right" properties.

Figure 2: Setting the Margins


This example is a <p> tag override. It sets the left margin to 20 pixels from the left window edge, and the right margin to 10 pixels from the right browser window edge.

How to Set Left and Right and First-line Indents

In this section, we will demonstrate how to set the left and right and first-line Indents.

Requirements for Left and Right and First-line Indents

The following are the requirements for Left and Right and First-line Indents Implementation.

  1. Implement inline Style tags.
  2. The <h1> tag should be indented 20 pixels.
  3. The <h2> tag should be indented 10 pixels and should have an italicized font.
  4. The <h3>, <h4>, <h5>, and <h3> tags should be indented 10 pixels.
  5. The <p> tag should be implemented inline with and indentation of 20 pixels.
Figure 3 shows you how to code these requirements and the coding results.

Setting Left and Right and
First-line Indents
Left and Right and
First-line Indents
Displayed in Your Browser
 
<h1 style="margin-left: +20px">
<h2 style="margin-left: +10px ; 
           font-style: italic">
<h3,h4,h5,h6  
style="margin-left: +10px"> <p style="margin-left: 20px">

This is not an indented header 1.

This is an indented paragraph. You may want to set the margins to make your web page look nicer. This is done by setting left with the "margin-left" properties.

This is an indented header 1.

This is an indented italicized header 2.

This is an indented header 3.

This is an indented header 4.

This is an indented header 5.
This is an indented header 6.

Figure 3: Set Left and Right and First-line Indents


Sometimes we want make headings more distinctive by indenting them as shown in figure 3. This example has four style rules:
  1. One for the <h1> - indented 20 pixels;
  2. One for the <h2> - indented 10 pixels and italicized;
  3. One for the <h3>, <h4>, <h5> and <h6> - indented 10 pixels; and
  4. One for the <p> - indented 20 pixels.

In the next section, we will examine an example that shows how to set the rules for space above and below the web page.

How to Set the Amount of Whitespace above and below

Browsers are programmed to set the white space above and below headings and paragraphs. Using the style tag, allows you to effect the presentation of your web page in a manner that has greater visual impact on your viewers.

Requirements for the Amount of Whitespace above and below

The following are the requirements for Page Margins Implementation.

  1. Implement inline Style tags.
  2. The <h1> tag should be indented 20 pixels.
  3. The <h2> tag should be indented 10 pixels and should have an italicized font.
  4. The <h3>, <h4>, <h5>, and <h3> tags should be indented 10 pixels.
  5. The <p> tag should be implemented inline with and indentation of 20 pixels.
Figure 4 shows you how to code these requirements and the coding results.

Setting Whitespace above
and below
Whitespace above and below
Displayed in Your Browser
<h2 style="margin-top: 2em; margin-bottom: 2em;">This is the time for...
<h2 style="margin-top: 4em; margin-bottom: 2em;">This is the time for...

This is the time for... No style tag

Browsers are programmed to set the white space above and below headings and paragraphs. We are not using the style tag in this example,...

This is the time for... 1st style example

Browsers are programmed to set the white space above and below headings and paragraphs. Using the style tag, allows you to

This is the time for... 2nd style example

Figure 4: Setting Whitespace above and below


We use the margin-top property to set the space above and we set the margin-bottom to specify the space below. When you consider the above examples, you determine:

  1. In the first case, the space between the bottom of the frame (preceding blue space) and the top of the "T" and the size of the "T" is about the same. This is considered one em.
  2. In the second case, the space between the top of the "T" and the width of the space between preceding line is about the size of two "T"s. This is considered two ems.
  3. In the third case, the space between the top of the "T" and the width of the space between preceding line is about the size of four "T"s.. This is considered four ems.

The em scales with the size of the font. As you can tell from the above examples, one em is the height of the "T". By using em's you can preserve the general look of the Web page independently of the font size.

What happens when a paragraph follows a heading? The margin-bottom for the heading and the margin-top for the paragraph are not added together to determine the spacing. The value arrived at is determined by using the maximum of the two spacings, the heading or the paragraph spacing. This rule is applied to margin-top and margin-bottom combinations regardless of which tags are involved.

How to Set the Font Name, Style and Size

This section explains how to set the font name/family, style and size, and how to add italic, bold and other styles.

Setting the Font Family Name

In the following section, we will demonstrate how to set the Font Name.

Requirements for Setting Font Name

The following are the requirements for setting the Font Family Name implementation.

In this example, we are electing to display the <h1> heading using the Arial Black font and the <h2> heading using the Garamond font; failing that then the Courier New, and if Courier New is unavailable in the browsers, then the default serif font. Paragraph text would appear in Arial Black or if that is unavailable in the browser's default sans-serif font.

  1. Implement inline <h1> Style tags with the Arial Black font.
  2. Implement inline <h2> Style tags with the Garamond font.
  3. Implement inline <p> Style tags with the Courier New font.
  4. Implement inline <span> Style tags with the bold 1em Roman font, with an indentation of 20 pixels.
Figure 5 shows you how to code these requirements and the coding results.

Some fonts may not be available on all browsers. You can get around this limitation by listing several fonts in preference order. There is a short list of generic font names which are guaranteed to be available, so you are recommended to end your list with one of these: serif, sans-serif, cursive, fantasy, or monospace, for instance:

Setting The Font Name The Font Name Displayed in Your Browser
 
<h1 style="font-family: Arial Black, 
sans-serif;"></h1> <h2 style="font-family: Garamond, "Courier New",
serif; "></h2> <p style="font-family: Courier New,
sans-serif;"></p> <span style="font: bold 1em Roman; text-decoration: none;">
Some fonts may not be available </h1>

Some fonts may not be available </h2>

Some fonts may not be available </p>

link some text here </span>

Figure 5: Setting The Font Name

Keep in mind that even though a font family is rendered in a browser, it may not be rendered in the manner you wish.

Font Styles

The most common styles used for text emphasis are italic or bold. Most browsers render the em tag in italic and the following section, we will demonstrate how to set various Font Styles.

Requirements for setting Font Styles

The following are the requirements for setting the Font Family Styles implementation.

In this example, we are electing to display the <h1> heading using the Arial Black font and the <h2> heading using the Garamond font. Failing that, we will substitute in Courier New, and if the Courier New is unavailable in the browsers, then the default serif font. Paragraph text would appear in Arial Black or if that is unavailable in the browser's default sans-serif font.

  1. Implement inline <em> Style tags with the Bold and Italic font.
  2. Implement inline <Strong> Style tags with the Bold and Uppercase font.
  3. Implement inline <H2> Style tags are to be transformed to the Bold and Lowercase font.on of 20 pixels.
Figure 6 shows you how to code these requirements and the coding results.

strong tag in bold. Let's assume you instead want em to appear in bold italic and strong in bold uppercase:

Setting Font Style Font Style Displayed in Your Browser
 
<em style="font-style: italic; 
      font-weight: bold;">bold italic</em>
<strong style="text-transform: uppercase;  
      font-weight: bold;">bold uppercase</strong>
<h2 style="text-transform: lowercase;">  
      How to Set the Font Name, Style and Size</h2>
 

bold italic


bold uppercase

How to Set the Font Name, Style and Size

Figure 6: Setting the font Style

In Figure 6, we showed some examples on setting the font style. In the next section, we will explore setting the font size.

Setting the Font Size

When considering setting the font size, you should consider how legible the new font size will appear in the various browsers. Most browsers use a larger font size for the more important headings(i.e., <h1>, <h2>, etc.). If you override the default size with a smaller font size, you run the risk of making the text too small to be legible; especially if you are using points. Therefore, you are should considered specifying font sizes in relative terms.

Requirements for Setting the Font Size

The following are the requirements for Font Size Implementation.

  1. Implement inline Style Size tags.
  2. The <h1> tag should be sized 225%.
  3. The <h2> tag should be sized 175%.
  4. The <h3> tag should be sized 125%.
  5. The <h4> tag should be sized 100%.
Figure 7 shows you how to code these requirements and the coding results.

Setting the Font Size Font Size Displayed in Your Browser
  
<h1 style="font-size: 225%;">

<h2 style="font-size: 175%;">

<h3 style="font-size: 125%;">

<h4 style="font-size: 100%;">

This is the time for...</h1>

This is the time for...</h2>

This is the time for...</h3>

This is the time for...</h4>

Figure 7: Setting the Font Size


In the Figure 7 example we showed you a method for setting heading sizes in percentages relative to the size used for normal text. In the next section, we will explore adding borders and backgrounds.

How to Add Borders and Backgrounds

In this section, we will use CSS to put a border around our HTML elements.

Requirements for Adding Borders and Backgrounds

The following are the requirements for adding Borders and backgrounds implementation.

  1. Implement inline Style Size tags.
  2. The <h1> tag should have
    • A solid red thin border.
    • A blue background.
    • A white font/lettering.
  3. The <h2> tag should have
    • A solid blue thin border.
    • A white background.
    • A black font/lettering.
  4. The <h3> tag should have
    • A solid yellow thin border.
    • A white background.
    • A black font/lettering.
  5. The <h4> tag should have
    • A solid green thick border.
    • A white background.
    • A black font/lettering.
  6. The <div> tag should have
    • A solid green thick border.
    • A white background.
    • A black font/lettering.
Figure 8 shows you how to code these requirements and the coding results.

Adding Borders and Backgrounds Borders and Backgrounds Displayed in Your Browser
  


<h1 style="border: solid; background: blue; border-width: thin; border-color: red ; color: white ; width: 100%">

<h2 style="border: solid;
border-width: thin; border-color: blue ;
width: 100%;">


<h3 style="border: solid;
border-width: thin; border-color: yellow ;
width: 100%;">





<h4 style="border: solid;
border-width: thick; border-color: green ;
width: 100%;">








<div style="border: solid;
border-width: thin; border-color: green ;
width: 100%;">

This is the time for...</h1>

This is the time for...</h2>



This is the time for...</h3>


This is the time for...</h4>


This is the time for...

This is the time for...

This is the time for...

Figure 8: Adding Borders and Backgrounds


In the above Figure 8 example we showed you a method for setting borders and background colors. In the next section, we will explore linking to external style sheets.

Link to External Style Sheets

In the examples above, we have set the style for the web page within the page. If you want to use this web page design in more than on page, you would have to copy the design in all of the pages you want to have the same design. Is there a way to have a common design in more than one page without having to copy the design into each page? The answer is to use an External Style Sheet. To use an external style sheet, we need to use the <LINK> tag. Keep in mind, when you use a CSS, if a design change is required, you only have to change one page. We will explore the <LINK> tag in more detail in the next section.

The <LINK> Tag

When we link to an external style sheet, we need to use some of the following attributes:

  1. <LINK> - is used to define the relationship between a link and a resource.
  2. REL - identifies the forward link types.
      This allows you to you can add the STYLE elements from the linked page to the current page.
  3. HREF - identifies the URL of the linked resource.
  4. TYPE - identifies the internet content type.
To what type of file do we want to link? We can simply link to a common HTML file that defines the style for our Web site. We can use our index page as this common style page, if the definition is included within a <STYLE> - </STYLE> enclosure.

<html>
<head>
<title>How to Link to an External Page </title>
<link rel=stylesheet href="http://www.yourdomain.com/style.css" type="text/css">
</head>
<body>
Now is the Time for...
</body>
</html>
Figure 9: How to use the Link Tag

In the next section, we will explore how to create an external style sheet.

How to Incorporate a Style Sheet

The most important aspect of your web page should be to communicate a message through your text and graphic design. The style sheet should be secondary to this message. The following example shows a combined style sheet and HTML page.

<HTML>
<HEAD>
<TITLE>Style Sheet Example</TITLE>
<STYLE TYPE="text/css">
BODY.back {background: "paper.gif" white}
H1.ident {margin-left: +300px}
H2.ident {margin-left: +300px}
H2.ital {font-style: italic}
H3.center {text-align: center}
P.center {text-align: center}
SPAN {font: 14pt sanserif small-caps; color: blue}
</STYLE>
</HEAD>
<BODY CLASS="back">
<H1 CLASS="ident">Total Application Works</H1>
<H2 CLASS="ident">Providing Full Software Services</H2>
<HR>
<H3 CLASS="center">About our Company</H3>
<P CLASS="center">
On any programming assignment, <SPAN>" Total Application Works"</SPAN> can bring to bear over 33 years of programming experience (29 at IBM), which includes 16 years of management experience, as a manager and middle manager, and 2 years of experience as a college level instructor. Our background allows us to bring a unique perspective to the total development cycle and add positively to our client's bottom line."
<pre>
                                   Ron Holland, President and CEO 
                                   404 whitehall Way
                                   Cary, NC 27511

                                   919-522-3089 
</pre>

</P>
</BODY>
</HTML>
Figure 10: Creating a Style Sheet

When you review the example in Figure 10, you will note some new notation. For example, what is H1.ident {margin-left: +300px}? Consider when H1.ident is used (<H1 CLASS="ident">), then {margin-left: +300px} is applied.

Definitions

CSS -

Embedded style -

Inline style -










HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2013 All Rights Reserved Total Application Works