TheCompleteCSSTutorial

Written,&publishedonDecember17,2007,
By=DragonX141atdeviantART.com

DocumentVersion:1.1

Contents
Intro.......................................................................................................................................................3
Availability.............................................................................................................................................3
Definitions.............................................................................................................................................3
Firefoxvs.InternetExplorer..................................................................................................................4
Sectionsandtheirusage.......................................................................................................................4
TheEntireJournal..........................................................................................................................5
TheHead........................................................................................................................................5
TheMoods.....................................................................................................................................5
TheBody........................................................................................................................................5
TheFoot.........................................................................................................................................5
UsefulCSSProperties............................................................................................................................5
TextandFonts...............................................................................................................................5
ColoursandBackground................................................................................................................6
TheBoxModel...............................................................................................................................6
MarginsandPadding.............................................................................................................7
Borders...................................................................................................................................7
WidthandHeight...................................................................................................................8
Positioning.....................................................................................................................................8
Display...........................................................................................................................................9
Float...............................................................................................................................................9
Overflow........................................................................................................................................9
Otherusefulproperties.................................................................................................................9
Howtouse/makeclasses....................................................................................................................10
TheIEtrick...........................................................................................................................................11
CustomizingLinks................................................................................................................................12
Examples.............................................................................................................................................12
Example1:Asimplecoloroverhaul............................................................................................12
Example2:Addingabackgroundimage.....................................................................................12
Example3:Addingdivs................................................................................................................13
Example4:Creatingacontextbox..............................................................................................13
Example5:Twocolumnlayout...................................................................................................13
Contact................................................................................................................................................13

Intro
Hellofellowdeviants.Heresmytryatmakingaverycompletetutorialsothatanyonecanget
howCSSJournalsondeviantARTwork.Illtrytocoverandexplainindetailsasmuchicansothatican
makethiseasyandcompleteforeveryone.
Alright, so weve all seen the normal journals, and granted they go well with the allaround
layout,buttheystilllookprettyblah. Soheresthestarttomakingthemlookallbetter. Contrarilyto
popularbelief,makingasimpleCSSjournalisquitesimple,youjustneedtoknowtheproperwaystogo
aboutit;wheretoputwhattogetwhatyouwant.
Iwillonlycoverthebasicthingsthatyoucandoaswellasexplainhowtomakealittle more
complicatedstuff.Atthiscurrentplaceintime,iwontgooverthecomplexlayouts,becausethatwould
takeforever.CSSisaverypowerfulstylinglanguagebutitsverysimpletouse,youjustneedtoknow
how.Letsjumpinshallwe?

Availability
Beforeigofurther,andbeforeyoureadallofthisfornothing,onlydeviantARTsubscriberscan
usetheCSSfeature,Icantstressthatenough.Now,howdoyouknowifyoureasubscriber?Ifyoupay
tousedeviantART,thenyouare.Youcanalsouseitifyouweredonatedasubscription.Inmoredetails,
ifyourusernamehasa~beforeit,youcant!Period.

Definitions
Div:Adiv,basically,isacontainerorabox.Itcontainstext,imagesorotherdivs.Ifyouwanta
complexlayout,divsaregoingtobecomeyourbestfriends.
Class:Aclassisthenameofaspecificdiv.Itsnamemustbeuniquebutitcanpointtomorethan
onediv.ItcancontainanyLatincharacterandisprecededbyaperiod(.);soitcanlooklikeso:
.class_nameor.specialDiv1.
Object: Objects (also known as elements) are other things that can be modified by properties,
butarentnamedlikeclasses.Actuallyadivisakindofobject.Otherobjectincludeh2,a,uland
li;wellseethoselater.
Property:Apropertyissomethingthatweattributetotheclass.Thepropertymodifieshowthe
classlooks/behaves.Commonexamplesare:border,marginandbackground.
Value:Avalueisassociatedtoaproperty;ittellshowthepropertywillaffecttheclass.
FF:AbbreviatedformofFirefox.
IE:AbbreviatedformofInternetExplorer.

