Creating a Website Tutorial
Create Style With Cascading Style Sheets (CSS)
You got a sneak preview in the last lesson about what was to come in this lesson: Cascading Style Sheets, or CSS for short. CSS makes it possible to separate the content of a page from its presentation. For instance, take the Gingerbread House webpage as an example of why the separation of content from presentation is so incredibly useful. The photo album uses seven photos, and each one has a small, white border surrounded by a thin black line. I thought it looked better this way—like a framed picture hanging on a wall. Rather than specify this information in every place where a photo is displayed, however, I marked it at the beginning of the page just once, then automatically applied that style to every single photo on the page.
And if I wanted to change the color of the frame, or widen it, or any of hundreds of other possible changes, I can make the change in one place, and it'll automatically apply to all of the images on the page.
That's a very powerful feature. In fact, the themes here on Atlas Quest depend on it. You can create a large, complex website and drastically change the entire look of it with a single change in the CSS. And in this lesson, you'll learn how to do just that.
Creating a Style Rule
At the most simple, a style contains a selector and a series of properties and values. As an example, let's examine a style rule used right here on Atlas Quest:
There's a lot to be learned from this example, and we'll take it one step at a time. First, the h1 is the selector and says that this style will apply to all text between h1 tags. Then comes curly braces, between which marks the actual styles to be applied to your main headers.
Then come one or more property-value pairs that make up the style. The margin property puts space around an element. The value can include from one to four numbers, indicating the amount of space to apply to various sides of the element. If one value is specified, it will be applied to all four sides of the element. If two values are specified, the first one applies to the top and bottom of the element, and the second one applies to the left and right sides. Three values, such as the one used here, specifies the margin on the top, sides, and bottom of the element respectively. In this case, we are telling the browser not to allow any extra space above or on the sides of the h1 element, but to leave a space of 4 millimeters below the element. And if four values are used, they would represent the top, right, bottom, and left sides of the element respectively.
In our example, the size of the space is millimeters. You have multiple choices for specifying size, however, including pixels (px), inches (in), centimeters (cm), millimeters (mm), points (pt) and picas (pc). These are all absolute measurements—you can also choose relative sizes including percentages or em. An em is relative to the current font size, so writing 2em would be equal to twice the current font size.
You must specify the units for each size you specify with the exception of 0, which is the same regardless of the unit. (Not that it hurts to include units even then.) So if you wanted to, you could create a very convoluted property-value pair such as margin: 2.5em 20mm which will create a margin with 2.5ems of space at the top and bottom of your element and 20 millimeters of space on the sides.
The font-size, of course, specifies the size of your font. Like the margin, you can use pixels, inches, centimeters and any other unit of value that's convenient. In our case, we used ems which tells the browser that our main header's font should be three times larger than normal sized text.
The border attribute has all sorts of useful purposes, and in this case, to really make my main headers stand out, I wanted to draw a thin line under them. You can specify borders for any or all sides of any element. Since the headers on Atlas Quest only needed a thin line on the bottom of the element, it uses the attribute border-bottom. As you might guess, you can also use border-top, border-right, and border-left. Or, if you wanted a border on all sides, the more generic border attribute is also available.
The value for the border attributes is a combination of the width the line should be, the color of the line, and the type of line to be drawn. The type of line can be any of the following:
You might be wondering about the color, #ccb in this example. If you paid attention to the last lesson, you know that a properly mixed color will have the form #f0f0f0, with each two digits representing the red, green, and blue components respectively. CSS allows you to abbreviate repeated letters into a single letter, so #ccb is actually short for #ccccbb.
Can you see other uses of the border attribute on this page? The menu bar uses it for a line at the top and bottom of the element. If you move your mouse over a menu item so the drop down box appears, you'll see a border on three sides. The title at the top of the page is surrounded with a two pixel wide border, and the title's image has a border at the top and bottom of the image. Not to mention all of the code examples which are broken out of the text with borders.
Background Images
To really make things even more interesting, you can include background images. Take a look at the style rule that creates the title bar on Atlas Quest:
There's a couple of new things to notice with this example. For instance, what's that #headerBar thing claiming to be a selector? And why is there only a border-color? What about the border's width or style? We'll set those concerns aside for a moment can come back to it later. This is a discussion about background images.
This example specifies both a background color and a background image. The reason for this is that the background color will be displayed until the image is loaded, or if the image for some reason cannot be loaded, provides an acceptable alternative to no background image at all. As a rule of thumb, the background color should match the background image as closely as possible so there is not a sudden, startling change of color on your webpage when the image is fully loaded. Imagine the browser creating the header in layers, with the first layer applied the background color, then the image applied on top of that. If you use a transparent image, in fact, you can see that background color peeking through the transparent parts of the image.
The background image can point just about anywhere on the World Wide Web, and this our case, the image is loaded from http://www.atlasquest.com/css/normal/titlebar.jpg, though specifying the domain name in this case isn't necessary since, by default, it will look in the current domain if none is specified. Very straight-forward.
The color attribute is simple enough to understand—it's the color to be used for text. And that's the default color the words Atlas Quest at the top of the page will be displayed in. (This color changes often depending on the theme, however, so you may see a different color when you read this.)
But what about the border-color attribute? Atlas Quest actually uses the same selector in several places as a result of the themes. There is a base file, located at /css/base.css that you're welcome to look at. It contains the default colors and layout of Atlas Quest. For each theme, however, there is a second file that will override these defaults as needed. The base file contains this ugly-looking style rule:
You'll see that it sets the background color, specifies that there should be no background image, and the default color, line height, font size, font type and margin—all of which we've already covered. Plus some additional formatting that most people such as yourself will likely not have to worry about like padding, text alignment and height.
Here, the border is broken down into individual components: the color, the style, and the width. In our previous example with the h1 tag, it was all rolled into a single border attribute. The thing to notice here, however, is that all attributes of a border are specified.
Later, to create different themes on Atlas Quest, I build off this style sheet rather than create a completely new style sheet from scratch. The Classic Blue style sheet only changes the color of the border. It does not need to specify the width or style of the border around the title bar since the main style sheet already includes that information. It also changed the background color, the background image and the color of the text.
The different themes on Atlas Quest are just a bunch of color changes. Everything else stays the same.
But what about that bizarre little selector #headerBar? Until now, we've been dealing with how to style predefined elements. This is a case of styling a user-defined tag. Any tag in HTML can include the attribute id="value" where value is an identifier of your choice. Later, when you create styles, this gives you the ability to change the style of just that one tag.
If you look at the source for this page, at the top you'll notice HTML that looks like this:
This introduces you to two additional HTML tags yet to be discussed, the div and span elements. They're simply used to mark a section of HTML. By themselves, they don't do anything. div marks a block of HTML that goes on a line by itself (like the <p> tag that moves down to a line of its own) while span marks a section of HTML that's only a small part of a larger line (such as the <i> tag, which only marks a small part of a larger division known as the paragraph).
So this section of HTML tells the browser to reserve a spot on the webpage for the title bar (which is actually named header, but you can name it anything you want), and within that title bar will be the actual title of the website (which is named headerTitle). And within the headerTitle, the words Atlas Quest will be displayed
Now, using CSS, I can create style rules that will apply to header and headerTitle and no where else on the webpage! In CSS, such identifiers are preceded with the pound sign (#).
There's a cousin to the id attribute called the class. An id is used to mark a single point on a webpage—you cannot have two tags identified as headerTitle, for instance. A class is like an identifier, except that can be used multiple times. For instance, this webpage breaks out HTML and CSS code into individual boxes all over the place, but it would be time consuming to manually create a border, margin, and any other details I desired for every single place where I wanted to create such a box. Instead, I put whatever I want within a box into a div tag, then mark it as code with the class attribute:
By creating a style that will only work on sections of HTML marked as code, I can control how each of them looks just once in the CSS.
Speaking of which, if you want to see the style rule applied to each block of code (including the one below!):
Style rules that apply to specific classes are identified by preceding the name of the class with a period. The attributes border and margin we've already covered, but notice how we first set a border to 1 pixel wide, then immediately overwrite it so the top and bottom borders are 1 pixel wide and the width of the sides is 0 (the same as no border at all). I mostly just wanted to set the color and type of border in one line, and while a 1 pixel border is fine, I wanted to tweak it so the sides didn't have a border.
Padding is similar to margin. Imagine that border around an element. Margin is the space on the outside of that border from the rest of the webpage, while padding is the space between the border and the contents of the box. The font family is the type of text to use, in this case a monospaced font where each letter has the same width regardless of whether it's an i or a W. The white-space attribute is one you'll likely never need to worry about—until I created this tutorial, I never even used it before!
If you looked at the source for the Gingerbread House webpage back on the Tags section of this tutorial, you'll see the styles included within the <head> tags and marked by the <style> tags. This is fine if your website only consists of a single page, but usually you want to apply styles to several pages. In that case, you should separate your styles into a completely separate page such as I've done with Atlas Quest. Or even multiple pages if you may create themes. Atlas Quest has a default CSS page that is included on every page on Atlas Quest. Each theme such as Halloween, winter, and summer overrides those defaults with different colors and images. And another CSS page is used to override default settings when you try to print a page—hiding things such as unnecessary images that might waste ink and the menu bars which are pretty useless when printed on paper.
The next logical question is how do you link your HTML page to your CSS pages? Here's the HTML code on Atlas Quest that gets it done:
Put links within the head tags of your webpage—after all, this isn't content that's to be displayed to the user, but is still associated with the page. The attribute rel should always be set to stylesheet, while the type will always be text/css.
The media attribute can be set to all, aural, braille, embossed, handheld, print, projection, screen, tty or tv. Most are not supported by current browsers, but you can safely use all (which always applies that stylesheet), screen (which only applies the style sheet if you're looking at a page through a computer monitor) and print (which only applies the style sheet to printed pages).
And the href attribute points to the actual style sheet to be processed.
The styles will be applied in the order they're found in the files, so in this case, if the same rule is found in more than one style sheet, the last one 'wins.' That's why I can specify the default style page for Atlas Quest first, then list the theme as the second style sheet. If you've marked your preferences for large text, a third style sheet overriding the default text sizes will be included. And if you are printing a page, that last style sheet will will override previously listed styles to help facilitate a better printing experience. You can see how the print-specific style sheet changes this webpage without wasting paper by using the Print Preview option in your browser. Note that the title bar, menu bars, and Google ads do not show up on the printed version of this page.
Final Thoughts
Many more attributes are available for styles. Attributes that allow you to size your text, move blocks of text around or even over each other, attributes that allow you to indent paragraphs, attributes to strike through or blink. This tutorial is just an introduction to the most useful attributes you'll likely need, but there are plenty of resources on the web for additional information, the best of which I've listed in the References page of the tutorial.
If you really want to get serious with CSS, create a new theme for Atlas Quest! In your preferences, you have the option to include a CSS file of your choice in all webpages you view on this site. It is linked in immediately after the theme CSS file, so you can overwrite entire themes with your own. You can change the size of the text used, the pictures used, and all of the colors. You have the power to create your own themes! You can even use it to link to other Atlas Quest themes. If you're tired of winter, put up the summer theme. If you want to celebrate Christmas all year long, put up the Christmas theme. A list all themes can be found on the themes page.