The Complete CSS Tutorial: Document Version: 1.2.1

The Complete CSS Tutorial
By =DragonX141 @ deviantART.com
Document Version: 1.2.1

Table of Contents
Intro ....................................................................................................................................................... 4
Availability ............................................................................................................................................. 4
Definitions ............................................................................................................................................. 4
Firefox vs. Internet Explorer .................................................................................................................. 5
Sections and their usage. ...................................................................................................................... 5
The Entire Journal .......................................................................................................................... 6
The Head ........................................................................................................................................ 6
The Moods ..................................................................................................................................... 6
The Body ........................................................................................................................................ 6
The Foot ......................................................................................................................................... 6
Useful CSS Properties ............................................................................................................................ 6
Text and Fonts ............................................................................................................................... 6
Colours and Background ................................................................................................................ 7
The Box Model ............................................................................................................................... 7
Margins and Padding ............................................................................................................. 8
Borders ................................................................................................................................... 8
Width and Height ................................................................................................................... 9
Positioning ..................................................................................................................................... 9
Display ......................................................................................................................................... 10
Float ............................................................................................................................................. 10
Overflow ...................................................................................................................................... 10
Other Useful Properties ............................................................................................................... 10
How To Use/Make Classes .................................................................................................................. 11
The IE Trick .......................................................................................................................................... 12
Customizing Links ................................................................................................................................ 13
Examples ............................................................................................................................................. 13
Example 1: A Simple Color Overhaul ........................................................................................... 13
Example 2: Adding A Background Image ..................................................................................... 13
Example 3: Adding Divs ............................................................................................................... 13
Example 4: Creating A Context Box ............................................................................................. 14
‐ 2 ‐

Example 5: Two Column Layout .................................................................................................. 14
Tips ...................................................................................................................................................... 14
Tip #1 – Transparent Header ....................................................................................................... 14
Tip #2 – Div Centering.................................................................................................................. 14
Tip#3 – Adding A Scroll Bar To A Div ........................................................................................... 15
Contact ................................................................................................................................................ 15
deviantART .................................................................................................................................. 15
Email ............................................................................................................................................ 15
Thanks ................................................................................................................................................. 15
Copyright ............................................................................................................................................. 16

‐ 3 ‐

Intro
Hello fellow deviants. Here’s my try at making a very complete tutorial so that anyone can get
how CSS Journals on deviantART work. I’ll try to cover and explain in details as much I can so that I can
make this easy and complete for everyone.
Alright, so we’ve all seen the normal journals, and granted they go well with the all‐around
layout, but they still look pretty blah. So here’s the start to making them look all better. Contrarily to
popular belief, making a simple CSS journal is quite simple, you just need to know the proper ways to go
about it; where to put what to get what you want.
I will only cover the basic things that you can do as well as explain how to make a little more
complicated stuff. At this current place in time, I won’t go over the complex layouts, because that would
take forever. CSS is a very powerful styling language but it’s very simple to use, you just need to know
how. Let’s jump in shall we?
Availability
Before I go further, and before you read all of this for nothing, only deviantART subscribers can
use the CSS feature, I can’t stress that enough. Now, how do you know if you’re a subscriber? If you pay
to use deviantART, then you are. You can also use it if you were donated a subscription. In more details,
if your username has a ~ before it, you can’t! Period.
Definitions
• Div: A div, basically, is a container or a box. It contains text, images or other divs. If you want a
complex layout, divs are going to become your best friends.
• Class: A class is the name of a specific div. Its name must be unique but it can point to more than
one div. It can contain any Latin character and is preceded by a period (“.”); so it can look like so:
.class_name or .specialDiv1.
• Object: Objects (also known as elements) are other things that can be modified by properties,
but aren’t named like classes. Actually a div is a kind of object. Other object include h2, a, ul and
li; we’ll see those later.
• Property: A property is something that we attribute to the class. The property modifies how the
class looks/behaves. Common examples are: border, margin and background.
• Value: A value is associated to a property; it tells how the property will affect the class.
• FF: Abbreviated form of Firefox.
• IE: Abbreviated form of Internet Explorer.

‐ 4 ‐

