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.  
ƒ Possible values: [color]. 
ƒ 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. 
ƒ Possible values: [value in em]. 
ƒ 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. 
ƒ Possible values: [value in em]. 
ƒ Example: text‐indent: 2em; 
• border‐color:  Specifies the color of a boxes border.  
ƒ Possible values: [color]. 
ƒ 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_4_Preview.png Example_4_CSS.txt Example_4_HTML.txt

   

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. 

Example_5_Preview.png Example_5_CSS.txt Example_5_HTML.txt

   

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 ‐