An introduction to
HTML and CSS.

HTML and CSS are the building blocks of the web, and you'll need to have a basic understanding of both before being able to write your own journal skins.

You might find it easier to work through and absorb Creative Journal CSS if you play along as you go, testing out the things I talk about. A simple way to do this is to use CSSEdit by xork - which gives you a live preview of your journal as you code it. Otherwise you can create a new journal and keep hitting the preview button (but try not to hit the 'Add' button! ;p)

HTML

Skipping a lot of history and waffle, HTML is the language used to describe web pages and their content (eg this is a heading, this is a paragraph, this is a list etc). The way you describe things is by using things called tags - ie <p>this is a paragraph</p>. Note that the closing tag has a slash in it - all but a few specific tags need to be closed in this way, if you don't close them properly you can/will encounter problems when writing your CSS.

There are many different tags, but on deviantART we can't use all of them, so to keep things simple, the only tags you need to learn for the purpose of your journal are the following:

Now would be a good time to familiarise yourself with the above HTML tags - have a play around with them and see how they look in their default non-CSS state before moving onto the next section on CSS.

CSS

Skipping even more history and waffle, CSS stands for Cascading Style Sheets. Stylesheets describe how websites should look, without them you're stuck with the browser's default way of showing webpages. (If you're using Firefox, you can go to View > Page Style > No Style and disable the stylesheet for this page and you'll see how things look without CSS.)

A CSS document is known as a stylesheet, and a stylesheet is a collection of rules (comonly refered to as 'styles') which look like the following:

.journaltext blockquote{
  color: #f00;
  background: #ff0;
}

In plain English, the rule above tells the browser to look for all elements with the class name 'journaltext' (the period at the front means it's a class name), and then find all the blockquotes within it and colour their text red and background yellow.

Remember: the part before the first curly bracket is known as the selector - because it selects which element(s) will get the properties specified between the curly brackets. Selector and properties, got it?

A class name is a property you can give to a div or img tag so that you can write specific styles for it. For instance, you might want to give a set of thumbs a one pixel thick red border. The best way to do this would be to wrap your images in a div and give the div a classname of 'specialThumbs' ie:

<div class="specialThumbs">
 :thumb######:
 :thumb######:
 :thumb######:
</div>

Then, you'd write the following CSS:

.specialThumbs img{
 border:1px solid #f00;
}

The thumbs deviantART generates from your thumb codes are just img tags (inside some other tags, but more on that later) - so to put a red border around your thumbs you have to apply it to the img tag. Note also how img doesn't have a period in front of it - when you want to style a tag (any tag, be it bold tags, div tags, links) you just write the tag name. The period is only used to specify class names.

When writing CSS you should use class names that describe the element, so in this case we use 'specialThumbs' instead of 'redBorder' - because if you later decide to change the border style, you just change the properties in .specialThumbs img{ ... } instead of making a new class of 'orangeBorder' (or worse - leaving the class name as 'redBorder' but changing it to orange in the CSS). It's also a good idea, because later when you look back through your CSS it's easier to understand what does what.

We've covered the HTML tags you can use, and you've gotten a taste for CSS, next I'll take you step by step through making your own journal skin. As we go along I'll cover everything there is to know about CSS and your deviantART journal.