Firefox
xvs.InterrnetExplo
orer
Got to love co
ompatibility, or lack thereeof. Dont freeak out, thatts only relevvant when yo
ou do
complexllayoutswith alotofdivsw
whicharesid
debysideand
doverlap,bu
utwellstayaawayfromthatfor
now, so if youre going to makee something simple, just skip ahead to the next section. Another
owisthatFirrefox(andSaafari)andInteernetExploreerdonotren
nderCSSthe same
importanttthingtokno
way.Thetwobrowsersjustinterpreetthecoded
differently,sosometimesislooksaweso
omeinFFand
dlook
allmessedupinIEandviceversa. Soifyoudecidetomakeeacomplexlayout,youhavethreechoices.
Yourfirstchoiceistom
makeitlookggoodinFFandletIEmessitup.Option
n#2istodotheopposite,make
itprettyin
nIE.Thelesspopular,butmostapprecciated,istom
makeitprettyinboth.
Th
hatthirdone
eisthemostccomplicated andtimecon
nsuming;beenthere,doneethat.Atleastthe
goodparttisthatyoud
donthavetw
wolayoutsto do,justone andahalf.Youjusthave todesignitinone
browser and
a then brin
ng it into thee other and modify
m
it till it works. The good newss is that not every
property ismessedup
p;therearejustafewof them.Thebeestexample iswhenyou playwithpo
osition
ay.Ivealson
noticedthatIIEdoesntseeemtolikethemargintop
pproperty.Illlexplaininaalater
anddispla
sectionho
owtohaveth
hesameprop
pertytwice,buthowtotellwhichbrowserwhichoneetouse.

Section
nsandthe
eirusage..

Alright,timetogettoworrk.Inthejourrnal,therearre5mainparts:thehead
d(.journaltop
p),the
moods (.llist li), the body (.journalltext), the fo
oot (.journalb
bottom) and the entire th
hing (.journalbox).
Thoseareeclassesgiven
nbydeviantA
ARTandcannotbechanged.

Th
he only section in which you can editt the contentt is the bodyy (.journaltextt), its the heeader,
journalen
ntryandfootterpartsofth
heUpdateJo
ournalpage,w
whichyoudeefinitelyknow
wifyourereeading
this.Youccanonlychan
ngethelooko
oftheotherssections.
So
otheverybasicjournalloo
okslikethis:

So when youll be in the middle of creating your custom journal, youll at least use all these
section.Ontopofthat,ifyouwantalittlemorecustomization,youllmakeyourownclasses.Idgoto
saythatanythingoverabasiccustomjournalwillrequirecreatingyourowndivs.

TheEntireJournal

Inessence,theonlythingthisonedoesisdefinetheborderthatsurroundsthewholejournal.It
canalsobeusedtospecifyonebackgroundimageforthewholejournal.

TheHead

Thisonecontainsthejournaltitleaswellasthetimestamp.Theonlythinghereisthatthetitle
istreatedwithadifferentclass,notthe.journaltopbuttheh2.

TheMoods

The moods are actually a few things inside one another, but still easy to modify. Like the
standardlayout,youcanhavealternatingcolorsorjustonesinglecolor.Allthatexplainedinabit.

TheBody

The body is really the most important part. This is where the journal really takes shape and
whereallyourcreativityisborn.

TheFoot

Theonlythingdoesiscontainthe00Comments|PreviousJournalEntrieslinksare.

UsefulCSSProperties

Thereareafewgenresofpropertiesavailableforustouse.AccordingtodA,wecanuseallthe
standardvisualpropertiesspecifiedinCSS2.1,yay!WehaveTextandFonts,ColoursandBackgrounds,
The Box Model (dimensions, padding, margin and borders) and Positioning and Display. So ill go over
themoreimportantones.

TextandFonts
fontfamily:Specifiesthefontnameofabox.Thiscanbeacommaseparatedlist,ofwhichthe
browserwillusethefirstfontitrecognizes.Fontnamesthataremadeupofmorethanoneword
mustbeplacedwithinquotationmarks.
Possiblevalues:[fontname]
Example:fontfamily:TimesNewRoman,Helvetica,Arial;
fontsize:Specifiesthesizeofafont.
Possiblevalues:[sizeinemorpt].
Example:fontsize:12pt;orfontsize:1.0em;
fontweight:Specifiestheboldnessofafont.
Possiblevalues:lighter,bold,andbolder.
Example:fontweight:bold;
fontstyle:Specifieswhetherthetextisitalicornot.
Possiblevalues:italic.
Example:fontstyle:italic;

nmentoftexttinsideadiv.
texxtalign:Speccifiesthealign
Possiblevalues:left,righ
ht,centerand
djustify.
nter;
Example:teextalign:cen
n:Specifiesw
whethertextissunderlined,overlinedorrhasastriketthrough.
texxtdecoration
Possiblevalues:none,underline,overline,linetho
ough.
on:none;
Example:teextdecoratio