Firefox vs. Internet Explorer
Got to love compatibility, or lack thereof. Don’t freak out, that’s only relevant when you do
complex layouts with a lot of divs which are side by side and overlap, but we’ll stay away from that for
now, so if you’re going to make something simple, just skip ahead to the next section. Another
important thing to know is that Firefox (and Safari) and Internet Explorer do not render CSS the same
way. The two browsers just interpret the code differently, so sometimes is looks awesome in FF and look
all messed up in IE and vice versa. So if you decide to make a complex layout, you have three choices.
Your first choice is to make it look good in FF and let IE mess it up. Option #2 is to do the opposite, make
it pretty in IE. The less popular, but most appreciated, is to make it pretty in both.
That third one is the most complicated and time consuming; been there, done that. At least the
good part is that you don’t have two layouts to do, just one and a half. You just have to design it in one
browser and then bring it into the other and modify it till it works. The good news is that not every
property is messed up; there are just a few of them. The best example is when you play with position
and display. I’ve also noticed that IE doesn’t seem to like the margin‐top property. I’ll explain in a later
section how to have the same property twice, but how to tell which browser which one to use.
Sections and their usage.
Alright, time to get to work. In the journal, there are 5 main parts: the head (.journaltop), the
moods (.list li), the body (.journaltext), the foot (.journalbottom) and the entire thing (.journalbox).
Those are classes given by deviantART and cannot be changed.
The only section in which you can edit the content is the body (.journaltext), it’s the header,
journal entry and footer parts of the Update Journal page, which you definitely know if you’re reading
this. You can only change the look of the other sections.
So the very basic journal looks like this:
‐ 5 ‐

So when you’ll be in the middle of creating your custom journal, you’ll at least use all these
section. On top of that, if you want a little more customization, you’ll make your own classes. I’d go to
say that anything over a basic custom journal will require creating your own divs.
The Entire Journal
In essence, the only thing this one does is define the border that surrounds the whole journal. It
can also be used to specify one background image for the whole journal.
The Head
This one contains the journal title as well as the timestamp. The only thing here is that the title
is treated with a different class, not the .journaltop but the h2.
The Moods
The moods are actually a few things inside one another, but still easy to modify. Like the
standard layout, you can have alternating colors or just one single color. All that explained in a bit.
The Body
The body is really the most important part. This is where the journal really takes shape and
where all your creativity is born.
The Foot
The only thing does is contain the “00 Comments | Previous Journal Entries” links are.
Useful CSS Properties
There are a few genres of properties available for us to use. According to dA, we can use all the
standard visual properties specified in CSS2.1, yay! We have Text and Fonts, Colours and Backgrounds,
The Box Model (dimensions, padding, margin and borders) and Positioning and Display. So I’ll go over
the more important ones.
Text and Fonts
• font‐family: Specifies the font name of a box. This can be a comma‐separated list, of which the
browser will use the first font it recognizes. Font names that are made up of more than one word
must be placed within quotation marks.
Possible values: [font name]
Example: font‐family: “Times New Roman”, Helvetica, Arial;
• font‐size: Specifies the size of a font.
Possible values: [size in em or pt].
Example: font‐size : 12pt; or font‐size: 1.0em;
• font‐weight: Specifies the boldness of a font.
Possible values: lighter, bold, and bolder.
Example: font‐weight: bold;
• font‐style: Specifies whether the text is italic or not.
Possible values: italic.
Example: font‐style: italic;
‐ 6 ‐

