Take a look behind a Web page, any Web page, and you’ll find that it’s a combination of just three types of code: HTML, CSS, and JavaScript. Regardless of what happens between your computer (the client) and the computer that is holding the information about that page (the server), those three technologies are what the browser combines to get the job done and deliver the content to the screen (text, images, video, or animation).
Web pages are a little closer to the code than most designers are used to. Unlike Photoshop and Illustrator, where the code is never seen, with a Web page we can get in and play around with it, which is exactly what we will need to do if we want to get the exact visual results we desire.
It doesn’t matter whether your Web pages are created using .ASP, PHP, MySQL, Python, Java, or any other of a multitude of available server-side technologies; when the pixel hits the screen on the browser side, you can be guaranteed that the browser is using one or all of these three core Web technologies to show it to you:
HTML provides structure, telling the browser what each element on the page is. HTML “tags” each piece of content, specifying whether it’s a headline, a paragraph of text, an image, a table, a list, and so on. HTML does not actually tell the browser how those elements should look; it only defines what they are.
CSS provides presentation, telling the browser how each element should appear on the screen. CSS provides control over color, typography, sizes, and layout—whether an element is blue or brown, helvetica or arial—everything that goes into visually displaying the page.
JavaScript provides functionality, allowing the page to interact with the user and change after it has loaded. JavaScript lets you program the page, allowing everything from simple drop-down menus to full-blown Web-enabled apps.
A Web page document is a collection of different objects created using HTML and represented by something called the Document Object Model (DOM). DOM sounds kind of “techy,” but really a model is simply a representation of something, an object is a part of that something, and the document is the something being represented. So, the DOM is a model of all the elements that make up your Web page, like a map to all the different pieces. Like a map, the DOM is not the page itself, but a way of representing the page so that we can think about its structure.
Each of the three core Web technologies has its own role to play in that map:
HTML defines objects, with each HTML tag creating a new unique object on the page that CSS can then style and JavaScript can change. For example, a header is an object, a paragraph is an object, and an image is an object.
CSS styles the objects, hooking into the HTML tags to style them individually or as a group and give each object a unique name called an ID.
JavaScript changes the objects, allowing you to make style and other changes to any object created with an HTML tag. For example, we can show an object, hide an object, or change the color of an object.
The Hypertext Markup Language (HTML) structures your Web page by placing tags—small bits of code—around the different elements to tell the browser what a particular chunk of content is. CSS can then tell the browser what each of those chunks of content look like.
The different elements in the page are simply tagged to indicate their function: paragraphs are tagged with <p>...</p>, tables with <table>...</table>, list elements with <li>...</li>, and page headers with <h1>...</h1>. Most HTML code will tag the beginning of an element with an open tag and the end of an element with a close tag. So, a typical header will look like this:
<h1>Welcome</h1>
As you would expect, a header puts a hard return above and below to set itself apart from other elements on the page. This is called a block element. Now that an element has been defined on the page, CSS can come along and tell the header exactly what it should look like: what font family to use, what color the text should be, its margins, border, padding, size, and other attributes. If we wanted the text to be a red, we might add code like this:
h1 { color: red; }
We could even tell the header to suppress the hard return above and below, turning it into an inline element.
JavaScript adds interactivity to your Web page, through a script that tells the browser what to do when a particular action takes place. CSS sets the initial appearances on the page, which JavaScript can then change.
The scripts are used mostly to control elements on the page as the user interacts with them—showing menus, checking that form data has been entered correctly, and that sort of thing. But the capabilities of JavaScript have grown over the years so that it is now possible to create full-blown Web-enabled applications.
JavaScript works through the DOM to control the elements on the screen (created by the HTML tags) by changing the CSS values. For example, we might set the color of level-1 headers (<h1>...</h1>) to be a red:
h1 { color: rgb(255,0,0);}
Many sites allow users to choose the color scheme they see while at the site. One way to make this change would be to use JavaScript to dynamically change the color property:
object.style.color=rgb(153,51,41);
In this code, the variable object stands in for the object we want to make style changes to. It is derived from the DOM path to the <h1> tags. The full JavaScript code for finding the object would be something like:
object=document.getElementByTagName(‘h1’);
This tells the JavaScript to find the header level-1 tags in the document so that we can make changes to their styles. There are many ways to find the objects on the page to make changes to them, but this is a book about CSS, not JavaScript, so we’ll leave it at that for now.
Although no one seems to talk about it much, CSS can be applied to Flash files to control their appearance. So, there are a mess of caveats—for example, it’s only used for styling text and you have to use ActionScript to load the external CSS file—but it is doable.
Just like CSS with HTML, using CSS with Flash can save you a lot of time when your client tells you two days before the site is supposed to launch that they don’t want to use green hypertext links because green is an unlucky color (yes, this has happened to me). Without CSS, Flash will embed styles directly into the .swf file, making them difficult to change on a large scale. Imagine trying to change all of your link colors if you had to open dozens of individual Flash files! With CSS, you can change a single line of code to update your entire site to the new color.
Where the CSS/Flash partnership will really shine, though, is when you style XML formatted data. Since XML allows you to, in effect, create your own “tags,” CSS is a natural to style these tags.