Home
1
What is Css? Fri Jun 26, 2009 9:33 am
danilodeleon
Administrative Team
Number of posts : 491
Age : 32
Location : manila
Job/hobbies : ...layout designing lolz
Humor : fixing the data:))
WARNING LEVEL :
CONTRIBUTION POINTS :
Registration date : 2008-11-17
Reputation : 2
Points : 335
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS stylesheet, readers can use a different stylesheet, perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style RULES apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to RULES, so that the results are predictable.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS stylesheet, readers can use a different stylesheet, perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style RULES apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to RULES, so that the results are predictable.
css is used for designing layouts of some online communities such as friendster,multipy, or myspace,etc.
FOR FRIENDSTER:
THE BASIC CSS FOR CROSSOVER LAYOUTS
- Spoiler:
/* PAGE BACKGROUND */
body {
background-image: url(http://);
background-attachment: scroll;
background-position: top center;
background-repeat: repeat;
background-color: #;
cursor: url(http://);
scrollbar-face-color: #;
scrollbar-shadow-color: #;
scrollbar-highlight-color: #;
scrollbar-3dlight-color: #;
scrollbar-darkshadow-color: #;
scrollbar-track-color: #;
scrollbar-arrow-color: #;
border-style:none;
border-top-color: #;
border-bottom-color: #;
border-left-color: #;
border-right-color: #;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
overflow-x: hidden;
}
/* CURSOR */
a,a:link,a:visited,a:active,a:hover {
cursor:url(http://),default;
}
/* GLOBAL FONTS */
.usercontent {
font-family: default;
color: #;
text-transform: none;
}
/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {
font-family: default;
color: #;
text-transform: none;
}
/* GLOBAL LINKS HOVER */
.usercontent a:hover {
color: #;
text-decoration: none;}
/* MASTER BOXES */
.commonbox {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
.commonbox .evenrow {
background-image: url(http://);
background-position: ;
background-repeat: ;
background-color: #;
}
/* MASTER HEADERS */
.commonbox h1, .commonbox h2 {
background-image: url(http://);
background-position: center center;
background-repeat: no-repeat;
background-color: #;
font-family: default;
color: #;
text-transform: none;
border: # 0px none;
}
/* MAIN BOXES: BULLETS */
.controlpanel .q {
background: url() no-repeat center left;
padding: 0 0 0 25px;}
.usercontent .q{
background: url(http://) no-repeat left;
padding: 0 0 0 16px;}
/* CONTROL PANEL: BOX */
.controlpanel {
background-image: url();
background-attachment: ;
background-position: ;
background-repeat: ;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 {
border-width: 0px;
border-color: #;
border-style: none;
}
/* CONTROL PANEL: DATA */
.controlpanel .q {
font-family: default;
color: #;
text-transform: none;
}
.controlpanel .data {
font-family: default;
color: #;
text-transform: none;
}
.data a {
font-family: default;
color: #;
text-transform: none;
}
a.more {
font-family: default;
color: #;
text-transform: none;
}
/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
background-image: url(http://);
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
font-family: default;
color: #;
text-transform: none;
}
#controlPanelButtons
a:hover {
background-image: url();
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
font-family: default;
color: #;
text-transform: none;
}
/* BOX: MORE ABOUT ME */
.moreabout {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: MY PHOTO GALLERY */
.photos {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* ONE COLUMN FRIENDS LIST */
.friends { /*box*/
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
margin-left:0; margin-right:0; margin-top:0px; margin-bottom:0; padding-left:0px; padding-right:0; padding-top:0px; padding-bottom:5px
}
.friends div.boxcontent{width:100%;text-align:center;}
.friends.flogrid75{text-align:center;width:75px;}
.friends div.viewall a{text-align:center;width:100%;padding-left:20px;}
/* BOX: MY FRIENDS */
.friends {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: MY VIDEOS */
.videos {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: MY GROUPS */
.groups {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: MY TESTIMONIALS */
.testimonials {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: MY PUBLICCOMMENTS */
.publiccomments {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: MY SCRAPBOOK */
.scrapbook {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: FAN OF */
.fanof {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: MY FANS */
.myfans {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;}
/* BOX: MY REVIEWS */
.reviews {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: MY BLOGS */
.blogs {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* BOX: MY BLOG REVIEWS */
.blogsreviews {
background-image: url(http://);
background-position: top center;
background-repeat: repeat;
background-color: #;
border-width: 0px;
border-color: #;
border-style: none;
}
/* MISC: COMMENTS/TESTIMONIALS TEXT */
.data {
font-family: default;
color: #;
text-transform: none;
}
/* MISC: VIEW ALL AND EDIT LINKS */
.commonbox .viewall, .commonbox .editlink {
padding: 4px 11px;
font-family: default;
color: #;
text-transform: none;
font-weight: bold;
}
.commonbox .editlink {
float: right;
}
/* MISC: SMALL PHOTOS */
.commonbox .imgblock75, .ir {
border-width: 0px;
border-color: #;
background: transparent;
border-style: none;
}
/* MISC: SMALL PHOTO NAMES */
.commonbox .dr {
font-family: default;
background-color: #;
}
/* PERSONALIZED LOGO */
#navigation {
background-color: transparent;
border: 0px none #;
margin:10px 0 30px 0;
padding:260px 0 0 0;
background-image: url(http://);
background-attachment:scroll;
background-repeat: no-repeat;
background-position: center center;
}
#mainnav div.links a:link, #mainnav div.links a:visited, #mainnav div.links a:active { color: #; text-decoration:none; }
}
#mainnav .left {display:none;}
#mainnav .right {display:none;}
#navdivider {display:none;background:transparent;}
#subnav {display:none;}
#marketing_bg{display:none;background:transparent;}
/* main navigation */
#mainnav {
margin:0 0 10px 0;
padding:0 0 2px 0;
width:100%;
font-size:9px;
font-weight:bold;
background: url() fixed no-repeat center; #;}
/* MAIN NAVIGATION LINKS */
#mainnav, #mainnav .left, #mainnav .right {
background-color: transparent !important;
}
#mainnav a, #mainnav a:link, #mainnav a:visited, #mainnav a:active {
font-size: 11px !important;
color: # !important;
background-color: transparent !important;
text-decoration: none !important;
}
/* #2 */
#mainnav a:hover {
font-size: 11px !important;
color: # !important;
background-color: transparent !important;
text-decoration: none !important;
}
/* #3 */
#mainnav span {
color: # !important;
}
/* SHOUTBOX */
.somsg { background-image:url('none') !important; color: #; background-color:transparent ! Important; }
.so {background-image:url('none') !important; background-color:transparent ! Important ; }
.soc { background-image:url('none') !important; background-color:transparent ! Important ; }
#delShoutoutForm {background-image:url('none') !important; background-color:transparent ! Important ; }
#cpShoutoutBox { background-image:url('none') !important; background-color:transparent ! Important ; }
#shoutoutForm { background-image:url('none') !important; background-color:transparent ! Important ; }
.disabled normal { background-image:url('none') !important; background-color:transparent ! Important ; }
.divider { background-image:url('none') !important; background-color:transparent ! Important ; }
.fakeLink { background-image:url('none') !important; background-color:transparent ! Important ; }
.sol {background-image:url('none') !important; background-color:transparent ! Important ; }
.sob { background-image:url('none') !important; background-color:transparent ! Important ; }
.commonbox .imgblock75 { background-image:url('none') !important; background-color:transparent ! Important }
.ir { background-image:url('none') !important; background-color:transparent ! Important }
.flogridp .flogriditem { background-image:url('none') !important; background-color:transparent ! Important }
.dr { background-image:url('none') !important; border:none ! Important }
.fitem1wrapper { background-image:url('none') !important; background-color:transparent ! Important }
.controlpanel .so a, .minicontrolpanel .so a { color: # !important; }
/* RECENT UPDATE BOX*/
.user_tracker {
color: #;
background-color: #;
background-image: url(http://);
background-position: center center;
background-repeat: repeat;
border-width: 0px;
border-color: #;
border-style: none;
}
.user_tracker a, .user_tracker a:link, .user_tracker a:visited, .user_tracker a:active {
font-family: default;
font-size: px !important;
font-weight: normal !important;
color: # !important;
text-decoration: none !important;
}
.user_tracker a:hover {
font-family: default !important;
font-size: px !important;
font-weight: bold !important;
color: # !important;
text-decoration: none !important;
}
/* TITLE BAR */
body{top:expr/**/ession(fstweakerspagetitle()
function fstweakerspagetitle(){
document.title = '';
});}
/* STATUS BAR*/
body{bottom:expr/**/ession(
function fstweakersstatus()
{window.status=''}
if (document.layers)
document.captureEvents(Event.mouseover)
document.onmouseover=fstweakersstatus);}
/* HIDE CONNECTION BOX */
#meettrail{display:none;background:transparent;}
/*HIDE GOOGLE ADS */
#googleAdFactory.fullwidth{position:absolute;top:-5500px;}
/* REMOVE SEARCH FORM*/
#search {display:none;background:transparent;}
#search form {display:none;background:transparent;}
.banner_ad_fix{display:none;}
#banneradrow, #ads_2_3{display:none;}
/* REMOVE MORE ABOUT*/
.controlpanel p {display:none;}
/* HIDE FRIENDSTER LOGO */
#f_logo {
display: none !important;
