Well, now that you've got HTML (or XHTML as it may be) under your belt, it's time to introduce you to the wonderful world of formatting. This is generally done with CSS, short for Cascading Style Sheets. CSS allows you to add special fonts, colours, and spacing on your web pages, according to the official definition. Unofficially, it can do a whole lot more, from faking graphics, to non-javascript menu rollovers, background images and even image galleries. Seriously, if HTML is the brick and mortar of a webpage, CSS is the interior design part. While slightly more difficult to get a handle on than HTML, it's also a lot more powerful and more interesting to you, as a designer. So let's get right into it!
Tools That Make Life Simple
Well, I don't use anything but a text editor to slap together my CSS sheets, but I believe Arachnophilia does come with some sort of CSS manipulation tool. I've never used it, though, so I can't vouch for it. Please note that when I say a text editor, I mean a bare-bones text editor. If you use something like Microsoft Word to create a CSS document, there's a chance it won't read in a browser properly because programs like Word tend to automatically stick in 'prettying up' font quirks in a normal document, such as replacing basic quotation marks with funky ones. Experiment with what you can find and use whatever is most comfortable!
Creating a Style Sheet
CSS properties are basically the equivalent of HTML "tags" for your stylesheet. There's a whole plethora of them out there, and if you want to actually go through a tutorial to learn them in a step-by-step manner, this site is a good one to start out with. However, let's cut the crap - most of you are only interested in a few basic things: spacing elements on your webpage, changing the size / colour / font of your text and links, and adding images, background or otherwise, to your pages. So those are the only properties I'm going to cover in this tutorial. Just be aware that you can do so much more than what I list here with CSS!
To include a style sheet in your page, you can either make a plain old text document full of the appropriate CSS properties, and then save it with the extention ".css" instead of ".txt." Then, you would use this line of code, inserted somewhere in the header of your HTML document, to have it read with your page:
<link rel="stylesheet" type="text/css" HREF="http://www.mywebsite/styles.css">
Obviously you'd be replacing http://www.mywebsite/styles.css with your own actual web server where you're hosting the style sheet. But, let's say you don't HAVE your own web page, and you just want a stylesheet for the Smack Jeeves site alone. Well, that's not a problem either, because CSS can be embedded into the header of any HTML document. That means to get it to read on a Smack Jeeves site, you'd only have to insert your CSS into the header of your "Overall Layout" to have it read on every page that was hosted by Smack Jeeves, including any custom ones you might create.
To embed a stylesheet into an HTML document, this is the code you'd use:
<style type="text/css">
/* style sheet information goes here */
</style>
Just be sure that all of that falls between your header tags, and you'll have an instant stylesheet! Anything in a stylesheet that falls between the these symbols:
/*
and
*/
is not read by the stylesheet as code. It's just excess commentary to help you sort stuff out. I'll be using these tags quite a lot in my stylesheets to explain what things do; you can leave them in or take them out as you please, it won't change a thing on your webpage.
Manipulating Your Webpage
Let's start with the basics: Remember what I said about not needing to put anything in the HTML 'body' tag anymore? That's because you do it all in CSS now. Stick this inside of the style tags on your stylesheet, and make sure you include every single bracket and semicolon! If there is something you don't want (like, for example, the background image), simply delete that line (and that line only) from your stylesheet.
body
{
background-image: url(http://www.mywebserver.com/image.gif);
/* if you want a background image, this is how you stick it in. */
background-attachment: fixed;
/* this prevents your background from scrolling with the rest of your page, but not */
/* from repeating */
background-color: #ffffff;
/* this sets your page's background colour - here it is set to white */
/* Space manipulating attributes follow below. You can set most of these to "top" */
/* "right" "bottom" and "left" by giving each attribute four values. For example, */
/* "margin:1px 2px 3px 4px;" will give you a 1 pixel margin on top, a 2 pixel margin */
/* on the right, a 3 pixel marginon the bottom and a 4 pixel margin on the right. */
/* The same goes for borders and padding; experiment with each to see what they do. */
margin: 0;
/*this removes all of the margins on your page. */
border: 0;
/*this removes all of the borders on your page. */
padding: 5px 10px 5px 10px;
/*this leaves in some text / content padding on your page. */
height:100%;
/* sets the content height of your page to 100% of the browser window */
overflow: auto;
/* hides scrollbars on your page unless you need them */
/* Font manipulating attributes follow below. For a good start on what you can do with */
/* fonts, and examples of what they will look like on your browser, go to this site: */
/* http://www.w3.org/Style/Examples/007/fonts.html */
font-family: Verdana, Arial, Helvetica, sans-serif;
/*sets your font to a sans-serif, hopefully Verdana */
font-size: 12px; /* sets the size of your font */
font-style: normal;
/* sets the font to display normally rather than italicized */
font-weight: normal;
/* sets the font to display normally, rather than bolded */
color: #000000;
/* sets the colour of your font */
}
So now you've got your text formatted. But uh-oh, your links are still showing up in that ugly blue-purple standard! Well, here's how to fix that:
/* The following block of code will set the default link display on your page */
/* when you're just looking at it. */
a, a:visited {
font-size: 12px;
/* the size of your link font */
font-weight: normal;
/* the style of your link font; 'normal' or 'bold' is what usually goes here */
text-decoration: none;
/* this specifies that you don't want an underline beneath your link */
color: #FF0000;
/* this turns your link text a shade of red */
}
/* The following block of code will set the link display on your page */
/* when your mouse is resting over that link. */
a:hover {
color: #FF6666;
/* the color of the link will be lighter red when you hover over it now */
text-decoration: underline;
/* your link will now have a line underneath it while your mouse is on it */
/* Experiment with these text-decoration values: "none" , "underline" , */
/* "overline" and "line-through" - You can even combine more than one of them */
/* together! Just separate each attribute by a single space. Note that everything */
/* you put in the first block for your link still applies to this one - */
/* the only thing changed is the 'text decoration' and the 'color' for the link. If you */
/* want to do more, like change the font, font size, or bold it while you hover, here */
/* is where you'd add more attributes. */
}
Now that you have your basic text and your basic links taken care of, let's address some fancy extras: Maybe you have another set of links that you want to be DIFFERENT from normal links on your page. Like, your menu - perhaps you want it to be bold, or in a different colour than other links on your page. To do that, you have to create a new CSS "class" - a variation on the standard you already provided. Here's how to make that in the stylesheet:
/* Here we are making a new link class, which I've arbitrarily titled 'menu' */
/* so I will remember to use it for the menu of my website. */
a menu, a menu:visited {
font-size: 14px;
/* this will now be bigger than my other links */
font-weight: bold;
/* my menu links will now be bold */
text-decoration: none;
color: #000000;
/* this turns these links black */
}
a menu:hover {
color: #CCCCCC;
/* the mouse over on the link will now show grey text */
text-decoration: overline underline;
/* the link will have a line on top and below it on mouseover */
}
Finally, let's say you want to change the colour of a certain block of text on your page, but not EVERY single piece of text. Like, you want the title of your comic to be in red, rather than black. You can do this by setting a special class for your text. I'm arbitrarily naming this class 'red' so I'll remember that it makes text show up in red:
.red {
font-family: Times New Roman, serif;
/* note that I've changed the font for this class */
font-size: 12px;
/* The size is still the same as the rest of my text */
font-weight: bold;
/* This font will be bolded */
color: #FF0000;
/* This font will also be the same red as my links */
}
Now, let's put that all together to make a working stylesheet.
If you are making a remote stylesheet (a document ending with .css that you link to your webpage), you'd just paste this directly into your text editor and save it:
body {
background-image: url(http://www.mywebserver.com/image.gif);
background-attachment: fixed;
background-color: #ffffff;
margin: 0;
border: 0;
padding: 5px 10px 5px 10px;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
}
a, a:visited {
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #FF0000;
}
a:hover {
color: #FF6666;
text-decoration: underline;
}
a menu, a menu:visited {
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
a menu:hover {
color: #CCCCCC;
text-decoration: overline underline;
}
.red {
font-family: Times New Roman, serif;
font-size: 12px;
font-weight: bold;
color: #FF0000;
}
Save that as 'style.css' (or whatever you want to call it) onto your server, and then link to it in your HTML document using the LINK REF tags:
<link rel="stylesheet" type="text/css" HREF="http://www.myserver.com/style.css">
Or, if you don't have your server, just take the style code and paste it between two style tags in the header of your document. Voila! You have a stylesheet! But wait a moment… you're not done yet. You remember how we made special 'classes' for the menu and the red text on your site? In order to see them, you have to activate, or "call" them in your HTML document. This is pretty simple - for the menu, we'd make a normal link:
<a href="#">This is my link.</a>
Now apply the menu style to it by calling the class inside of the tag:
<a href="#" class="menu">This is my link.</a>
What about our red text? Well, remember those 'useless' div tags I warned you about? Turns out they're a lot more useful than you think:
<div class="red">
This is my Red Text, which should also be bold and in Times New Roman font.
</div>
Pretty simple! Go ahead and experiment with combining stylesheets and HTML documents. When you're comfortable with both, we'll be ready to start tackling the Smack Jeeves Default Template!
NEXT ARTICLE: Customizing the Default Template
