Styles & Formatting

Styles & Formatting

You can never be certain of how your HTML web pages will be displayed because you have no control over what device will be used to view them. Different screen sizes, resized windows and various browsers will all tend to produce different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code because the browser will remove any extra spaces and extra lines when the page is displayed. This is the so called “poem problem”.

The Poem Problem

Let’s say you want to display these four lines of a nursery rhyme:

Mary had a little lamb,
its fleece was white as snow;
And everywhere that Mary went,
the lamb was sure to go.

Save this HTML as TestPoemSolutions.htm

<!DOCTYPE html>
<html>
<body>

<p>The p tag loses both spaces and line breaks so our poem is all on one line:</p>

<p>
Mary had a little lamb,
its fleece was white as snow;
And everywhere that Mary went,
the lamb was sure to go.
</p>

<p>The pre tag preserves both spaces and line breaks and uses a default courier font:</p>

<pre>
Mary had a little lamb,
its fleece was white as snow;
And everywhere that Mary went,
the lamb was sure to go.
</pre>

<p>The br tag inserts line breaks, one br tag after each line:</p>

<p>
Mary had a little lamb,
<br>
its fleece was white as snow;
<br>
An everywhere that Mary went,
<br>
the lamb was sure to go.
</p>

</body>
</html>

To Pre or not To Pre

The poem problem can be solved in either of two ways: use the <pre> tag to (pre)serve  existing spaces and line breaks or insert line breaks with the <br> tag.

The <pre> tag defines pre-formatted text, text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. Earlier HTML versions supported a “width” attribute which defined the length of a line but “width” attribute support was dropped in HTML5.

The <pre> element is particularly handy when displaying text with unusual formatting, or some sort of computer code.

The <br> tag defines an empty element and inserts a line break

The <pre> and <br> tags both solve the so called poem problem

We will now proceed with taking greater control of the look of our text by introducing HTML Styles and HTML Formatting.

HTML Styles & Formatting

The fonts, font sizes and font styles of our text have so far been left to the tender mercies of the defaults assigned by the browser. None of our html pages to date have made any effort to explicitly control fonts. The choice of font, the fonts size, ‘the font’s color etc is known as the style. Setting the style of an HTML element, can be achieved with the style attribute.

HTML Styles

The HTML style attribute has the following syntax: <tagname style=property:value;”>

The property is a CSS property. The value is a CSS value.

CSS is the acronym for Cascading Style Sheets, CSS is a big topic in its own right so more about CSS later.

HTML Fonts:

The font-family property defines the font to be used for an HTML element; for example we can define the fonts for a heading and a paragraph as follows:

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

HTML Font Size:

The font-size property defines the text size for an HTML element as in these examples:

<h1 style=”font-size:300%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

HTML Text Color:

The color property defines the text color for an HTML element:

<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

HTML Text Align:

The text-align property defines the horizontal text alignment for an HTML element:

<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”>Centered paragraph.</p>

HTML Background Color:

The background-color property defines the background color for an HTML element such as; a heading, a paragraph or or an entire page. The following example sets the background color for a page to powderblue:

<body style="background-color:powderblue;">
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
 </body>

Summary of Styles:

  • Use the style attribute for styling HTML elements
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use color for text colours
  • Use text-align for text alignment
  • Use background-color for an element’s background colour

HTML Text Formatting

The HTML style attribute is used to define the style of all the text within an element but HTML also has special elements for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

  • <b> – Bold text
  • <i> – Italic text
  • <strong> – Important text
  • <em> – Emphasized text
  • <mark> – Marked text
  • <small> – Small text
  • <del> – Deleted text
  • <ins> – Inserted text
  • <sub> – Subscript text
  • <sup> – Superscript text

A Minimal Website 06

For our sixth web page we are going to add someHTML styling and HTML formatting

Copy your “index05.htm” to “index06.htm” and edit as follows:

<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Minimal Website 06</title>
<meta charset="UTF-8">
</head>

<body>

<img src="../Images/MyBanner.jpg" alt="A banner image of the Aguillon Town Hall" width="1012" height="256">

<h1 style="background-color:aquamarine;">This is a Heading with a background color</h1>

<p title="This web page is called Minimal Website 06">
This page contains a head element containing a title element (Minimal Website 06) and some meta data.
<br>
The title should be displayed by your browser, possibly as a tab label
</p>

<p title="I'm a tooltip">
This is a paragraph with a tooltip. Hover your mouse here and you will see the tooltip.
</p>

<img src="../Images/MyPortrait.jpg" alt="A Picure of the author" width="104" height="104">

<p>
This is a paragraph with a ruled line underneath it
</p>
<hr>

<p>
This is a paragraph with a link to W3C <a href="https://www.w3.org/">Click Here</a>
</p>
<hr>

<p style="font-family:courier; color:red; font-size: 120%">

This paragraph is displayed with a red courier font at 120% size.
<br>The three styles are chained together within a single set of quotes and delimited by semi-colons.
<br>A line break tag has been used for the second and third lines of this paragraph.
</p>
<hr>

<p style="text-align:center;">
This is a paragraph with its text aligned in the center
</p>
<hr>

<p style="background-color:gray; font-family: Times New Roman, Times, serif; color:cyan; font-size: 110%">

This paragraph is displayed on a gray background with a cyan Times New Roman font at 110% size.

<br>The three styles are chained together within a single set of quotes and delimited by semi-colons.

<br>Line break tags have been used to separate lines within this paragraph.

<br>This line uses formatting tags to create some <b>bold text</b> and some <i>italic text</i>

<br>This line uses formatting tags to create some <strong>strong text</strong> and some <em>emphasized text</em>
</p>
<hr>

</body> 
</html>

Save the HTML page as “index06.htm” and view in your browser.

 Summary of Styles & Formatting:

  • Use the style attribute for styling entire HTML elements
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use color for text colours
  • Use text-align for text alignment
  • Use background-color for an element’s background colour
  • Multiple styles for a single tag: <p style=”font-family:courier; color:red; font-size: 120%”>
  • Use Formatting tags to format text within an element

The properties of the Style Attribute are CSS properties.  Use of the style attribute and its CSS properties within HTML elements is termed inline  CSS.

CSS can be added to HTML elements in 3 ways:

  • Inline– by using the style attribute in HTML elements
  • Internal– by using a <style> element in the <head> section
  • External– by using an external CSS file

On with more advanced CSS styling  in Minimal Website 07

 

Eric Pickstone