FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS - CSS Tutorial for skin maker





Summer
I might not explaning CSS in the professional way , but I hope it can help others .

What I called them ?
.maintable >> I called it Class
font-size >> I called it Attribute
<div> / <table> >> I called it Element/Tag

--

CSS's Format
Place a dot ( . ) in front of the class name .
Open a pair of { } after the class's name
Attributes of the class
Seperate attributes by semicolon ( ; )
Quote:

.myclass{color:black;font-size:10px}


--

How to apply CSS into a page ?
Method 1 : Applying to the whole page
Write the CSS in the same page
Code:
<head>
<style type="text/css"></style>
</head>

Link to a CSS file
Code:
<link rel="stylesheet" href="link_to.css" type="text/css" />


Method 2 : Applying to a selected element (by adding style="" to any tags)
Quote:
<span style="color:#ff0000">I am red now !</span>
<div style="font-size:1px">You can't see me cause I am too small</div>
<img style="border:10 px solid #000" src="I_have_10pixels_border_surrounding.me" />
or <table> , <a> + any tags

--

How to apply a class to a element ?
Step 1 : First , you have to add the class to CSS .
Code:
<style type="text/css">
.maintable {
   color:#fff ;
   background-color:#000;
}
</style>
Now you've added a class called maintable to CSS and the elements using it will have black background with white texts .

Step 2 : Apply the class you created into an element .
Code:
<table class="maintable"></table>
Now you've applied black background and white texts that comes with .maintable to a table .

--

Common Attributes for making skin
---
Style : What to fill
- Deeper Explanation
>> additional attributes that can be used
---
font-size : 10px
- Set the size of fonts .
>> px , pt , em , cm , mm .

display : block
- Set the display method of selected element . display:none make the element invisible .
>> block / none / inline / compact / list-item / run-in / marker / table / ...

color : white
- Set the color of text , not background .
>> White / #ffffff(6-digit hex code) / #fff(3-digit hex code) / transparent

padding : 10px
padding-top : 10px
padding-right : 10px
padding-left : 10px
padding-bottom : 10px

- See this image to understand .
- See Knowledge #12 (below) to know more .
>> ()px / % / cm / em / mm / pt / ...

border : 1px solid #fff
border-top : 1px solid #fff
border-right : 1px solid #fff
border-left : 1px solid #fff
border-bottom : 1px solid #fff

- See this image to understand .
>> ()px solid/inset/outset/ridge/groove/double/dotted/dashed (color)

margin : 10px
margin-right : 10px
margin-left : 10px
margin-bottom : 10px
margin-top : 10px

- See this image to understand .
- See Knowledge #12 (below) to know more .
>> ()px / % / cm / em / mm / pt / ...

background-image : url (link_to.image)
- This add a background image to the selected element .

background-color : white
- Set the color of background
>> White / #ffffff(6-digit hex code) / #fff(3-digit hex code) / transparent

background-position : left
- Set the background position of the IMAGE . Remember : It's IMAGE .
>> left / right / bottom / top

background-attachment : fixed
- The background-attachment : fixed fixes the background-image to its place so that when you scroll down , you don't see the background image repeating .
>> fixed / scroll

background-repeat : no-repeat
- background-repeat : no-repeat disallow the background-image to repeat its image if there are still some spaces in the element . background-repeat : repeat-x allow the background-image to repeat horizontally ..
>> repeat-x / repeat-y / repeat

font-weight : bold
- Add/Remove weight to texts .
>> normal / bold / bolder/ lighter

font-style : italic
- Stylize the texts .
>> normal / oblique / italic

text-decoration : underline
- Decorate the texts .
>> overline / underline / line-through / blink

text-align : left
- Align the texts .
>> left / right / center

font-family : Arial , Verdana, Tahoma
- Set the types of font that will be used .
>> (normally used) Verdana , Tahoma , Arial , sans-serif
>> cursive , fantasy , comic sans ms , modern , system , times new roman , ...

