Monday, July 14, 2008

..
padding-left:15px;
padding-right:7px;
Step-1 : I have no style sheet
Step-2 :Style Added >>background-color:pink

Step-3 :Style Added >>border:1px solid #ff0000

Step-4 :Style Added >>color:blue

Step-5 :Style Added >>padding-left:25px

FONT-SIZE
Point-6: FONT-SIZE:8px;
Point-6: FONT-SIZE:8pt;
Point-6: FONT-SIZE:1em;
Point-6: FONT-SIZE:10px;
Point-6: FONT-SIZE:10pt;
Point-6: FONT-SIZE:2em;
Point-6: FONT-SIZE:1pt;
Point-6: FONT-SIZE:1em;
Point-6: FONT-SIZE:small;
Point-6: FONT-SIZE:medium;
Point-6: FONT-SIZE:large;
Point-6: FONT-SIZE:x-large;
Point-6: FONT-SIZE:xx-large;
Point-6: FONT-SIZE:80%; 
-----------------------------------------
Note1:x-small,xx-small also possible values
Note2: 12pt = 15px= 1.00em= 100%
Note3: 10pt = 13px= 0.85em = 85%
Note4: more details on font sizes


FONT-FAMILY
Point-7: FONT-FAMILY:arial,verdana;
Point-7: FONT-FAMILY:verdana,arial;
Point-7: FONT-FAMILY:'monotype corsiva';
Point-7: FONT-FAMILY:'lucida handwriting';
Point-7: FONT-FAMILY:'comic sans ms';
Point-7: FONT-FAMILY:papyrus; 
-----------------------------------------
Note1:when you write more than one font,
      it will search the fonts in the client
      computer in the order given in the code
Note2:monotype corsiva is  of two  words.
      Hence it is given in quotes.

Note4: more details on font families


FONT-WEIGHT
Point-9 : FONT-WEIGHT:bold;
Point-9 : FONT-WEIGHT:normal;
Point-9 : FONT-WEIGHT:lighter;
Point-9 : FONT-WEIGHT:100;
Point-9 : FONT-WEIGHT:200;
Point-9 : FONT-WEIGHT:400;
Point-9 : FONT-WEIGHT:700;
Point-9 : FONT-WEIGHT:900; 
-----------------------------------------
Note1:normal,bold,bolder,lighter are possible values
Note2:100,200...900 are possible values
Note3:400 is equal to  normal
Note4:700 is equal to bold


Point 10:Style Added >> MARGIN.
  margin-left:20px;margin-bottom:30px;
  ------------------------------------------------ 
  Note1:Margin means giving space outside the wrapper.
  Note2:Padding means giving space inside the wrapper.
  Note3:margin:20px(means all four sides)
  Note4:margin:20px 10px;(top&bottom,left&right)
  Note5:margin:20px 5px 15px 5px;(top,right,bottom,left)
  Note6:margin-left:10px(means left margin is 10px)



  Point-11 : Style Added >>BACKGROUND IMAGE
     background-image:url(mathi/flr.jpg);
     background-repeat:no-repeat;
     background-position:right bottom;
     background-color:#0066cc;
     ---------------------------------------
   


position:abosolute;
width:200px;
height:50px;
background-color:#d0d0d0;
-------------------------------------
font-family:arial,verdana;
font-weight:bold;
font:10px arial,verdana;
-----------------------------------------
margin:3px 8px;
border-left:1px solid #d0d0d0;(note:solid,dashed,dotted)
overflow:auto;
float:right;float:right;
cursor:nw-resize;??
z-index:5;????
opacity:0.6;
filter: progid:DXImageTransform.Microsoft.alpha(opacity=60);
background-position:50% top;
cursor:hand;cursor:pointer;
----------------------------
.mathi ..................class="mathi"
#mathi.................. id="mathi"
TD.......................
---------------------------------
div .spacer5{clear:both;line-height:5px}



Hello world


-----------------------------------
button {
 BORDER-TOP-WIDTH: 0px;
        PADDING-RIGHT: 0px;
        PADDING-LEFT: 0px; 
        BORDER-LEFT-WIDTH: 0px;
        BACKGROUND: none transparent scroll repeat 0% 0%;
        BORDER-BOTTOM-WIDTH: 0px;
        PADDING-BOTTOM: 0px; 
        MARGIN: 0px; 
        CURSOR: pointer; 
        PADDING-TOP: 0px; 
        BORDER-RIGHT-WIDTH: 0px
}
--------------------------------------------------------
A:link {
 TEXT-DECORATION: none
}
A:visited {
 TEXT-DECORATION: none
}
A:hover {
 TEXT-DECORATION: underline
}
A:active {
 TEXT-DECORATION: none
}
-------------------------------------------------------
background-position:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
-----------------------------------------
cursor:pointer
The above cursor will show Hand.Other cursors are
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help 
---------------------------------------
OPACITY

SOME BROWSERS USE OPACITY: AND SOME BROWERS USE
FILTER-CUM-ALPHA
YOU SHOULD USE BOTH THE ITEMS SO THAT IT WILL WORK 
IN BOTH THE BROWSWERS.
javascript is :onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

--------------------------------------------------------
 FILTER CAN ALSO BE USED FOR GRADIENT,ROTATING A PICTURE.
 PLEASE VISIT THIS PAGE:http://labs.thumbshots.com/stylefilters.aspx
ASP code for Rounded Corner Rectangle Box
----------------------------------------------------------
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

For Latest tamil kollywood bollywood actor actress photos wallpapers mp3 video songs,general knowledge, surya jyothika vijay vadivelu comedy,tourist places,cheapest air tickets,real estate,hostel accomodation,distance education courses :::: visit enjoystudy.blogspot.com