The original HTML specifications lacked style attributes. Into that vacuum leapt the companies that produced browsers. Netscape introduced the <center> tag for centering a variety of HTML page elements.
HTML 3.2, proposed in 1994 and adopted in 1996, recognized the Netscape <center> tag.
By 1996 the evolutionary direction of the web, the needs of challenged users, the variety of web page display devices, and the needs of those involved in site management made it clear that web page content and style should be separated. Web browsers and viewers for television, palm top, and mobile phone display were in development. Browsers for the blind and sight impaired needed content and structure information that was dependent on style elements. The sight-impaired especially needed the capacity to specify their own style preferences. Achromats, for example, require low contrast low surface brightness web pages. Text only browsers such as Lynx would also benefit from the separation of style elements.
The need to separate the content and structural elements from the style elements became clear. The result was the development the cascading style sheets (CSS) standard under HTML 4.0. Beyond meetings the needs of special users and unique display devices, CSS allowed one to control the style specifications for a whole web site consisting of thousands of pages from a single text file.
With CSS one has, at the minimum, a single .html web page file and a single .css cascading style sheet. Both are actually simple text files and can be created with notepad.
With the publication of HTML standard 4.0, the Internet standards body announced that future versions of HTML would not support the <center> and <font> tags. Other vendor specific tags that were supported by HTML 3.2 such as <marquee> were no longer supported in HTML 4.0. Tags for which support will end in a future version are termed "deprecated" and their use is discouraged. Tags for which support has been terminated generate errors under strict document type definitions for that version of HTML.
Suppose one wants to center <h1> and <p> elements on a web page. Note that the use of lowercase for the elements is intentional: HTML 4.0 specifies that all tags should be lowercase. The only exception is the Document Type Definition statement. In the successor to HTML 4.0, XHTML 1.0, lowercase tags are a requirement.
The simplest pair of minimalist files to accomplish the centering of <h1> and the <p> tags are:
HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Centered h1 and p elements in HTML with CSS</title>
<link href="mystyle.css" rel="stylesheet"
type="text/css">
</head>
<body>
<h1>Header Level One</h1>
<p>Paragraph text.</p>
</body>
</html>
Make sure that the stylesheet link tag is exactly correct and located in the header after the title!
CSS file is a text file named mystyle.css and in same folder as HTML file:
h1 { text-align: center }
p { text-align: center }
Those two lines are the whole CSS file at this point.
The catch is that this centers all paragraph text, as well as all header level one text. Suppose one only wants some paragraphs of text to be centered. Then one needs to add a class specification to the style sheet and then invoke that class in the HTML file.
The new CSS file mystyle.css will look like:
h1 { text-align: center }
p { text-align: left }
.nanwerenge {text-align: center }
Note the period in front of the nanwerenge. The period is critically important, this specifies that what follows is a class specification. Any paragraph that is to be centered in the HTML file will use the following HTML:
<p class="nanwerenge">Centered text</p>
Any paragraph using <p> without the class specification will be left aligned:
<p>Left aligned text</p>
Under HTML 4.01 the "align" attribute for the <img> tag element is no longer strictly supported. If one wants to align some images right and some left the solution is once again class specifications in HTML. The following pair of lines added to the CSS file will provide the necessary classes:
.palimaun { float: right }
.palimeing { float: left }
The class names are arbitrary, but avoid using HTML and CSS reserved words. There is a recommendation to use descriptive names such as "citation" or "quotation" for readability.
To "float" an image on the right side of a page:
<img class="palimaun" src="imagename.jpg" alt="Description">
To "float" an image on the left side of a page:
<img class="palimeing" src="imagename.jpg" alt="Description">
Further below is a full-blown cascading style sheet called turquoise.css. A test-bed web page using this style sheet can be seen at: http://shark.comfsm.fm/~dleeling/cis/css_turquoise_testbed.html The CSS file can be obtained from: http://shark.comfsm.fm/~dleeling/turquoise.css Use the notepad to open that file if asked.
The turquoise.css stylesheet uses a number of features including grouping of selectors in the first line to eliminate repetitive specification common to multiple selectors (selectors are html tag elements). Comma separated lists of selectors are groupings.
Be careful: if a common is omitted then the result is a style specification for a nested element. Nesting can be used to create multi-level outlines. See http://shark.comfsm.fm/~dleeling/statistics/stat_q06_2001_03.html and its associated stylesheet http://shark.comfsm.fm/~dleeling/bluepurplist.css for an example of nested <ol> elements with different non-default styles.
The turquoise.css stylesheet is not CSS2 compliant because it is using CSS3 proposed X11 colors. Other than those generated by the use of X11 colors, the stylesheet has no CSS2 errors or warnings. For information on X11 see http://www.w3.org/TR/css3-color#x11-color There is a nice X11 chart at: http://www.mcfedries.com/books/cightml/x11color.htm
The style sheet includes stylistic control of the four possible states for a hyperlink and the class attributes introduced above along with the ability to float images using class specifications. The nanwerenge class centers text, italicizes the text, and lets the browser pick a generic default serif font to display the text.
body, a, caption, h1, h2, h3, h4, h5, h6, p, ol, ul, hr, table, td {
background-color: white;
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif
}
a:link { color: DarkCyan }
a:visited { color: DarkSlateGray }
a:hover { background: Turquoise }
a:active { background: DarkCyan; color: white }
caption { font-size: smaller; color: DarkSlateGray }
h1 { color: Turquoise }
h2 { color: MediumTurquoise }
h3 { color: DarkTurquoise }
h4 { color: DarkCyan }
h5 { color: Teal }
h6 { color: DarkSlateGray }
p, ol, ul {color: black }
table { border: thin solid DarkTurquoise; font-size: smaller }
td { border: thin solid DarkSlateGray }
th { background: Turquoise; color: black }
hr { color: DarkTurquoise }
pre { font-family: Courier New, Courier, monospace }
.palimaun { float: right }
.palimeing { float: left }
.nanwerenge {text-align: center; font-style: italic; font-family: serif }