HTML: Headings and Paragraphs

In Week One we covered Headings and Paragraphs quite quickly. This week we'll revisit them for a moment in order to show you how to add some style to them.

Example 1 - No Style
<h2>Donec Quis Enim eu Enim Viverra</h2> would produce:

Donec Quis Enim eu Enim Viverra

Example 2 - Change Horizontal Placement - By default the heading is aligned to the left margin, but we can also align it to center or to the right. Align to center is demonstrated below.

<h2 style="text-align:center;">Donec Quis Enim eu Enim Viverra</h2> would produce:

Donec Quis Enim eu Enim Viverra

Example 3 - Change Text Color - By default the color will be black. We can select a different color name or use a hexidecimal value. Hex Values represent the amount of red, green, and blue light that is combined to create color. If all shine at maximum intensity it produces white. The opposite, with all off, produces black. Hex Values range from 0 to 15, however each is a single digit, there is no 10, 11, 12, 13, 14 ,15, instead of those we use A, B, C, D, E, and F. Consider this, the Hex Value for the color red is represented as FF0000. Each pair indicates the intensity of each Red, Green, and Blue - in that order. So FF means the maximum value for red, whereas the 00 following means no Green and the final 00 means no Blue. When indicating a Hex value for a color the value is preceded by a pound symbol #. You can learn more about color names and related hex values here: http://reference.sitepoint.com/html/color-names. Now back to the example:

<h2 style="color: red;">Donec Quis Enim eu Enim Viverra</h2> or <h2 style="color: #ff0000;">Donec Quis Enim eu Enim Viverra</h2> would produce:

Donec Quis Enim eu Enim Viverra

Example 4 - Change Font - By default the font will be the default font of the browser. This is typcially a serif font like Times but could chnage if the user has selected a different default. We can change the font using a font-family style.

<h2 style="font-family:arial;">Donec Quis Enim eu Enim Viverra</h2> would produce:

Donec Quis Enim eu Enim Viverra

When selecting fonts it is important to remember to use only those that are commonly available on users computers. Also note that Windows fonts won't be the same as Macintosh fonts. What we can do to ensure the text appears as we'd like it is to use multiple font names in the style. For example, Arial is a Windows font whereas Verdana is a close cousin on the Mac. Perhaps though someone is using a different operating system, so for them we want to specify the default sans-serif font on their computer. We'd handle it like this:

<h2 style="font-family:arial, verdana, sans-serif;">Donec Quis Enim eu Enim Viverra</h2>

Example 5 - Change Font Size - By default the font size will be 100% of the default font size of the browser, or whatever the user may have set it to. We can get quite precise with font sizing and use things such as pixels or points or picas or ems or inches or centimetres... But to keep it simple we'll just use a percentage to make it either bigger or smaller than the default. Great thing about this is that the font will scale if the user needs to see larger type -- or smaller if a user likes smaller fonts. Here is an example (note the switch to paragraph tags):

<p style="font-size:80%;">Etiam convallis, magna egestas cursus sagittis, dui metus ultrices nisi, quis convallis mauris nunc eget elit. Donec sagittis elit ut ligula aliquet eget pulvinar ligula egestas. Donec quis enim eu enim viverra consectetur. Proin neque ligula, vestibulum ut adipiscing dictum, ullamcorper id orci. </p> would produce:

Etiam convallis, magna egestas cursus sagittis, dui metus ultrices nisi, quis convallis mauris nunc eget elit. Donec sagittis elit ut ligula aliquet eget pulvinar ligula egestas. Donec quis enim eu enim viverra consectetur. Proin neque ligula, vestibulum ut adipiscing dictum, ullamcorper id orci.

Here is another example:

<p style="font-size:120%;">Duis dapibus lacinia orci, at lobortis felis sollicitudin eu. Aliquam dui justo, laoreet at hendrerit eu, hendrerit eu risus. Nulla facilisis odio id nulla sollicitudin ut porttitor nunc molestie. In in nisl nulla, ac sollicitudin lorem. Vivamus sed nisl nulla. Quisque iaculis dolor eu dui placerat in varius sem tristique. </p> would produce:

Duis dapibus lacinia orci, at lobortis felis sollicitudin eu. Aliquam dui justo, laoreet at hendrerit eu, hendrerit eu risus. Nulla facilisis odio id nulla sollicitudin ut porttitor nunc molestie. In in nisl nulla, ac sollicitudin lorem. Vivamus sed nisl nulla. Quisque iaculis dolor eu dui placerat in varius sem tristique.