Early webpages had the ability to look more or less like the examples I've given so far in Lessons 2 and 3, which are fairly colorful, with background images, centered elements, borders, and larger and smaller text. Fonts could also be defined within the HTML document, which I haven't done much of in preceeding lessons. (Try viewing them on various different devices for different text experiences!) However, unless you've been poking around inside the <style> elements in the source, (which I've repeatedly promised to explain in a later lesson — this is that lessson!), using what I've talked about so far, you should only have been able to create a page that looks vaguely like this:
It's structurally sound, but not very pretty. So, how can we change the look and feel of this page? Back in the stone ages, the mid-90s, we used to style elements using attributes, which were described in the source code for Lesson 2. As a refresher, here's the general layout of a self-closing element within an HTML document:
<elementname attributename="value" />
Example: <img src="images/flowersplash.png" alt="A pretty pink flower" />
Nowadays, attributes are mostly used for structural purposes — to point to a resource, describe desired behavior, or give context for accessibility purposes — but it was previously used to tell the browser how to style elements, as well. Here's an example of how we might have defined the style of a paragraph element using old, outdated methods:
<center><p><font face="Times New Roman" color="lightblue" size="5">Here's some centered, blue text in the Courier font, declared some arbitrary size "5" which is interpreted by your browser!</font></p></center>
Result:
Here's some centered, light blue text in the Times New Roman font, declared some arbitrary size "5" which is interpreted by your browser.
That's a lot of tags! And it's messy! And it doesn't contribute any structural meaning to our Document Object Model! Speaking of which…
Remember back in Lesson 1 when I talked about the Document Object Model? I said that the DOM "lays out the order and structure an HTML file should follow," and that "elements of the DOM … can be manipulated within the DOM."
"Okay," you may say to yourself, "what does any of that mean?" The basic HTML you've been writing up to this point defines the content of the page, but not its style. Every element is defined as a child of its parent element by nature of being nested within that element. Every element also has a semantic meaning — it explains what it is in its name. An "img" is always an "image." A "p" is always a "paragraph." Deprecated (obsolete) tags like "font" and "center" in the above example don't define anything. They just tell the browser how to style something else. That's why I said they don't contribute any structural meaning to our document.
We can maintain a well-structured DOM and still style the elements within it using a technology called CSS, or "Cascading Style Sheets." CSS targets elements of the DOM (tags) with specific style information. This allows every element in our HTML document to have semantic meaning while also letting us make things prettier.
Here is an example of how to achieve the same effect as old, unsemantic HTML styles using CSS instead:
<p style="text-align: center; font-family: Times New Roman, serif; font-size: 18pt; color: lightblue;">Here's some centered, light blue text in Times New Roman font (or some other serif font, if your system doesn't have Times New Roman installed), with its size set to 18pt.</p>
Result:
Here's some centered, light blue text in Times New Roman font (or some other serif font, if your system doesn't have Times New Roman installed), with its size set to 18pt.
There's only one, semantic element with all styling determined by a single attribute! It may seem like there's no big difference between these two examples, but CSS styles allow more flexibility when used in a slightly different way, which I will outline below.
Cascading Style Sheets are lists of styles which cascade, or flow downward, in precedent. What does this mean? To fully explain this, let's first look at three methods of defining styles under CSS.
We can link to our stylesheets within the "head" element of our HTML document. This looks like:
<head>
…
<link rel="stylesheet" href="../style.css">
</head>
The linked file will end in a ".css" extension and will contain a list of styles that will apply to each element in the page. The rules for each element will be applied to every single instance of the listed element within the document. This is an example of a .css file.
You can also list styles at the top of an HTML document by placing them within the head of the document directly. To do this, we will use a "style" element:
<head>
…
<style>
body {
background: white;
color: black;
}
</style>
</head>
If you place a "link" element before your "style" element, the style element will take precedence over the link element. In other words, if both the "link" element and "style" element contain rules for the "body," with the externally linked stylesheet telling the background to be grey and the internal style telling the background to be white, the background will be white.
An inline style is the kind we first showed in the example with the light blue text. This is accomplished by placing a "style" attribute directly within an element's tag in the main body of your HTML:
…
<body>
…
<p style="color: lightblue;">Here's some light blue text.</p>
…
</body>
</html>
Inline styles will take precedence over both externally linked stylesheets and internal styles. In this way, precedence cascades from top to bottom.
Once you familiarize yourself with the basics of CSS, you should have no trouble applying basic styles to your Myspace, Wordpress, or Neocities website. You can apply them to the example site listed above and end up with this monstrocity:
This page is getting far too long, so we'll move on to divs, spans, classes, and ids next time on Dragon Ball Z. In the meantime, check the source of both example pages in the iframes above and brush up on basic CSS at W3Schools or at Rachel Andrews' CSS Layout Workshop.