vertical-align : top
- vertically align the element .
>> baseline / sub / super / top / text-top / middle / bottom / text-bottom

cursor : pointer
- Change the cursor's face .
>> pointer / hand / crosshair / wait / help / default / move / text / ...

line-height : 100%
- Set the height of the inline box (the box holding one physical line of content)
>> % , cm , mm , px , pt , em , ...

width : 22%
- Set the width of the selected element .
>> % , cm , mm , px , pt , em , ...

height : 90%
- Set the height of the selected element .
>> % , cm , mm , px , pt , em , ...

--

Additional CSS Coding Knowledge

Knowledge #00
- Application method for class name that started with a '#' , not a dot (.)
eg.
Code:
#maintable {}

The class name started with a '#' should be applied to elements in this way :
Code:
<table id="maintable"></table>

For class name that started with '#' , apply using id="" , not class="" .

Knowledge #01
Code:
div.maintable {}
td.maintable {}
a.maintitle {}


The attributes inside div.maintable will be applied to the <div> tag that uses maintable class ONLY .
While the attributes inside td.maintable will be applied to the <td> tag that uses maintable class ONLY .

Knowledge #02
Code:
.maintable a:link {}
.maintable a:hover {}
.maintable td {}


The attributes inside .maintable a:link {} will be applied to the <a> tag that uses maintable class or <a> tag inside a <table> tag that uses maintable class .
While the attributes inside .maintable td {} will be applied to <td> tag that uses maintable class .