ColourssandBack
kground
color:Specifiestheforegrou
und(textandborder)colou
ur.
Possiblevalues:[color].
olor:#000000
0;
Example:co
ombinesthefollowingpro
opertiesintojjustone.Ionlyuseittomakethe
background:Co
backgroundtransparent.
arent.
Possiblevalues:transpa
background:transparent;
Example:b
ndimage,thoughurl,andssetsitasbackkgroundtoth
hediv.
backgroundimage:Addsan
Possiblevalues:url().
backgroundim
mage:url(htttp://www.urll.com/image.jjpg);
Example:b
peat:Specifieeshowtorep
peatthebackggroundimageewithinitsco
ontainingelem
ment.
backgroundrep
ontally),repeeaty(repeatvvertically)and
Possiblevalues:norepeeat,repeatx((repeathorizo
repeatxy(repeathorizo
ontallyandveertically).
backgroundreepeat:repeattx;
Example:b
osition:Speciffiesthepositiionofabackggroundimageewithinitsco
ontainingelem
ment.
backgroundpo
ovalues.
Maadeupoftwo
Possiblevalues:Top,cen
nter,bottom &left,centerr,right.
backgroundposition:topcenter;
Example:b

TheBo
oxModel
In
ntheboxmod
del,thereareethreeimporrtantpropertiies:border,m
marginandpaadding.Allofthose
canthenb
bedividedintto4separateepropertiesfo
ortop,right,bottomandlleft(respectivvely).Allthe
valuesdeffinedforthessepropertiesareinpixels(px).
Fiirst,soyoucaanseewhereisis,heresaagraphicexpllanation:


MarginsandPadding
Forexample,ifyouwanta10pxmarginallaround,dothis:
margin:10px;
Ifyouwantonlytherightandlefttobe10px,itlllooklikethis:
margin:010px010px;
Rememberthatrespectivelyjustalittlehigher?Asopposedtousingfourpropertieslike:
margintop:0px;
marginbottom:5px;
marginleft:10px;
marginright:15px;
Youcandothisinstead,itllgivethesameresult:
margin:0px15px5px10px;
Alwaysrememberthatwhenyouuse4valuesfortheoneproperty,itsalwaysinthisorder:top,
right,bottomandleft.Inthisexampleiusedthemarginproperty,butthisappliestothepadding
propertyaswell.Thatsprettymuchallthereisonhowtousemarginsandpadding.
Borders
Borders areused pretty much in the same fashion as margins and padding. The only difference is
thatthereareafewmoreusefulpropertiesthatyoucanuselikecolorandwidth.Justlikethoseabove,
theycanbedividedintofourseparatepropertiesoronemasterone.
borderwidth:Specifiestheborderwidth.
Possiblevalues:[widthinpx].
Example:borderwidth:10px;
bordercolor:Combinesthefollowingpropertiesintojustone.Ionlyuseittomakethe
backgroundtransparent.
Possiblevalues:[color].
Example:bordercolor:#ffffff;
borderstyle:Addsandimage,thoughurl,andsetsitasbackgroundtothediv.
Possiblevalues:none,dotted,dashed,solid,double,groove,ridge,insetandoutset.
Example:borderstyle:solid;

Agoodtricktogiveyounowisthatyoucancombineallthosepropertiesintojustone!Asopposed
tousingallthreepropertiesanddoingthis:
.cust_border{
borderwidth:2px;
bordercolor:#ff0000;
borderstyle:dotted;
}

Youcansimplyuseonelineanddothis:
.cust_border{
border:2pxdotted#ff0000;
}

WidthandHeight
width:Specifiesthewidthoftheelement.
Possiblevalues:[widthinpxor%].
Example:width:200px;orwidth:85%;
height:Specifiestheheightoftheelement.
Possiblevalues:[heightinpxor%].
Example:height:200px;orheight: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. Theyre used to for, well, positioning
theboxed.Hereswhattheymean:
static:Followsthenormalflow.Thisisthedefaultanddoesntneedtobespecified.
absolute:Takestheelementoutoftheflowandoffsetaccordingtothecontainingblock.
relative:Relativepositionthatisoffsetfromtheinitialnormalpositionintheflow.

Whenyoureusingtheabsoluteyouneedtotelltheelementwheretobe.Youcanalsousethem
whileyouuserelative;theeffectherewillbeprettymuchthesameasusingmargin.Youcandefinethe
positioningusingthese4properties:

top:Specifieshowfarfromthetopofthecontainingboxtheboxshouldbe.
bottom:Specifieshowfarfromthebottomofthecontainingboxtheboxshouldbe.
left:Specifieshowfarfromtheleftofthecontainingboxtheboxshouldbe.
right:Specifieshowfarfromtherightofthecontainingboxtheboxshouldbe.

Usually,thedistancegivenisinpixel.Anotherthingisthatyoucanonlyuseonlyonepropertyby
axis; by that i mean you can only use top or bottom and left or right. So basically you would get
somethinglikethis:
.pos{
position:absolute;
top:0px;
left:0px;
}

Display
Basically,thisonetellshowtotreatthecurrentdiv.Thereareonlytwousefulvalueshere,inline
and none. The inline value is used in conjunction with float (a property Ill explain in just a bit) which
basicallysaysthatmultipledivscanbeononeline.Thenonevaluemaketheelementinvisible,soitcan
begreatifyouwanttohideanelement,likethejournalheaderimageforexample.Youuseitlikeso:
.dis{
display:none;
}

Float
Floatisanothereasyone,itspecifieswhetherafixedwidthboxshouldfloat,shiftingittothe
rightorleftwithsurroundingcontentflowingaroundit.Therearetwovaluesyoucanuse:leftorright.
Itsusedlikeso:
.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
heightand/orwidthifthecontenttakesmoreroomthanthedivcandisplay.Overflowhas4valuesthat
canbeused.
visible(default):Overflowspillsoverthedefinedborderofthediv.
hidden:Overflowcannotbeseen.
scroll:Theboxscrollstoaccommodatetheoverflow.Ascrollbarwillbevisibleregardlessofifthe
contentissmallenoughtofitinthediv.
auto:Theboxscrollstoaccommodatetheoverflow.Ascrollbarwillbevisibleonlyifthecontent
istoobigtofitinthediv.

.ovrflw{

overflow:auto;
}

Otherusefulproperties
HerearesomeotherusefulpropertiesthatcanbeusedwithinthejournalsCSS.Theyremostly
textspecificproperties.
fontvariant:Specifieswhetherthelowercaselettersinaboxshouldbedisplayedinsmall
uppercase.
Possiblevalues:smallcaps.
Example:fontvariant:smallcaps;

 lineheight:Specifiestheheightofalineoftext,basicallylinespacing.
Possiblevalues:[valueinemor%].
Example:lineheight:1.3e;
letterspacing:Specifiesthespacinginbetweenletters.
Possiblevalues:[valueinem].
Example:letterspacing:0.3em;
wordspacing:Specifiesthespacingbetweenwords.
Possiblevalues:[valueinem].
Example:wordspacing:1.5em;
textindent:Specifiestheindentationofthefirstlineoftextinaparagraph.Canonlybeusedina
pelement.
Possiblevalues:[valueinem].
Example:textindent:2em;
bordercolor:Combinesthefollowingpropertiesintojustone.Ionlyuseittomakethe
backgroundtransparent.
Possiblevalues:[color].
Example:bordercolor:#ffffff;

Howtouse/makeclasses

Thisissupersimpletoexplain.Sayyouwanttomakeabox(adiv)inyourlayout,ormultiple
boxessothatyoucanseparatethedifferentsectionsthenyousimplygolikethis.

IntheJournalEntrypartoftheUpdateJournal,wellneedtocreatethosedivs,letsmaketwo.
Youdwritesomethinglikethis:

<div>Thisisbox#1</div><div>Thisisbox#2</div>

Great, now we have two boxes! But theyre still invisible, if you preview your journal, you
wont see anything different, well except the text you wrote between the div tags (those <div></div>
things).Nowsagoodtimetosaythatifyouhavea<div>tag,youmusthavea</div>tagattheend,to
closethatbox;ifyoudontyourelayoutwillbeamessandyoullbeallconfused.Tostylethem,you
needtoassignthemaclass.Todothatweneedtoaddtheclassattributetothedivtagaswellasgiveit
aname.Sotheexamplewouldnowlooklikethis:

<divclass=div_top>Thisisbox#1</div><divclass=div_bottom>Thisisbox#2</div>

Good, were making progress. But if you preview this code addition youll still see nothing
different.Thatsbecausewehaventcreatedthoseclassesyet.Sothesakeofthisexample,wellonly
addasimpleborderandbackgroundcolor.IntheCSSboxatthebottomofthepage,wellputinthis:
.div_top{
backgroundcolor:#111111;
border:1pxdotted#000000;
}

10

.div_bottom{
backgroundcolor:#55555;
border:3pxsolid#000000;
}

Thatllcreatetwoverydifferentstyledboxes.Butsaythatyouwantallyourboxestolookthe
same, what now? Do we have to make a different class for every div? Simply put, no. As opposed to
havingadifferentnameforbothdivs,youcouldputthesameonetohaveclass=div_name,createone
classandbothdivswouldlookthesame.
Nowbelieveitornot,butthisisallthatacustomCSSjournalis,abunchofstyleddivs!Ifive
donethiswell,thisisreallyallyouneedtogoandstartmakingyourowncustomjournal,butsincethis
istobecomplete,theresmoretosay,soreadon.

TheIEtrick
Beforewemoveontoworkingexamples,imgoingtosharealittletrickifound.Keepinmindthis
isonlyusefulforcreatingmultipledivlayouts.NowimstillnotsureifitssomethingthatdAmade,orif
its just the way that the browser render the CSS code, but if you put an underscore (_) before the
property,onlyIEwilluseit,FFseemstoignoreit.Whyisthisusefulyouask?Foronceifounditsgreat
for the margintop property if you use a negative value. Thats one of the biggest pains if found in
makingeverythingcrosscompatible.Anditssupereasytouse.
Saythatyouhavetwodivs,oneontopoftheotherandthatyouwantthetopofthebottomdiv
totouchthebottomofthetopdiv,inFFthedistancewillbe10pixelsbutinIEitllbe14pixels,thenyou
candosomethinglikethis.Fortheexample(wherethebottomdivisnamed.get_closer):
.get_closer{
margintop:10px;
_margintop:14px;
}

SonowFFwillrisethedivby10pixelsandIEwillriseitby14pixels.

Nowyoureprobablyaskingwhy,right?Itslikeiexplainedinasectionabove,FFandIErender
CSSdifferentlyandbecausetheyrenderfontsdifferently(andIEdoesntlikemargintopasmuchasFF)
soweneedtousealittlefix.
Alsobeawarethatyouwontalwaysneedtodothis,itcomesuponlyinsomecases.Justthat
someofyouwillbestuckwiththisproblem,soimsharingthefixwitheveryone.

11

CustomizingLinks
Ifyouwanttocustomizehoweverystateofalinklooks,theresaclassassociatedtoeachstate.
Now youre probably wondering what a state is. It just means the current state of the link; if its a
normallink,ifyourmouseisonitorifyouclickeditandifyouvevisitedwhereitlinks.Links,soyou
knowareanaelementfollowbyanhtmlreference(href),theylooklikethis:<ahref=url>Link</a>.
Thefourstatesassociatedtolinksare:

a:link:Definesthestylefornormalunvisitedlinks.
a:hover:Definesthestyleforhoveredlinks;Alinkishoveredwhenthemousemovesoverit.
a:active:Definesthestyleforactivelinks;Alinkbecomesactiveonceyouclickonit.
a:visited:Definesthestyleforvisitedlinks.

SotoaddCSStocustomizethem,dolikeso:
a:hover{
textdecoration:none;
}

Examples
Finally, here we are, the part most ofyou will probably use and concentrate on to create your
ownlayouts.Illgiveyouguysafewexamples,fromsimpletoalilmorecomplexandhopefullythiswill
shedsomelightonhowtogetitdone.Nowremember,thisishowidoit,iknowthereareotherways
outtherebutionlyknowmyway,soheregoes.

Example1:Asimplecoloroverhaul

Imjustgoingtochangethebasicshere;colors,fonts,pointsize,bordersandsuch.Sowellonly
seesomeCSS,nochangesaremadetotheJournalBody.

Example_1_Preview.png

Example_1_CSS.txt

Example2:Addingabackgroundimage

WeregoingtokeepthesimpledAcolorschemeandjustaddanimageasbackground.Again,
simplestuffthatonlydealswithCSS.

Example_2_Preview.png

Example_2_CSS.txt

12

Example3:Addingdivs

Inthisone,welladdafewdivs,sothatwecangraphicallyseparatethejournalintosections.So
herewehaveCSS(ofcourse)andnowwestartcreatingalayout,soweadddivstotheJournalEntry.

Example_3_Preview.png

Example_3_CSS.txt

Example_3_HTML.txt

Example4:Creatingacontextbox

Ahthefamousroundedcornercontextbox;wonderhowitsdone?Hereshowidomine.Just
besurethatallyourcornerimagesarethesamedimensions.Anothergoodthingtopointouthereis
thatwellbeusingtheabsoluteandrelativepositioningvalues.

Example_4_Preview.png

Example_4_CSS.txt

Example_4_HTML.txt

Example5:Twocolumnlayout

Youveseenthoselayoutswiththelittlemenuontheleftortherightofthejournalandthink
theyrenifty,wellhereImgoingtoexplainhowtomakeit.Bewarnedthough,itseasierthanyouthink.

Example_5_Preview.png

Example_5_CSS.txt

Example_5_HTML.txt

Contact
IfyouthinkIforgotsomething,didntexplainsomethingquiteright,lookingtodosomethingand
youdontknowhow,feelfreetosendmeanoteondAathttp://dragonx141.deviantart.com.

13