CSS Tutorial

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.
ByLanster
table
{
borderbottom:1pxsolid#707070;
borderright:1pxsolid#707070;
}
Explanation:
ToputitsimplythiskindCSShave3attributesorwhateveritcalled,Idontknowaboutitsince
Ineveruseitanymore.ButIknowthisscriptformat,hereitis
Borderbottom:'borderwidth''borderstyle''color'
Note:thesameformatappliedforborderright,butonceagain..itcanbeappliedinborder
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.
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:
Actuallythisscriptisusedifyouwanttomakeatitleinthetable.Wecanuseitbyreplacing
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:thesameformatappliedforborderright,butonceagain..itcanbeappliedinborder
leftandborderbottom.Sowecanmakeacolorfulpage.
Nowabouttextalignment,youcanchangethetextalignmentwhateveryouwantjustlikein
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>
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.
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;
}
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;
If you want a moving navigation bar then change relative to
font:12pxtahoma;
fixed(inposition)
color:#00FFFF;
.navHorizontal
}
.navVertical
{
}
.navHorizontalli
}
.navHorizontal li:hover, .navHorizontal li.over, Itsusedtochangethecolorandbackgroundcoloronmouseover

.navHorizontala:hover
{
color:#FFFFFF;
}
#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.
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. Just 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
ByLanster

CSS Tutorial

Uploaded by

Document Information

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

CSS Tutorial

Uploaded by

Copyright:

Available Formats

CSSTutorialforBeginner

Okay, heres a brief explanation about CSS.

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

Finishing Touch/ First Move:

Special Thanks to:

You might also like