FriendsterAddictz
Would you like to react to this message? Create an account in a few clicks or log in to continue.



 
HomeHome  portal1portal1  GalleryGallery  SearchSearch  Latest imagesLatest images  Link Rotation  Donate  RegisterRegister  Log inLog in  


Global Announcement

FriendsterAddictz Forum is on-search for Moderators. For more information, click THIS.
Please promote FriendsterAddictz Forum.


 

CSS commonly used in overlay

View previous topic View next topic Go down 
Author Message
FriendsterAddictz
Administrator
FriendsterAddictz

Male
Age : 30 Registration date : 2008-03-07 Number of posts : 1081 Location : ...somewhere there...
Character sheet
Tagline: Proud Member



CSS commonly used in overlay Vide
PostSubject: CSS commonly used in overlay   CSS commonly used in overlay Icon_minitimeSun Jun 01, 2008 11:51 pm

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 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:




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:





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:







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...
Back to top Go down

CSS commonly used in overlay

View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum: You cannot reply to topics in this forum
FriendsterAddictz :: FRIENDSTER SECTION :: Friendster Codes and Tutorials -