The content for this page is incomplete and changes very often, I wouldn't trust it just yet ;p
In the last section you got a taste of HTML and CSS - now it's time to learn how to use both to style your journal. Starting from scratch we'll go step by step through the process of coding your journal CSS.
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)
Selectors were introduced in An Introduction to CSS With CSS we can target any element in your journal and change how it looks. We can do this by selecting tags, selecting class names, or a mixture of both.
HTML documents have a tree structure, much like a family tree - with parent elements and children. These 'elements' are HTML tags, and they can have these special properties called class names.
For instance, changing link colours would be as simple as a{color: red}. If you put that into your journal though, it'd change the colour of the links in your journal body, and also the two links in the footer (number of comments and previous journals). If you wanted to change only the links in your journal body, you'd make your selector more specific - .journaltext a{color: red}. Or, if you wanted it the other way around, .journalbottom a{color: red}.
.journaltext is the class name deviantart has given to the body text of your journals. Other elements, like the the footer links, have been given their own class names too. We'll deal with them all soon enough, but if you're curious you can check out a little visual guide I made a while ago: Journal Structure - a reference.
Covering: the box model, borders, padding, margins, basic backgrounds, hiding or replacing the journal icon, text (font colour, size, line-height, letter spacing etc), links etc.
When I make my journal skins the first thing I do is reset (or turn off) the CSS that deviantart applies to our journals. This gives us a clean slate to work with, and it means turning off borders, disabling background colours, hiding the journal icon, and fixing a bug with lists. I'll show you how to do these things, and in the process I'll make you familiar with some new CSS concepts.
...introduce the box model when showing how to change size/padding etc of the header, as a common problem is trying to figure out how to set the height to fit a background image.
The border property has three parts, the size (width), style, and color. You can specify these as three seperate properties, ie:
border-width: 1px; border-style: solid; border-color: blue;
If you're going to declare all three though, it's best to use the much simpler shorthand:
border: 1px solid blue;
There are times when you might want to only declare the one of the properties - for instance if you simply want to override the colour of a border - and in that case using the long-hand property is ok. Don't stress too much about it, you'll do fine with the shorthand most of the time.
There are many different border-style types you can use, the most common are:
soliddotted (which isn't recognised by IE)dasheddoubleFor a complete list, see: htmldog/cssproperties/border-style/
Acceptable colour values are any of the HTML or X11 colour keywords, as well as hexadecimal colour values. For a list of the colour keywords, see Web colors on Wikipedia. The colour pickers in most graphics apps will also show you the hex value for a colour, otherwise there are many free web based pickers - my favourite being this colour picker because it acts just like Photoshop's.
Okay, time for you to try out this border stuffs real quick. Open CSSEdit in a new tab, and in the CSS textarea enter the following:
.journalbox{border:1px solid red}
...and play around with it, change the values and get a feel for it. Don't waste too much time on it though ;p
Covering: different resolutions, the use of max-width, header image alignment.
Covering: divs and class names, negative margins, overflow, hijacking useless tags.
Covering: floats, absolute positioning, relative positioning, restyling of lists.
Covering: absolutely positoned header graphics (like in the new AR CSS), hijacking existing elements (like the journal icon).