HTML/CSS: Formatting Text

Text Containers


Text can be easily displayed in HTML by simply typing text inside the body tags. However, this does not follow our standards. For a page to be valid, all body content must be in a block level container. While there are several such types of block level containers in html, we will be focusing on two of them: heading tags and div tags. This page will also discuss an inline container called a span. All span tags must be contained inside a block level element.

Div Tags
Div tags (<div>...</div>) are used to denote a page division. That division may be different sections or even paragraphs. Div tags do not have any type of pre-formatting defined (like the bold in a header). Div tags are block level elements, meaning that they are the full width of the page and have built in line breaks before and after. 

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
Div 1
Div 2
Div 3
Span Tags
Span tags(<span>...</span>) are non-formatted tags and place no pre-formatting on their contents. Span tags are called inline elements which means that a span tag does not force a line break AND is not a block level container. This means that span tags must be written inside div or heading tags. Span tags are useful for formatting pieces of text, such as underlining a book title and bolding or coloring words for emphasis. Using a span tag for formatting requires the use of the style attribute and some basic CSS.

<span>Span 1</span>
<span>Span 2</span>
<span>Span 3</span>
Span 1 Span 2 Span 3
Display Style
The display style property allows programmers to control/alter the type of element that a tag represents. Value options for the display style include block, inline, and inline-block. By applying these styles, we can make a div act like a span by applying display:inline and vice-versa by applying display:block. While this is not often necessary, the last option, inline-block, is a very useful style.

Block level elements, besides having line breaks and being full width, have certain styles that can be applied to them such as width and height. But, block level elements cannot be on the same line. Conversely, inline elements are on the same line, but cannot have width and height properties applied to them. So, if we take a set of divs or spans, and apply the display:inline-block property, they will display the same - acting as an inline element, but allowing block level styles to be applied. 
<style>
	div{
	    display:inline-block;
	    width:100px;
	    background-color:blue;
	    color:gold;
	}
</style>
...
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
div 1
div 2
div 3

HTML Heading Tags

HTML provides a set of tags for creating consistent headings within a page and/or site. The heading tags are labeled with numbers from 1 (the largest) to 6(the smallest). The heading tags are block level elements, which means that they have a line break before and after AND their width is the full width of the page. Here are the heading tags in action: 
<h1>Level 1</h1>
<h2>Level 2</h2>
<h3>Level 3</h3>
<h4>Level 4</h4>
<h5>Level 5</h5>
<h6>Level 6</h6>

Level 1

Level 2

Level 3

Level 4

Level 5
Level 6

Classes & Id's

If all of our text is embedded in div and span tags, the CSS tag rules that we are writing will not allow us to create a variety of text in the document. If we create a div rule, it will apply to all divs. What if the design calls for half of the divs to be red with white text and the other half to be white with red text?

In this case, we make a CSS class. A class is a style rule that is conditionally applied. In other words, we can create several rules for different divs and apply each rule as desired. To make a class in CSS, we choose a name (think variables) and place a period (.) in front of it (lines 4 and 8). Then we apply style rules as normal. To call the class, we use the class attribute in the desired tag (lines 22, 23 and 24).

Often, there are special sections on a page that require special formatting. These areas may include the header, navigation, footer, etc. Each of these areas are unique in a page. In other words, they appear only once on a page. To create special formatting in an internal style to be applied to a single area on a page, we use an id. Id's are created just like classes in CSS, except they use a # to denote them (line 12) and they can only be applied to a single element on the page. In the html, we use the id attribute to call the style (line 21). 
<head>
	<title>...</title>
	<style>
		.whiteOnRed {
			background-color:red;
			color:white;
		}
		.redOnWhite{
			background-color:white;
			color:red;
		}
		#nav {
			border: 2px solid red;
			font-weight:bold;
			background-color:black;
			color:red;
		}
	</style>
</head>
<body>
	<div id='nav'>Home | About | Products | Contact</div>
	<div class='whiteOnRed'>This is white on red.</div>
	<div class='redOnWhite'>This is red on white</div>
	<div class='whiteOnRed'>This is white on red</div>
	<div class='redOnWhite'>This is red on white</div>

Text Styles


Any html tags that allow text inside of them, will allow for the style attribute to be present, including body, div, h1, and span. Once the style tag has been placed, inline text formatting can be rendered using the following CSS options (value choices are separated by |).

Here are some examples of text formatting at work.Note: In each example, there is a div wrapped around the sentence because ALL content on a page should be inside a block level element. The examples use span tags to alter the appearance of specific words or phrases in the sentence.

Display the word bold in bold
<style>.bold{font-weight:bold;}</style>
...
<div>Display the word <span class='bold'>bold</span> in bold</div>
Make the word highlight look like it is highlighted.
<style>.highlight{background-color:yellow;}</style>
...
<div>Make the word <span class='highlight'>highlight</span> look like it is highlighted.</div>
Make the word this appear underline and red.
<style>.special{color:red; text-decoration:underline;}</style>
...
<div>Make the word <span class='special'>this</span> appear underline and red.</div>
Make the word big and the word small.
<style>
	.bigger{font-size:2em;}
	.smaller{font-size:.5em}
</style>
<div>Make the word <span class='bigger'>big</span> and the word <span class='smaller'>small</span>.</div>
Make the sentence appear in a different font.
<style>.codeFont{font-family:Lucida Console, serif;}</style>
...
<div class='codeFont'> Make the sentence appear in a cool font.</div>

Google Fonts

One of the problems with changing the font-family in CSS is that only fonts that are loaded on the viewing machine are available. This means that your wonderfully designed site may not look the same in all browsers, based on user font downloads. This is part of the reason for the allowance of a comma-separated list of fonts. To avoid font substitutions, for many years, developers worked from a list of "web safe" fonts including Arial, Georgia, Verdana and Times New Roman.

Recent developments have allowed Google to create a library of fonts accessible by any website on the internet. This means that if you select your font from Google Fonts, each viewer of your site will see it exactly the same way. Google fonts only work when your computer is connected to the internet and will not work in local development environments with no internet/wifi connection.

Here is the process to use a Google font in your site. Start by proceeding to Google Fonts at http://fonts.google.com.
  1. Browse the font collection and find the fonts you want to use in your site. Select your desired style(s) by clicking the +select this style link
  2. Once you have the font styles you desire for your page, click the button to View Your Selected Styles.


In the selected families window:
  1. Click the Embed button
  2. Click the <link> button
  3. Highlight and copy the code in the link tag using Ctrl-C


In your web page code:
  1. Paste the link code inside the head tag
  2. Assign the font name to the font-family style in the desired element

Advanced CSS Styling

CSS has capabilities to be as specific or as general as desired. This means that we can dig into the HTML structure to identify specific patterns or make general rules that can be applied in a variety of situations. Some of the syntax is very close, so look carefully at the following examples of these situations.

div.blue{ css code }
These styles would only be applied to div with the class blue applied 
div .blue{ css code }
These styles would only be applied to tags with the blue class inside of a div tag 
div, .blue{ css code }
These styles would be applied to all div tags AND all tags with the blue class applied 
#nav span.active{ css code }
These styles are applied only to a span with the active class applied inside of the element with id nav 
<div class='blue nav' >
This element is applying two different classes: blue and nav.