HTML and CSS Features

Quick Review

HTML markup defines the structure of a document — the logical function of each element. Examples are headers, paragraphs, lists, tables, links, images, and so on.

In other words, HTML markup tells what each element of a document is supposed to be.

For example, the previous line was marked up as:

<p>In other words, HTML markup tells
<em>what</em> each element of a document is supposed to
be.</p> 
<p> … </p> defines a paragraph while <em> … </em> defines a word or phrase that should be emphasized.

While HTML is a system for defining WHAT, CSS is a set of rules telling HOW each element is to be presented (i.e., the “look and feel”).

In theory, HTML has nothing to do with screens, printers, fonts, colors, line breaks, or any other kind of formatting. For example, that emphasized element might be in italics, it might be bold, it might be in color, or it might be underlined, depending on the wishes of the author and the capability of the medium. If the document is being read out loud, emphasis might be shown by a change in volume, tone, or whatever. A paragraph might be indicated by a preceding blank line and/or indenting the first word. In a correctly done document, all such decisions are made by CSS.

For example, this CSS rule would make all emphasized elements have a red background:

em  {background-color: red}

CSS rules can be in four different places. In order of increasing priority, they are:

  1. The defaults built into the browser (or other display program). Every browser has built-in CSS which is used as the default for any element where the author hasn’t provided a specific style. For example, Firefox (and most browsers) will default to using italics for an emphasized element, so a simple HTML document might not need any CSS at all.
  2. A separate file called a style sheet which is referenced in the head section of an HTML document. This has the advantage that the same style sheet can be used for multiple documents.
  3. CSS rules that are unique to a particular document are usually placed in the head section itself, between <style> … </style> tags
  4. In emergencies, the CSS rule can specified as part of an individual HTML element directly in the document, although this takes away most of the benefits of CSS. For example, this emphasized element (and only this one) is blue on a grey background, courtesy of this markup:
    <em style="color:blue;background-color:lightgrey">this</em>
    
    A better way is to define a class in your style sheet or header:
    .bluegrey {color:blue;background-color:lightgrey}
    
    Then you can say things like <p class="bluegrey"> or <em class="bluegrey"> as necessary anywhere in your markup.

Each possible rule over-rides anything above it if there is a conflict. This is the “C” in CSS — Cascading Style Sheets.

Plug-In CSS

Most of the special effects on this page were created by using the ready-to-go CSS classes described in Robin Nixon’s book Plug-In CSS — 100 Power Solutions. To create an effect, I simply added an appropriate pre-defined class to an HTML element. For example, the fading image at the top was created by simply adding class="fadeout[5000]" to the IMG tag as follows:

<img  class='fadeout[5000]' src="scriptorium.jpg">
The argument is the number of milliseconds for the fade — five seconds. Similarly, the rounded border around the preceding paragraph was produced by adding
class="bsolid round"
to the <p> tag.

This paragraph looks perfectly innocent unless you hover the mouse over the first letter of the paragraph, whereupon the /T/ suddenly turns into a drop cap, with the rest of the paragraph re-formatting around it automatically. To do this, the first letter was “isolated” with <span class="dropcap_h">T</span>. (If I had wanted the drop cap to be there all the time, it would have been class="dropcap".)

All the effects pretty much work the same way. The following lines were added to the head section of the document, which made all the necessary CSS and Javascript classes available.

<link rel='stylesheet' type='text/css' href='PC.css' />
<script src='PJ.js'></script>
<script src='PC.js'></script>
(In this case, the .css and .js files are in the same directory as the HTML file. If not, the pathnames should be adjusted as appropriate.)

To obtain the code I’m using here, you do not have to buy the book. They can be freely downloaded from the book’s web site at http://plugincss.com. Create a directory of your choice (I called it cssplugins) and unzip the downloaded file into it. You’ll get the .css and .js files and 100 short HTML example files, one for each effect. You can figure out the proper usage by browsing the example code and using some guesswork, but if you’re serious I’d recommend buying the book for the detailed explanations and, of course, to play fair with the author.

Here’s another example of an eye-catching effect generated by simply putting class="quote" on the <p> tag for this paragraph.

Here are a few of those provided examples, showing effects you might find useful:

Effects from “Straight” CSS

The Glowing Headers

In colors

are created by these CSS rules:

h1   {text-shadow: 2px 2px 4px #800;}
h2   {text-shadow: 2px 2px 4px #080;}
and the fact (which you might not have noticed) that all the paragraphs are fully justified:
p   {text-align: justify; text-justify: auto;}
The contrasting code sections were generated by:
pre   {background-color: #ddd;}
code  {font-size:120%; font-weight:bold;} 

By the way, I can finally say that, for example, standard CSS code like text-shadow works for the majority of users. That is to say, it is supported by Internet Explorer version 10 and later, as well as every other browser in the universe. Note that the plug-in classes I described in the previous section all have work-arounds if they detect IE, or at least they degrade gracefully so IE users don't realize what they are missing.

Images Using Lightbox

Quite a few web sites now use Lightbox or similar Javascript for displaying images overlaid on the existing page, like this. Newer versions of Lightbox allow you to link several images together like this cartoon. These effects are created by adding the following lines to the HTML head section:

<script src="lightbox/js/jquery-1.10.2.min.js"></script>
<script src="lightbox/js/lightbox-2.6.min.js"></script>
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
Where you want to display a single image, insert:
<a href="earthshadow.jpg" data-lightbox="somename" title="Earth Shadow During Eclipse">like this</a>
If you want multiply linked images, use:
<a href="Lucy1.jpg" data-lightbox="peanuts">cartoon.</a>
<a href="Lucy2.jpg" data-lightbox="peanuts"></a>
using the same name (“peanuts” in this case) for each image. Note that only the first link has the link text (“cartoon” in this example), and that I didn’t bother with a title.

Lightbox can be obtained from http://lokeshdhakar.com/projects/lightbox2/

HTML 5 and CSS 3

Coming soon…


Last modified: Wed Jan 15 02:45:09 CST 2014