• text‐align: Specifies the alignment of text inside a div.
Possible values: left, right, center and justify.
Example: text‐align: center;
• text‐decoration: Specifies whether text is underlined, over‐lined or has a strikethrough.
Possible values: none, underline, overline, line‐though.
Example: text‐decoration: none;
Colours and Background
• color: Specifies the foreground (text and border) colour.
Possible values: [color].
Example: color: #000000;
• background: Combines the following properties into just one. I only use it to make the
background transparent.
Possible values: transparent.
Example: background: transparent;
• background‐image: Adds and image, though url, and sets it as background to the div.
Possible values: url().
Example: background‐image: url(“http://www.url.com/image.jpg”);
• background‐repeat: Specifies how to repeat the background image within its containing element.
Possible values: no‐repeat, repeat‐x (repeat horizontally), repeat‐y (repeat vertically) and
repeat‐xy (repeat horizontally and vertically).
Example: background‐repeat: repeat‐x;
• background‐position: Specifies the position of a background image within its containing element.
Made up of two values.
Possible values: Top, center, bottom & left, center, right.
Example: background‐position: top center;
The Box Model
In the box model, there are three important properties: border, margin and padding. All of those
can then be divided into 4 separate properties for top, right, bottom and left (respectively). All the
values defined for these properties are in pixels (px).
First, so you can see where every part is, here’s a graphic explanation:
‐ 7 ‐

Margins and Padding
For example, if you want a 10px margin all‐around, do this:
margin: 10px;
If you want only the right and left to be 10px, it’ll look like this:
margin: 0 10px 0 10px;
Remember that respectively just a little higher? As opposed to using four properties like:
margin‐top: 0px;
margin‐bottom: 5px;
margin‐left: 10px;
margin‐right: 15px;
You can do this instead, it’ll give the same result:
margin: 0px 15px 5px 10px;
Always remember that when you use 4 values for the one property, it’s always in this order: top,
right, bottom and left. In this example I used the margin property, but this applies to the padding
property as well. That’s pretty much all there is on how to use margins and padding.
Borders
Borders are used pretty much in the same fashion as margins and padding. The only difference is
that there are a few more useful properties that you can use like color and width. Just like those above,
they can be divided into four separate properties or one master one.
• border‐width: Specifies the border width.
Possible values: [width in px].
Example: border‐width: 10px;
• border‐color: Specifies the color of a boxes border.
Example: border‐color: #ffffff;
• border ‐style: Specifies the style of an element's border.
Possible values: none, dotted, dashed, solid, double, groove, ridge, inset and outset.
Example: border‐style: solid;

A good trick to give you now is that you can combine all those properties into just one! As opposed
to using all three properties and doing this:
.cust_border {
border‐width: 2px;
border‐color: #ff0000;
border‐style: dotted;
}
‐ 8 ‐

You can simply use one line and do this:
.cust_border {
border: 2px dotted #ff0000;
}

Width and Height
• width: Specifies the width of the element.
Possible values: [width in px or %].
Example: width: 200px; or width:85%;
• height: Specifies the height of the element.
Possible values: [height in px or %].
Example: height: 200px; or height:85%;
Positioning
There are three kinds of positioning, static (which is the default), absolute and relative. These
properties are mostly used when creating more complex layout. They’re used to for, well, positioning
the boxed. Here’s what they mean:
• static: Follows the normal flow. This is the default and doesn’t need to be specified.
• absolute: Takes the element out of the flow and offset according to the containing block.
• relative: Relative position that is offset from the initial normal position in the flow.

When you’re using the absolute you need to tell the element where to be. You can also use them
while you use relative; the effect here will be pretty much the same as using margin. You can define the
positioning using these 4 properties:
• top: Specifies how far from the top of the containing box the box should be.
• bottom: Specifies how far from the bottom of the containing box the box should be.
• left: Specifies how far from the left of the containing box the box should be.
• right: Specifies how far from the right of the containing box the box should be.

Usually, the distance given is in pixel. Another thing is that you can only use only one property by
axis; by that I mean you can only use top or bottom and left or right. So basically you would get
something like this:
.pos {
position: absolute;
top: 0px;
left:0 px;
}
‐ 9 ‐

Display
Basically, this one tells how to treat the current div. There are only two useful values here, inline
and none. The inline value is used in conjunction with float (a property I’ll explain in just a bit) which
basically says that multiple divs can be on one line. The none value make the element invisible, so it can
be great if you want to hide an element, like the journal header image for example. You use it like so:
.dis {
display: none;
}

Float
Float is another easy one, it specifies whether a fixed‐width box should float, shifting it to the
right or left with surrounding content flowing around it. There are two values you can use: left or right.
It’s used like so:
.flt {
width: 200px;
float: left;
}
Overflow
Overflow is used to specify what happens to the content of a div if that div is given a specific
height and/or width if the content takes more room than the div can display. Overflow has 4 values that
can be used.
• visible (default): Overflow spills over the defined border of the div.
• hidden: Overflow cannot be seen.
• scroll: The box scrolls to accommodate the overflow. A scroll bar will be visible regardless of if the
content is small enough to fit in the div.
• auto: The box scrolls to accommodate the overflow. A scroll bar will be visible only if the content
is too big to fit in the div.

.ovrflw {
overflow: auto;
}

Other Useful Properties
Here are some other useful properties that can be used within the journal’s CSS. They’re mostly
text specific properties.
• font‐variant: Specifies whether the lowercase letters in a box should be displayed in small
uppercase.
Possible values: small‐caps.
Example: font‐variant: small‐caps;
‐ 10 ‐

• line‐height: Specifies the height of a line of text, basically line spacing.
Possible values: [value in em or %].
Example: line‐height: 1.3e;
• letter‐spacing: Specifies the spacing in‐between letters.
Possible values: [value in em].
Example: letter‐spacing: 0.3em;
• word‐spacing: Specifies the spacing between words.
Example: word‐spacing: 1.5em;
• text‐indent: Specifies the indentation of the first line of text in a paragraph. Can only be used in a
“p” element.
Example: text‐indent: 2em;
• border‐color: Specifies the color of a boxes border.
Example: border‐color: #ffffff;
How To Use/Make Classes
This is super simple to explain. Say you want to make a box (a div) in your layout, or multiple
boxes so that you can separate the different sections then you simply go like this.
In the Journal Entry part of the Update Journal, we’ll need to create those divs, let’s make two.
You’d write something like this:
<div>This is box #1</div><div>This is box #2</div>
Great, now we have two boxes! But they’re still “invisible”, if you preview your journal, you
won’t see anything different, well except the text you wrote between the div tags (those <div></div>
things). Now’s a good time to say that if you have a <div> tag, you must have a </div> tag at the end, to
close that box; if you don’t you’re layout will be a mess and you’ll be all confused. To style them, you
need to assign them a class. To do that we need to add the class attribute to the div tag as well as give it
a name. So the example would now look like this:
<div class=”div_top”>This is box #1</div><div class=”div_bottom”>This is box #2</div>
Good, we’re making progress. But if you preview this code addition you’ll still see nothing
different. That’s because we haven’t created those classes yet. So the sake of this example, we’ll only
add a simple border and background color. In the CSS box at the bottom of the page, we’ll put in this:
.div_top {
background‐color: #111111;
border: 1px dotted #000000;
}

‐ 11 ‐

.div_bottom {
background‐color: #55555;
border: 3px solid #000000;
}

That’ll create two very different styled boxes. But say that you want all your boxes to look the
same, what now? Do we have to make a different class for every div? Simply put, no. As opposed to
having a different name for both divs, you could put the same one to have class=”div_name”, create one
class and both divs would look the same.
Now believe it or not, but this is all that a custom CSS journal is, a bunch of styled divs! If I’ve
done this well, this is really all you need to go and start making your own custom journal, but since this
is to be complete, there’s more to say, so read on.
The IE Trick
Before we move onto working examples, I’m going to share a little trick I found. Keep in mind this
is only useful for creating multiple div layouts. Now I’m still not sure if it’s something that dA made, or if
it’s just the way that the browser render the CSS code, but if you put an underscore (_) before the
property, only IE will use it, FF seems to ignore it. Why is this useful you ask? For once I found it’s great
for the margin‐top property if you use a negative value. That’s one of the biggest pains if found in
making everything cross‐compatible. And it’s super easy to use.
Say that you have two divs, one on top of the other and that you want the top of the bottom div
to touch the bottom of the top div, in FF the distance will be 10 pixels but in IE it’ll be 14 pixels, then you
can do something like this. For the example (where the bottom div is named “.get_closer”):
.get_closer {
margin‐top: ‐10px;
_margin‐top: ‐14px;
}

So now FF will rise the div by 10 pixels and IE will rise it by 14 pixels.
Now you’re probably asking why, right? It’s like I explained in a section above, FF and IE render
CSS differently and because they render fonts differently (and IE doesn’t like margin‐top as much as FF)
so we need to use a little fix.
Also be aware that you won’t always need to do this, it comes up only in some cases. Just that
some of you will be stuck with this problem, so I’m sharing the fix with everyone.
‐ 12 ‐

Customizing Links
If you want to customize how every state of a link looks, there’s a class associated to each state.
Now you’re probably wondering what a state is. It just means the current state of the link; if it’s a
normal link, if your mouse is on it or if you clicked it and if you’ve visited where it links. Links, so you
know are an ‘a’ element follow by an html reference (href), they look like this: <a href=”url”>Link</a>.
The four states associated to links are:
• a:link: Defines the style for normal unvisited links.
• a:hover: Defines the style for hovered links; A link is hovered when the mouse moves over it.
• a:active: Defines the style for active links; A link becomes active once you click on it.
• a:visited: Defines the style for visited links.

So to add CSS to customize them, do like so:
a:hover {
text‐decoration: none;
}
Examples
Finally, here we are, the part most of you will probably use and concentrate on to create your
own layouts. I’ll give you guys a few examples, from simple to a little more complex and hopefully this
will shed some light on how to get it done. Now remember, this is how I do it, I know there are other
ways out there but I only know my way, so here goes.
Example 1: A Simple Color Overhaul
I’m just going to change the basics here; colors, fonts, point size, borders and such. So we’ll only
see some CSS, no changes are made to the Journal Body.
Example_1_Preview.png Example_1_CSS.txt

Example 2: Adding A Background Image
We’re going to keep the simple dA color scheme and just add an image as background. Again,
simple stuff that only deals with CSS.
Example_2_Preview.png Example_2_CSS.txt

Example 3: Adding Divs
In this one, we’ll add a few divs, so that we can graphically separate the journal into sections. So
here we have CSS (of course) and now we start creating a layout, so we add divs to the Journal Entry.
‐ 13 ‐

Example_3_Preview.png Example_3_CSS.txt Example_3_HTML.txt

Example 4: Creating A Context Box
Ah the famous rounded corner context box; wonder how it’s done? Here’s how I do mine. Just
be sure that all your corner images are the same dimensions. Another good thing to point out here is
that we’ll be using the absolute and relative positioning values.

Example 5: Two Column Layout
You’ve seen those layouts with the little menu on the left or the right of the journal and think
they’re nifty, well here I’m going to explain how to make it. Be warned though, it’s easier than you think.

Tips
Here are some useful tips that I can offer you guys. Just some things I’ve noticed after you guys
started using my tutorial.
Tip #1 – Transparent Header
If you’re using a background color in .journalbox, you’ll notice that the head always keeps the
default green color; to fix that you just need to add the line “background: transparent;” to the
.journaltop section.
Tip #2 – Div Centering
There are two ways to do it really, well maybe more, but 2 excellent ways i know of. Way #1 is if
you're using a div with a dynamic with, so by that, the width of the box will change with the width of the
page. Way #2 is if you absolutely want a div with a fixed width. The only thing with this one is that if the
div that contains your div isn't big enough, it can create layout problems.
I, personally, would definitely go with #1, since dA users rarely use the same browser window
width. But if you must, for some reason, use a fixed width, follow #2.
.way1 {
margin‐left: 50px;
margin‐right: 50px;
}

‐ 14 ‐

.way2 {
width: 200px;
margin‐left: auto;
margin‐right: auto;
}
Tip#3 – Adding A Scroll Bar To A Div
For this, we will be using the overflow property explained on page 10.
Let's say you have a paragraph of 20 lines. Each line has a height of 10 pixels (as an example). All
in all, you paragraph would be 200 pixels high, right?
Now say you want to make a div with an absolute height of 100px, perhaps for layout reasons,
then what overflows will be hidden, because your div isn't big enough to display all that's inside. So with
the use of the overflow properties, we can tell the div to insert a scroll bar, if the content’s height
exceeds the height defined for the div.
.addscroll {
height: 100px;
overflow: auto;
}
Note: If you don't define a height for your div, the there's no use for the overflow properties at all.
Contact
deviantART
If you think I forgot something, didn’t explain something quite right, looking to do something and
you don’t know how, feel free to send me a note on dA at http://dragonx141.deviantart.com.
Email
If for some weird reason you can’t send me a note, or you’d like to send me your code so i can
look at it, you can contact me at css@second‐element.net. If you use this way of contact, you must put
deviantArt in the subject, or it will go straight to my junk mail, which i don’t check. Also, please include
you dA username somewhere so that I can track you back. Lastly, the use of this email is for dA users
only!
Thanks
Thank you to all who viewed, favorited 1 and who use this tutorial to help you in making your
own or understanding the templates others made. I’m glad I could make this whole alien language a
little more understandable and usable for you guys.

1
I know it’s not a word, but i just used it anyways, so too bad. Oh and it was a reason to use a footnote. :)
‐ 15 ‐

Copyright
This publication is protected by a Creative Commons Attribution‐Noncommercial‐No Derivative
Works 2.5 licence 2 .
That means that you are free to copy, distribute, display, and transmit the work but under the
following conditions: You must attribute the work in the manner specified by the author or licensor; You
may not use this work for commercial purposes; You may not alter, transform, or build upon this work;
For any reuse or distribution, you must make clear to others the license terms of this work.

2
http://creativecommons.org/licenses/by‐nc‐nd/2.5/ca/
‐ 16 ‐

The Complete CSS Tutorial: Document Version: 1.2.1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Complete CSS Tutorial: Document Version: 1.2.1

Uploaded by

Copyright:

Available Formats

Example_4_Preview.png Example_4_CSS.txt Example_4_HTML.txt

Example_5_Preview.png Example_5_CSS.txt Example_5_HTML.txt

You might also like