CSSTutorialforBeginner

ByLanster
CSSTutorialforBeginner

Okay, heres a brief explanation about CSS.

CSS (Cascade style Sheet) used to change all the interface of a web page. We can
change everything that related to the script that we write. For example if we write a CSS
script for table, then the appearance of every table on that web page will change based
on our CSS script.
Now, Im going to tell you about CSS that used in gendou. Uh, but I wont explain
everything about it, since its impossible for me to explain every script (in other word,
Im busy right. Dont expect something extravagant from me).
Note: see every page in this file before you start reading.

You can write the CSS script in http://gendou.com/forum/edituser.php
Youll see some text box there. To change your profile page appearance you must write
the CSS script in about me text box, and to change all appearance in gendou.com
when you log in, you must write your script in the Stylesheet Data text box.

<styletype="text/css">
/*scriptfield*/
</style>
ThisoneisthemostimportantthingwhenwritingCSS,theCSSscriptbelowmustbewrittenin
scriptfield

body,table
{
fontfamily:Verdana,Arial,Helvetica,sansserif;
fontsize:12px;
color:#FFFFFF;
background:#000000;
}
Explanation:
Fontfamilyisusedtochangeyourfontstyle.Whywemustenterthreefontstyles?
So,IllsaynoteveryPChasthatfontstylesoyoumustentertheotherfontstylesothat
PCcanusetheother(alternativefontstyle).
Note:YoucanfindalotoffontstyleinMicrosoftWord,OpenOffice,etc.
Fontsizeisusedtochangethefontsize,trytochangethenumberandyoullfindout.
Colorisusedtochangethefontcolor,justenteracolornametochangeit.
There2waystochangethecolor.
First, you can write yellow to change the font color to yellow or you can write
redtochangethefontcolortored.
Examplecolor:yellow;
If you want a custom color then you can enter those six digits of number
randomly^^.
Hint: The first two digit indicates red color, the second two digits indicates green
color,andthelasttwodigitsindicatesbluecolor,justmixthemrandomlyuntilfind
outanicecolor
Background is used to change the background color, just like color, but its for
background.Youwontneedmyexplanationifyouvereadaboutcolor.
CSSTutorialforBeginner
ByLanster
table
{
borderbottom:1pxsolid#707070;
borderright:1pxsolid#707070;
}

Explanation:
ToputitsimplythiskindCSShave3attributesorwhateveritcalled,Idontknowaboutitsince
Ineveruseitanymore.ButIknowthisscriptformat,hereitis
Borderbottom:'borderwidth''borderstyle''color'
Note: the same format applied for borderright, but once again..it can be applied in border
leftandborderbottom.Sowecanmakeacolorfulpage.

Well,inthiscaseIlljustexplainaboutborderstyle.Borderstyleisusedtochangetheborder
style,thatsall.LOL,Iassumeyoualreadyknowwhatitmeansjustbyreadingthescript.Heres
somestylethatyoucanuse:
Dashed
Dotted
Double
Groove
Hidden
Inherit
None
Outset
Ridge
Solid
Then, good luck for trying those styles. I wont tell you since itll be boring if I tell you
everything.

CSSTutorialforBeginner
ByLanster
th{
bordertop:1pxsolid#707070;
borderleft:1pxsolid#707070;
textalign:center;
verticalalign:top;
fontweight:bolder;toBoldthetext
}
td{
bordertop:1pxsolid#707070;
borderleft:1pxsolid#707070;
textalign:left;
verticalalign:top;
}

Explanation:
Actually this script is used if you want to make a title in the table. We can use it by replacing
html tags <td>Content</td> by <th>Content</th>. If you dont know about it, just try the
sourcecodebellow,writeitinnotepadandsaveitwithextension.htmor.html.

Justlikebefore,thiskindCSShave3attributesorwhateveritcalled.Thisscriptformat,is:
Bordertop:'borderwidth''borderstyle''color'
Thesameformatisappliedforborderleft
Note: the same format applied for borderright, but once again..it can be applied in border
leftandborderbottom.Sowecanmakeacolorfulpage.

Now about textalignment, you can change the text alignment whatever you want just like in
open office or Microsoft word. Just try changing the word center by left or right or
justify.

Vertical align is just like text alignment. Youll understand if you try the source code below.
Remember,practicemakeperfect.
Note: valign==verticalalign
align==textalign
<html>
<head><title>Example</title></head>
<body>
<table>
<tr>
<thheight="70"width="200"valign="top">TH1</th>
<thheight="70"width="200"valign="middle">TH2</th>
<thheight="70"width="200"valign="bottom">TH3</th>
<thheight="70"width="200">TH4</th>
</tr>
<tr>
<thheight="70"width="200"align="left">TD1</td>
<thheight="70"width="200"align="center">TD2</td>
<thheight="70"width="200"align="right">TD3</td>
<thheight="70"width="200">TD3</td>
</tr>
</table>
</body>
</html>

