#1 2007-08-03 01:54:46
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Most Commonly used CSS for OVERLAY
What is CSS?
CSS stands for cascading style sheets.
Cascading style sheets are used to change properties like font face, size, font in tables,
scrollbar color, link color and hover color, and other style attributes on Web sites,
without having to use long HTML codes.
EXAMPLE OF COMMON USE CSS:
Remember not to remove any colons or semicolons, the code will not work without them. Your finished style sheet will be placed between the <head> tag:
Begin style sheet:
Code:
<style type="text/css">
A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:visited
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:active
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:hover
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000;
background-image: url(yourimage.gif);
background-color: #000000;
(Warning: the following cursor attribute is for those who use IE only!)
cursor: value; [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize]
cursor: url('yourdomain.com/cursor.ani');}
h1 {font-family: value; [your font name for headers (arial, verdana, etc.)]
color: value; [your font color (#000000)] }
p {font-family: value; [your font name for paragraphs (arial, verdana, etc.)]
color: value; [your font color (#000000)] }
body
{ background: #000000;
background-image: url(value); [url of background image to be used, i.e. background.gif]
background-repeat: value; [repeat, no-repeat, repeat-x, repeat-y]
background-position: valueI valueII; [valueI: top, center, bottom, percentage, pixel number]
[valueII: right, center, left, percentage, pixel number]
background-attachment: value; [scroll, fixed]
font-family: value; [your font name]
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight: value; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size: value; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]
direction:rtl; [this reverses the entire site so the scrollbar is on the left]
(Warning: the following scrollbar attribute is for those who use IE only!)
scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
td
{ font-family: value; [your font name]
color: #000000;
padding-left: value; [2cm, 4cm etc.]
padding-right: value; [2cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm this is for all four sides]
padding: value value; [2cm, 4cm : two values for four sides, add numerical value] }
input, textarea
{ background: #000000 url(yourimage.gif);
font-family: value; [your font name]
color: #000000;
border-style: value; [dotted, dashed, solid, double, groove, ridge, inset, outset]
border-color: #000000;
border-width: valuepx; [numerical value, 5, 6, 8...] }
</style>End style sheet
How do I make my own style sheet? You start your style sheet with this tag:
<style type="text/css">
and end it with this one:
</style>
All of your attributes will go in between those two tags. For instance, if you wanted just a style sheet to remove the underline from your links, you would use this style sheet:
<style type="text/css">
A:link
{ text-decoration: none; }
</style>
If you want a style sheet that also includes a background color, you would use this tag, substituting your own color # where you see bold text:
<style type="text/css">
A:link
{ text-decoration: none; }
body
{ background-color: #000000; }
</style>
TAKE NOTE:
for advance user who wish to make much elaborated design
pls USE UR SEARCH ENGINE ...
i suggest too pls visit first the ff link u can learn more bout css here
http://www.dynamicdrive.com/
http://www.w3schools.com/
for cursor codes and hover
again search for this... theres lot of site that offer their service
and provide codes for this.. and all u need to do is copy paste the codes...
Last edited by eehjhay (2007-08-03 07:50:47)
.. thnx Q ..kabit.. dai dai... muahhss
#2 2007-08-03 03:52:17
- 'airene17
- » FriendsterAgent
- › me <3 sean :))
- Location: Sta. Rosa, Laguna
- Registered: 2007-06-08
- Posts: 2456
- Last visit: Today
- Reputation: 8
- Friendster
Re: Most Commonly used CSS for OVERLAY
thanks for sharin. . 
-Offline- |
#3 2007-08-03 06:45:57
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Re: Most Commonly used CSS for OVERLAY
wowowieee!!! a newbie like me appreciates my sharing ...
much appreciated...pal...
anywayz i come up w/ this in conjuction with my overlaying tutorial... (posted here too)
wherein i share d simpliest way to make a page design...
thanks again.... 
.. thnx Q ..kabit.. dai dai... muahhss
#4 2007-08-03 07:47:32
- eehjhay
- » Moderator
- › Cleaning mode, watch out!
- › Class X
- Location: Liverpool NSW AU
- Registered: 2007-02-13
- Posts: 4288
- Last visit: Yesterday
- Reputation: 109
- Friendster
Re: Most Commonly used CSS for OVERLAY
lol. just a suggestion, do not put a comment in a css style if you have a wrong comment tag.
comment tag is bounded by this code <!-- comment here -->
for example:
<style>
body {
background: transparent; }
<!-- no background -->
</style>
 |
-Offline- |
#5 2007-08-03 09:45:06
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Re: Most Commonly used CSS for OVERLAY
lol.. enx for clarification eehjay...
.. thnx Q ..kabit.. dai dai... muahhss
#6 2007-08-03 12:36:27
- black seraphim
- » FriendsterTalker
- › illusiveconsensus.com
- Location: Philippines
- Registered: 2007-05-11
- Posts: 236
- Last visit: 2008-05-11
- Reputation: ~
- Friendster
Re: Most Commonly used CSS for OVERLAY
eehjhay wrote:
lol. just a suggestion, do not put a comment in a css style if you have a wrong comment tag.
comment tag is bounded by this code <!-- comment here -->
for example:
<style>
body {
background: transparent; }
<!-- no background -->
</style>
You can also use this style on inserting comment on css code.
/*comment*/
like this
<style type="text/css">
/*this is a css style for paragraph*/
p {
font-family: verdana;
font-size: 10px;
color: #000000;
}
</style>
My blog is now online! Just click the image.
-Offline- |
#7 2007-08-03 15:05:16
- i_can't_speak_english
- » FriendsterNewbie
- › ada deh
- Location: ada deh
- Registered: 2007-08-02
- Posts: 12
- Last visit: 2007-09-01
- Reputation: ~
- Friendster
Re: Most Commonly used CSS for OVERLAY
confused 
auah gelap
-Offline- |
#8 2007-08-04 01:21:17
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Re: Most Commonly used CSS for OVERLAY
hehehe actually
<style> </style> is oly short ver of this
<style type="text/css"> </style>
then putting /* */ jus serve as a purpose of idetification what ur
codes for u can put anthing there even ur name...
its same with putting <!----- mssg here --------!>
with or w/o those stil ur css style will do as long as there is open and close tag ... or else it would be an error for it will cause u gap
example :
http://www.geocities.com/apolpie.n_nugg … orial.html
pls view the source to see what i mean
i uses
<style type="text/css"> </style>
as my css tag for head part ....
Last edited by switpotato (2007-08-04 01:32:30)
.. thnx Q ..kabit.. dai dai... muahhss
#9 2007-08-04 02:17:16
- black seraphim
- » FriendsterTalker
- › illusiveconsensus.com
- Location: Philippines
- Registered: 2007-05-11
- Posts: 236
- Last visit: 2008-05-11
- Reputation: ~
- Friendster
Re: Most Commonly used CSS for OVERLAY
@switpotato
I viewed your source and I saw these
body {
background-color: mistyrose;
background-image: url(http://i147.photobucket.com/albums/r299 … ripewp.jpg);
color: mistyrose;background-attachment: fixed;
font-family: verdana;
font-size: 11;
font-weight: bold;
letter-spacing: 0pt;
line-height: 10px;
text-align: justify; }
body {cursor: url(http://www.dressupmyspace.com/cursors/bunny/1.cur);}
BODY{BORDER-TOP: 20px outset pink ;
BORDER-BOTTOM:20px inset pink;
BORDER-LEFT: 20px outset pink;
BORDER-RIGHT:20px inset pink;}
body {
scrollbar-Face-Color:#FFC0CB;
scrollbar-Highlight-Color:seashell;
scrollbar-Shadow-Color:#FFC0CB;
scrollbar-3dLight-color:seashell;
scrollbar-Arrow-Color:seashell;
scrollbar-Track-#FFC0CB:seashell;
scrollbar-DarkShadow-Color:seashell} /*you forgot to terminate this line */
td, xmp
{ font-family: verdana;
color: chocolate;
font-size: 9;
font-weight: normal;
letter-spacing: 0pt;
line-height: 12px;
text-align: justify;
}
BODY {
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#FFF5F5;
scrollbar-3dlight-color: salmon;
scrollbar-darkshadow-color:#FFF5F5;
scrollbar-shadow-color: salmon;
scrollbar-arrow-color:#F9B7B7;
scrollbar-track-color:#FFFFFF;
BODY{BORDER-TOP: 20px outset pink ;
BORDER-BOTTOM:20px inset pink;
BORDER-LEFT: 20px outset pink;
BORDER-RIGHT:20px inset pink;}
Its better that all the style codes shall be wrap in only ONE body { }. Another thing that I have observed is the scrollbar style, and body border style that were wrapped on your body tag have been repeated on the bottom part of your code. That is not the proper way to make css codes and this must be something like this:
<style type="text/css">
body {
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#FFF5F5;
scrollbar-3dlight-color: salmon;
scrollbar-darkshadow-color:#FFF5F5;
scrollbar-shadow-color: salmon;
scrollbar-arrow-color:#F9B7B7;
scrollbar-track-color:#FFFFFF;
background-color: mistyrose;
background-image: url(http://i147.photobucket.com/albums/r299 … ripewp.jpg);
background-attachment: fixed;
cursor: url(http://www.dressupmyspace.com/cursors/bunny/1.cur);
BODY{BORDER-TOP: 20px outset pink ;
BORDER-BOTTOM:20px inset pink;
BORDER-LEFT: 20px outset pink;
BORDER-RIGHT:20px inset pink;
font-family: verdana;
font-size: 11;
font-weight: bold;
letter-spacing: 0pt;
line-height: 10px;
text-align: justify;
}
</style>
Since I just added styles only in a body tag, I do not have to put comments like <!- -!> or /* */. Comment tags were only used if you define a class or id for an html tag like this one:
I'll make a css style on a <div> tag with a define class and id for example the html code goes something like this:
<html>
<head>
<title>Div</title>
</head>
<body>
<div class="div1"></div><br><div id="div2"></div>
</body>
</html>
To avoid confusing on every divs you must add up comments like this on your css style.
<html>
<head>
<style type="text/css">
/*this div is for my more about me*/
.div1 {
font-family: tahoma;
font-size: 10px;
color: #000000;
}
/*this div is for my testimonials*/
#div2 {
font-family: verdana;
font-size: 10px;
color: #FFFFFF;
}
</style>
<title>Div</title>
</head>
<body>
<div class="div1"></div><br><div id="div2"></div>
</body>
</html>
In friendster they add up comments on tag so that friendster users that will make any edition on css codes will not be confused. I hope you get my point. 
My blog is now online! Just click the image.
-Offline- |
#10 2007-08-04 02:27:52
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Re: Most Commonly used CSS for OVERLAY
yep...
i figure it out too...
i done it in a rush for table designing i made...
and some codes like for modules r there just for my
quick identification lol...
usin a semicolons for body will do the magic...
but for a newbie to combine codes dont u think doing such wil be lil compicated...
mind u mostly of newbie who juz starting to make overlaying
just depend in copy paste codes...
same way can be applied in non overlaying
havent u notice .. ids and classes r kept on repeatedy mentioned
and for my div..lol... i uses a general id for that...
why separate my div... when i intented to have one design for all...
Last edited by switpotato (2007-08-04 02:30:26)
.. thnx Q ..kabit.. dai dai... muahhss
#11 2007-08-04 02:56:36
- black seraphim
- » FriendsterTalker
- › illusiveconsensus.com
- Location: Philippines
- Registered: 2007-05-11
- Posts: 236
- Last visit: 2008-05-11
- Reputation: ~
- Friendster
Re: Most Commonly used CSS for OVERLAY
@switpotato
yep...
i figure it out too...
i done it in a rush for table designing i made...
and some codes like for modules r there just for my
quick identification lol...
usin a semicolons for body will do the magic...
but for a newbie to combine codes dont u think doing such wil be lil compicated...
mind u mostly of newbie who juz starting to make overlaying
just depend in copy paste codes...
same way can be applied in non overlaying
havent u notice .. ids and classes r kept on repeatedy mentioned
Since your code is for learning purposes why did you make it in a rush?
Combining a code in one tag is not that complicated. Your code is actually more complicated because you repeatedly put css styles on your body tag and that is more confusing for those newbie to understand and more unaccurate for the server to read. Did you ever notice that your sample overlay page loads poorly? And since those newbies are on copy&paste code stage, You shall make sure that your codes are clean, no errors at all and most of all no repetition of defining css styles on tags since your page is a sample of an overlay profile.
and for my div..lol... i uses a general id for that...
why separate my div... when i intented to have one design for all...
lol... i just make an example on the common use of comment tags. You're free to use the same style on your divs. 
My blog is now online! Just click the image.
-Offline- |
#12 2007-08-04 03:02:53
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Re: Most Commonly used CSS for OVERLAY
lol what i posted are introduction in css see the first part of the topic...
i just show my preview
for what to.. to let see
<style type="text/css">
</style>
or
<style type="text/css">
<!--------
</style>
wil do too
same with <style> </style>
or
<style type="text/css">
/*this is a css style for paragraph*/
</style>
some variety how codes wer executed
thats why i suggested too... plsvisit the given site for more
specially for advance user like u...
ok for all
to check if u did it ryt...
pls use validator... it wil give u a hint what part went wrong
http://jigsaw.w3.org/css-validator/
theres more site that offer this kind of service..
i juz lost my link... toink!
and that the advantage pf people who have prog in making
layout like photoshop u design hit show html
no sweat codes r there...
Last edited by switpotato (2007-08-04 03:11:22)
.. thnx Q ..kabit.. dai dai... muahhss
#13 2007-08-04 03:32:54
- black seraphim
- » FriendsterTalker
- › illusiveconsensus.com
- Location: Philippines
- Registered: 2007-05-11
- Posts: 236
- Last visit: 2008-05-11
- Reputation: ~
- Friendster
Re: Most Commonly used CSS for OVERLAY
ok for all
to check if u did it ryt...
pls use validator... it wil give u a hint what part went wrong
http://jigsaw.w3.org/css-validator/
theres more site that offer this kind of service..
i juz lost my link... toink!
and that the advantage pf people who have prog in making
layout like photoshop u design hit show html
no sweat codes r there...
I have checked my page http://ab.atwebpages.com/bluesoft to validate my page and this is what happened:
5 body Property scrollbar-base-color doesn't exist : #466478
6 body Property scrollbar-track-color doesn't exist : #466478
7 body Property scrollbar-3dlight-color doesn't exist : #000000
8 body Property scrollbar-arrow-color doesn't exist : #eeeeee
47 a .friendspic Parse Error - opacity=50)
51 a:hover .friendspic Parse Error - opacity=100)
54 a .affilates Parse Error - opacity=50)
57 a:hover .affilates Parse Error - opacity=100)
Then I have read this one on http://www.websitedev.de/css/validator-faq and this is what it says:
The CSS Validator validates your style sheet against some profile, e.g. CSS Level 1 or CSS Level 2. Some browser Vendors however extend these profiles by new properties like Microsoft did with the scrollbar-base-color or filter property or Mozilla with the -moz-opacity property. The Validator is not aware of these properties and using them makes your style sheet invalid in terms of the CSS specifications. Either get rid of those properties or live with the fact, that your style sheets don't validate. You cannot have both.
This means that the validator is not aware of these scrollbar-base-color and filter styles but Windows Internet Explorer and Mozilla firefox (Firefox can read opacity by -moz-opacity style but cant read scrollbar-base-color style) can read the following css style because these style properties are extended feature on browser. The point here is if you want to make a Valid css style sheet you must get rid of these properties and use css styles that are valid.
These are the valid css styles just check them out if you want
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/CSS2/
Still I want to use scrollbar-base-color properties and filter properties to spice up my profile. Who the hell care on that css validation. For me, Its just like formality purposes.
My blog is now online! Just click the image.
-Offline- |
#14 2007-08-04 03:42:54
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Re: Most Commonly used CSS for OVERLAY
yeaa...some colorname aint legally read.......wakekeke
anyway u sounds really a genius in this stuff i leave it all to u...
master of this craft...
horray!!!
pls post more i juz want to learn more... educate me
again i aint showing my preview for my codes to b copied nor
my mistakes tooo hahaha...
i juz show the head part ... for beginning of my css
w/c then is....
<style type="text/css">
</style>
and the other what is with
<style type="text/css">
<!----
</style>
in it...
.. thnx Q ..kabit.. dai dai... muahhss
#15 2007-08-04 03:46:40
- black seraphim
- » FriendsterTalker
- › illusiveconsensus.com
- Location: Philippines
- Registered: 2007-05-11
- Posts: 236
- Last visit: 2008-05-11
- Reputation: ~
- Friendster
Re: Most Commonly used CSS for OVERLAY
@switpotato
I'm not a geek on this stuff I just know the basics.
My blog is now online! Just click the image.
-Offline- |
#16 2007-08-04 03:51:08
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Re: Most Commonly used CSS for OVERLAY
and i know only below the most basic hahaha...
anyway theres a thing that intrigue me...
what that meta equip for and transition of entry
i seen those with photoshop
but some site have those too
but it legally named after to them... dahhh!! i really dont get it hahaha
Last edited by switpotato (2007-08-04 03:53:47)
.. thnx Q ..kabit.. dai dai... muahhss
#17 2007-08-04 04:14:55
- black seraphim
- » FriendsterTalker
- › illusiveconsensus.com
- Location: Philippines
- Registered: 2007-05-11
- Posts: 236
- Last visit: 2008-05-11
- Reputation: ~
- Friendster
Re: Most Commonly used CSS for OVERLAY
@switpotato
Actually I dont know exactly the use of meta equip. What I know on my meta tags is for adding keywords on your page and description. Web developers add keywords and description so that search engine can display their page.
My blog is now online! Just click the image.
-Offline- |
#18 2007-08-04 04:46:17
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Re: Most Commonly used CSS for OVERLAY
i wana know more about that thou...
thou i personally dont need it lol..
anyway i forgot to thank u regarding the editted css for that preview...
ill use those maybe later...
and one thing ..hehehe .. i hate using this /* */
specifing what those codes for...
know why?...
for rippers purpose...wakekeke...
let them analyze what those for... n i usually
make my codes so close to each other....
rumbing it most of the time...
giving the ripper a hard time figuring it out lol...
wicked me...
.. thnx Q ..kabit.. dai dai... muahhss
#19 2007-08-04 05:10:01
- black seraphim
- » FriendsterTalker
- › illusiveconsensus.com
- Location: Philippines
- Registered: 2007-05-11
- Posts: 236
- Last visit: 2008-05-11
- Reputation: ~
- Friendster
Re: Most Commonly used CSS for OVERLAY
switpotato wrote:
i wana know more about that thou...
thou i personally dont need it lol..
anyway i forgot to thank u regarding the editted css for that preview...
ill use those maybe later...
and one thing ..hehehe .. i hate using this /* */
specifing what those codes for...
know why?...
for rippers purpose...wakekeke...
let them analyze what those for... n i usually
make my codes so close to each other....
rumbing it most of the time...
giving the ripper a hard time figuring it out lol...
wicked me...
Hahahaha! Rippers will really have a hard time ripping your layout if that's the case
May I view your friendster account?
My blog is now online! Just click the image.
-Offline- |
#20 2007-08-04 05:14:43
- switpotato
- » FriendsterWhiz
- › dcrazier dbetter bxtreme
- › Class X
- Location: HubbieHubbieLand
- Registered: 2007-05-23
- Posts: 2663
- Reputation: 240
Re: Most Commonly used CSS for OVERLAY
im not using overlay as of now...
aint showing dunno why
i shift last time to non for a while waaaaaaaa...
my email add:
u.nix_07@yahoo.com
.. thnx Q ..kabit.. dai dai... muahhss
Board footer
FriendsterTalk is not affiliated with Friendster.com
Copyright © 2002–2008 PunBB
[ 28 queries - 0.423 second ]
Pay Per Click Ads by 