Cascading Style Sheets (CSS)

Remember earlier in this course we stated that HTML is a markup language, not a layout or formatting language. But, to make web pages more interesting and pleasing, we need to format content with power similar to the print world.

You'll notice in this document, for example, that the headings are red, and the text is a dark blue; and the background is a "line paper" image. These characteristics are all defined in an external Cascading Style Sheet (CSS).

A CSS file can define the formatting for every HTML element. And the truly great benefit of an external CSS file? You can include all of these formatting definitions in a single file and link it to every page in a web site. Then, if you need to make a style modification, you make it in one place and it automatically gets applied to every page that links to that CSS file.

A CSS file (which, by the way, is just a text file) defines the characteristics for as few or as many HTML elements as you want to define. We've created a simple CSS file for our Declaration of Independence example, as follows (the file is named DECLARATION.CSS):

body	{ font-family: "Book Antiqua", "Century Gothic", Courier; font-size: medium; font-style: oblique; color: #663300; background-image: url(../images/parchment.gif)}

p	{ font-family: "Times New Roman", Times, serif; font-style: oblique; color: #663300}

h1	{ font-family: "Book Antiqua", "Century Gothic", Courier; font-size: xx-large; font-weight: bold; color: #663300; text-align: center}

h2	{ font-family: "Book Antiqua", "Century Gothic", Courier; font-size: large; color: #663300; text-align: center}

li	{ font-family: "Times New Roman", Times, serif; font-variant: small-caps; color: #663300}

Reading through the CSS file, you can see there are definitions for the <BODY>, <P>, <H1>, <H2>, and <LI> elements, with font and alignment definitions, as well as a background image for the file.

Practice Your HTML Skills

We will point to a pre-defined CSS file located in the HTML Basics course folder. Let's see it in action:

Click the View It button to see the HTML file displayed in your browser without a link to a CSS. Notice the "plain" display of the file...that is because all of the HTML elements are using the default display characteristics of the browser.
Modify the example to link a Cascading Style Sheet (make sure you view Step 1 before you so link the CSS so that you can see how these elements change).

To link the CSS, type the following immediately after the <HEAD> tag:

<link rel="stylesheet" href="http://www.grantcom.us/html/styles/declaration.css" type="text/css">
Click the View It button to apply the CSS characteristics to the HTML file. You can see quite a difference in the display because the elements used in the document (BODY, H1, H2, P, LI) all take their display definition from the external CSS.

HTML EDITOR

<HTML> <HEAD>  <TITLE>The Declaration of Independence </TITLE> </HEAD> <BODY> <IMG src="http://grantcom.us/html/images/congress.jpg" alt="Continental Congress, 1776" border="0" align="right"> <P> <H1>The Declaration of Independence</H1> <H2>A Transcription</H2> <H2>IN CONGRESS, July 4, 1776</H2> <P> <CENTER>The unanimous Declaration of the thirteen united States of America,</CENTER> <P> When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation. <P> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.--Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States. To prove this, let Facts be submitted to a candid world. <UL> <LI>He has refused his Assent to Laws, the most wholesome and necessary for the public good. <LI>He has forbidden his Governors to pass Laws of immediate and pressing importance, unless suspended in their operation till his Assent should be obtained; and when so suspended, he has utterly neglected to attend to them. <LI>He has refused to pass other Laws for the accommodation of large districts of people, unless those people would relinquish the right of Representation in the Legislature, a right inestimable to them and formidable to tyrants only. <LI>He has called together legislative bodies at places unusual, uncomfortable, and distant from the depository of their public Records, for the sole purpose of fatiguing them into compliance with his measures. <LI>He has dissolved Representative Houses repeatedly, for opposing with manly firmness his invasions on the rights of the people. <LI>He has refused for a long time, after such dissolutions, to cause others to be elected; whereby the Legislative powers, incapable of Annihilation, have returned to the People at large for their exercise; the State remaining in the mean time exposed to all the dangers of invasion from without, and convulsions within. <LI>He has endeavoured to prevent the population of these States; for that purpose obstructing the Laws for Naturalization of Foreigners; refusing to pass others to encourage their migrations hither, and raising the conditions of new Appropriations of Lands. <LI>He has obstructed the Administration of Justice, by refusing his Assent to Laws for establishing Judiciary powers. <LI>He has made Judges dependent on his Will alone, for the tenure of their offices, and the amount and payment of their salaries. <LI>He has erected a multitude of New Offices, and sent hither swarms of Officers to harrass our people, and eat out their substance. <LI>He has kept among us, in times of peace, Standing Armies without the Consent of our legislatures. <LI>He has affected to render the Military independent of and superior to the Civil power. <LI>He has combined with others to subject us to a jurisdiction foreign to our constitution, and unacknowledged by our laws; giving his Assent to their Acts of pretended Legislation: <LI>For Quartering large bodies of armed troops among us: <LI>For protecting them, by a mock Trial, from punishment for any Murders which they should commit on the Inhabitants of these States: <LI>For cutting off our Trade with all parts of the world: <LI>For imposing Taxes on us without our Consent: <LI>For depriving us in many cases, of the benefits of Trial by Jury: <LI>For transporting us beyond Seas to be tried for pretended offences <LI>For abolishing the free System of English Laws in a neighbouring Province, establishing therein an Arbitrary government, and enlarging its Boundaries so as to render it at once an example and fit instrument for introducing the same absolute rule into these Colonies: <LI>For taking away our Charters, abolishing our most valuable Laws, and altering fundamentally the Forms of our Governments: <LI>For suspending our own Legislatures, and declaring themselves invested with power to legislate for us in all cases whatsoever. <LI>He has abdicated Government here, by declaring us out of his Protection and waging War against us. <LI>He has plundered our seas, ravaged our Coasts, burnt our towns, and destroyed the lives of our people. <LI>He is at this time transporting large Armies of foreign Mercenaries to compleat the works of death, desolation and tyranny, already begun with circumstances of Cruelty & perfidy scarcely paralleled in the most barbarous ages, and totally unworthy the Head of a civilized nation. <LI>He has constrained our fellow Citizens taken Captive on the high Seas to bear Arms against their Country, to become the executioners of their friends and Brethren, or to fall themselves by their Hands. <LI>He has excited domestic insurrections amongst us, and has endeavoured to bring on the inhabitants of our frontiers, the merciless Indian Savages, whose known rule of warfare, is an undistinguished destruction of all ages, sexes and conditions. </UL> <P> In every stage of these Oppressions We have Petitioned for Redress in the most humble terms: Our repeated Petitions have been answered only by repeated injury. A Prince whose character is thus marked by every act which may define a Tyrant, is unfit to be the ruler of a free people. Nor have We been wanting in attentions to our Brittish brethren. We have warned them from time to time of attempts by their legislature to extend an unwarrantable jurisdiction over us. We have reminded them of the circumstances of our emigration and settlement here. We have appealed to their native justice and magnanimity, and we have conjured them by the ties of our common kindred to disavow these usurpations, which, would inevitably interrupt our connections and correspondence. They too have been deaf to the voice of justice and of consanguinity. We must, therefore, acquiesce in the necessity, which denounces our Separation, and hold them, as we hold the rest of mankind, Enemies in War, in Peace Friends. <P> We, therefore, the Representatives of the united States of America, in General Congress, Assembled, appealing to the Supreme Judge of the world for the rectitude of our intentions, do, in the Name, and by Authority of the good People of these Colonies, solemnly publish and declare, That these United Colonies are, and of Right ought to be Free and Independent States; that they are Absolved from all Allegiance to the British Crown, and that all political connection between them and the State of Great Britain, is and ought to be totally dissolved; and that as Free and Independent States, they have full Power to levy War, conclude Peace, contract Alliances, establish Commerce, and to do all other Acts and Things which Independent States may of right do. And for the support of this Declaration, with a firm reliance on the protection of divine Providence, we mutually pledge to each other our Lives, our Fortunes and our sacred Honor. <form> <input type=button value="Close Window" onClick="javascript:window.close();"> </form> </BODY> </HTML>

Copyright © 2001 Michael J. Doyle
All Rights Reserved.

Designed & Developed by Mike Doyle
using Macromedia Dreamweaver & CourseBuilder

See Mike's Training Schedule for
HTML, Dreamweaver, & CourseBuilder Courses

Email Mike Doyle