CSSTutorialforBeginner
ByLanster
.body2
{
backgroundcolor:#000000;
border:1pxsolid#FFFFFF;
margin:20px;
padding:4px;
}

Okay, lets learn about style. Ill assume that you already understand about basic CSS. Lets
assumethisonecalledsetstyle,wecanuseitbyembeddingthisstyleinhtmltags.
Thisoneisjustanexampleandfromnowonyoucanuseyourimaginationtocreatesomething
thatamazing.Trythissourcecodeingendou:

<divclass="body2"style="overflow:auto;
height:280px;
maxheight:280px;
width:635px;">
Typeallaboutyouhere,justtypeanythingthatyouwantanddontcopythistextbecauseyou
wontunderstandthemeaningofthisscript
</div>

Explanation:
Thisoneisalittleconfusing.Sojustassumethatyouknowaboutheight,maxheightand
width.Class=body2thisthingisusedtocalltheCSSscriptsothetextindivfieldwillchange
basedonCSSscript.

Andonemorethingthatyoumustknow,wecanusestyle=overflow:auto;height:
280px;maxheight:280px;width:635px;tomakeaslidewindows.Soweneedntuseaframe
oranotherwebsitetoshowourinformation.Thebenefitusingthisscriptiswecanloadthe
webpagefaster.Thankstogendouforprovidingthisone.

CSSTutorialforBeginner
ByLanster
.link
{
textdecoration:underline;
color:#00FFFF;
cursor:pointer;
}

Explanation:
Thisisthesocalledhyperlink.Youcanchangethestyleofalllinksinyourwebpage.Justadd
thatscriptandchangethecolorofyourlinksandthetextdecoration.
Heressomekindoftextdecoration:
Blink
Inherit
Linethrough
Noneoverline
Underline

Trythissourcecodeingendou:
.link
{
textdecoration:blink;
color:yellow;
cursor:pointer;
}

.link:hover
{
color:#FF00FF;
}
This one is used to change the link color of a visited web page, try this one and youll
understand

Trythissourcecodeingendou:

.link:hover
{
color:#FFFFFF;
}

CSSTutorialforBeginner
ByLanster
Heressomethescriptaboutnavigationbar

I wont explain everything about this one, because you already know about it, but the first
thingyoumustdoisdownload/openthispageandyouwillunderstand.
http://i196.photobucket.com/albums/aa184/kiseno_sora/design/navPanel2.gif

#navPanel
{
position:relative;
font:12pxtahoma;
color:#00FFFF;
backgroundcolor:#000050;
border:1pxsolid#FFFFFF;
}

If you want a moving navigation bar then change relative to

fixed(inposition)

.navHorizontal
{
backgroundcolor:#000050;
}

.navVertical
{
border:1pxsolid#FFFFFF;
}

.navHorizontalli
{
backgroundcolor:#000050;
}

.navHorizontal li:hover, .navHorizontal li.over,

.navHorizontala:hover
{
backgroundcolor:#000090;
color:#FFFFFF;
}

Itsusedtochangethecolorandbackgroundcoloronmouseover
#navPanela:visited
{
color:#00FFFF;
}

#navPanela:hover
{
color:#FFFFFF;
}

Theres some script that I didnt write, just contact me if you want it, but its not
recommended, since it can make the navigation bar doesnt work properly.

CSSTutorialforBeginner
ByLanster
Finishing Touch/ First Move:

body {background: black; Its not necessary
background-image: url(Your Picture Link);
background-position: middle right;
background-repeat:no-repeat;
background-attachment: fixed}

For background-position, try left, right, center, top, bottom. Try it!!!
For background-repeat, try repeat, no-repeat, repeat-x, repeat-y and see the
result.
For background-attachment try fixed and relative. See the result!!!

End of tutorial.
If you still confused about CSS, please contact me in Indonesian thread
Link: http://gendou.com/forum/thread.php?thr=24230

You can also send me a message.
Link: http://gendou.com/forum/send-message.php?name=unayasha

Please let me know if there are any broken links, and typos!
Dont worry, Im not bite. J ust tell me if you find something wrong with my tutorial,
beside I never use CSS for one year.



Special Thanks to:
Duta Wacana Christian University for teaching me about CSS
Kiseno_Sora(KisenoSky) for the navigation bar picture
My own computer^^

Yogyakarta, 6 April 2009