Knowledge #03
eg.
Code:
form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma; Arial; sans-serif; font-size: 10px; color: #000}
TABLE, TR, TD { font-family: Verdana, Tahoma; Arial; sans-serif; font-size: 10px; color: #c8c8c8;}

The img above is carrying attributes for <img> tag that does not have any classes .
While the BODy above is carrying attributes for <body> tag .
TABLE, TR, TD above is carrying attributes for <table> , <tr> or <td> tag that does not have any classes .

Knowledge #04
Code:
!important

Example : .maintable {color:#000!important;}
Function : Increase the importance of the attribute .

Knowledge #05
- additional padding , border and margin knowledge .
If you wanna set one side of padding/border/margin only , add a dash (-) + direction after the attribute .
eg. padding-left:10px / border-right:5px solid #000 / margin-bottom:4px

Knowledge #06
- border knowledge .
As you know , border can be written like this : border: 1px solid #000 , but you can make the border different by editing the solid to :
inset >> Indented Effect
outset >> Pop-out Effect
ridge >>
groove >>
double >> Double Line Border Effect
dashed >> Dashed Line Effect
dotted >> Dotted Effect

Knowledge #07
- Importing a external CSS file .
Code:
@import url("link_to.css");


Knowledge #08
- Adding Hover effect to links .
Code:
.maintable a:link {color:black}
.maintable a:hover {color:white}

The codes above make the link that uses maintable class black in color , when you place the mouse over the link , it (hover)changes to white .

Knowledge #09
- Adding Hover Effect to Input & Buttons (Stylize the Input + Buttons)
If your input's class is .inputme :
Code:
.inputme {background-color:#000}
.input:hover {background-color:#fff}
.input:focus {background-color:#ff0000}

The codes above make the inputs that uses myinput class have a black background(bg) , when the mouse is over the input , its bgcolor changes to white , when you click on the input , the bg changes to red .
Stylize your input with color: and border:

Knowledge #10
- Removing the content of selected element and class
Code:
div.copyright {display:none}

The codes above removes all the contents of <div> tag that uses copyright as its class .
Yes , with this , you can remove the copright , but I'm not here to teach you how to remove copyright . Normally , the element/tag that contains the BBS's copyright are used with important functions too , but you can change the class Cool . Anyway , don't do this .

Knowledge #11
- Make buttons using a plain 70x25 blue-coloured image . (Buttonization)
Quote:
<img src="link_to_blue.image" style="border:2px outset #000" />

You will noticed you've made a buttons with making a border in the image . This makes your works easier if you make skins . Just make a gradient and buttonize it with the CSS .

Knowledge #12
- Margin and Padding
You can code margin and padding with this method :
Code:
.div { margin:3px 9px 13px 19px;}

With this kind of coding , you don't have to specify the direction anymore as you've done all the direction .
The 3px above means you have 3 pixels of spaces from the top (margin-top) .
The 9px above means you have 9 pixels of spaces from the top (margin-right) .
The 13px above means you have 13 pixels of spaces from the top (margin-bottom) .
The 19px above means you have 19 pixels of spaces from the top (margin-left) .

Remember : It is rotating in clockwise direction and started from top .
It is the same with padding .

--

Other links to learn CSS :
W3Schools
WestCiv
EchoEcho
W3.org
HTMLHelp
QuickTutorial - HTMLHelp

--

Phew , I've told you all the CSS knowledge I knew . Feel free to link others to this tutorial , I will be happy if you did that .
I learned CSS by myself , by looking at <style> of different websites , then I started to make skins . Making skins is the easiest way to learn CSS , I think .

Please correct me if I am wrong . If I missed something , tell me . Thanks .

Tutorial written by Summer (KZ)

Last update by 2:48 PM - 11/30/2005 (GMT+8)

Post comments here . thanks .

Hope to see you there .
clogfan
nice basic tutorial about css can be found at http://www.w3schools.com/
Summer
Yes, but u need a lot tutorial to master , right ?
n0obie4life
Summer wrote:
Yes, but u need a lot tutorial to master , right ?


If you can post it here (new topic), I'll stickify it.

And make it like any of these 3 example topics

http://frihost.com/forums/vt-13421.html
http://frihost.com/forums/vt-19192.html
http://frihost.com/forums/vt-15678.html
Summer
Ok , edited .

[EDITED] - (for the post below this post)
no probs . Hoping to get more members .
n0obie4life
Thanks for contributing Wink
imc
If you are into CSS you can go to http://www.tutorialized.com
there are some great tutorials on CSS
rainynightstarz
ohh!! i like this tutorial, it gives me all the choices i can use, so i dont' have to look around for them!

Thank you sooo much! Very Happy
Summer
Thanks for reading .. at last ppl notice this tutorial .
paulrodga
There is a great web about normalized CSS

http://www.csszengarden.com/

You could change the CSS of the web at real time and you could take the code to put in your styles. Is amazing and very simple way to make serius or funny styles woth a very simple html code (better if is normalized with W3C)

Thanks, bYe!!!!!
asturmas
CSS Tutorials:

http://www.westciv.com/style_master/academy/css_tutorial/
http://maxdesign.com.au/
http://www.htmlgoodies.com/beyond/css/index.php
http://hotwired.lycos.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html
http://www.echoecho.com/css.htm
http://www.htmldog.com/
http://www.thenoodleincident.com/tutorials/css/
http://www.w3.org/Style/Examples/011/firstcss
http://www.htmlhelp.com/reference/css/
http://www.tizag.com/cssT/

I wait that the tutorial ones help you!

Bye
Mona Liza
thanx dear summer
kuhdorf
yep thx =)
rehana
[b] thanx u great friend
speeDemon
Well, i cant really say that i understood everything, because i didnt read it fulllly, but its simply gr8!
Relcone
Cool men!
Thats intersting i want to learn this one.
Thnks!
Related topics
Tutorials
The worlds shortest and laziest Mambo tutorial.
Azkabanweb.tk
Dynamic User Customizable Sites. CSS + PHP = Awesome!
PHP Tutorials
Tutoriais any Language:
nice beginning CSS tutorial
How to design IPB skins?
What's the best for page layout? CSS or using Tables?
CSS tutorial
CSS - Where to start off..?
My First CSS Tutorial
Good sites to learn css?
little CSS tutorial
Reply to topic    Frihost Forum Index -> Miscellaneous -> Tutorials

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.