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 ( ; )
--.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: Select all
<head>
<style type="text/css"></style>
</head>Code: Select all
<link rel="stylesheet" href="link_to.css" type="text/css" />or <table> , <a> + any tags<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]I_have_10pixels_border_surrounding.me[/img]
--
How to apply a class to a element ?
Step 1 : First , you have to add the class to CSS .
Code: Select all
<style type="text/css">
.maintable {
color:#fff ;
background-color:#000;
}
</style>Step 2 : Apply the class you created into an element .
Code: Select all
<table class="maintable"></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: Select all
#maintable {}Code: Select all
<table id="maintable"></table>Knowledge #01
Code: Select all
div.maintable {}
td.maintable {}
a.maintitle {}While the attributes inside td.maintable will be applied to the <td> tag that uses maintable class ONLY .
Knowledge #02
Code: Select all
.maintable a:link {}
.maintable a:hover {}
.maintable td {}While the attributes inside .maintable td {} will be applied to <td> tag that uses maintable class .
Knowledge #03
eg.
Code: Select all
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;}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: Select all
!importantFunction : 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: Select all
@import url("link_to.css");- Adding Hover effect to links .
Code: Select all
.maintable a:link {color:black}
.maintable a:hover {color:white}Knowledge #09
- Adding Hover Effect to Input & Buttons (Stylize the Input + Buttons)
If your input's class is .inputme :
Code: Select all
.inputme {background-color:#000}
.input:hover {background-color:#fff}
.input:focus {background-color:#ff0000}Stylize your input with color: and border:
Knowledge #10
- Removing the content of selected element and class
Code: Select all
div.copyright {display:none}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 8) . Anyway , don't do this .
Knowledge #11
- Make buttons using a plain 70x25 blue-coloured image . (Buttonization)
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 .[img]link_to_blue.image[/img]
Knowledge #12
- Margin and Padding
You can code margin and padding with this method :
Code: Select all
.div { margin:3px 9px 13px 19px;}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 .
