Skip to main content

Example CSS file

Example CSS file

Add the following in the Head section of your web page
<link href="default.css" rel="stylesheet" type="text/css" />do necessary modification
save the code below in a file name default.css and see the result

*{
 margin: 0;
 padding: 0;
}
body {
 margin: 20px 0;
 background: #FFFFFF;
 font: normal 13px Arial, Helvetica, sans-serif;
 color: #666666;
}
a {
 color: #29A3E1;
}
a:hover {
 text-decoration: none;
 color: #E16629;
}
/* Boxed */
.title {
 background: url(images/img4.gif) no-repeat right center;
 border-bottom: 3px solid #CFCFCF;
}
.boxed1 .title {
 font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.boxed1 .content {
 background: url(images/img05.gif) no-repeat left bottom;
 padding: 20px;
}
.boxed2 .title {
 font: normal 182% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.boxed2 .content {
 background: url(images/img06.gif) repeat-x left bottom;
 padding: 20px;
}
.boxed3 .title {
 font: normal 129% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.boxed3 .content {
 padding: 20px;
}
.boxed3 ol, .boxed3 ul {
 margin-left: 1em;
}

/* Header */
#header {
 width: 760px;
 height: 161px;
 margin: 0 auto;
 background: url(images/img02.jpg) no-repeat 100% 50px;
 border-bottom: 5px solid #E16629;
}
/* Logo */
#logo {
 float: left;
 width: 240px;
 height: 160px;
 background: #29A4E1 url(images/img01.gif) no-repeat;
 text-align: center;
}
#logo h1 {
 padding-top: 80px;
 font: bold 36px Georgia, "Times New Roman", Times, serif;
}
#logo h2 {
 font: bold 11px Verdana, Arial, Helvetica, sans-serif;
}
#logo a {
 text-decoration: none;
 color: #FFFFFF;
}
/* Menu */
#menu {
 float: left;
 width: 520px;
 height: 50px;
 background: #F4F4F4;
}
#menu ul {
 height: 5px;
 background: #29A4E1;
 list-style: none;
}
#menu li {
 display: inline;
}
#menu a {
 display: block;
 float: left;
 height: 30px;
 padding: 15px 15px 0 15px;
 border-top: 5px solid #29A4E1;
 text-decoration: none;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #000000;
}
#menu a:hover {
 background: #DCDCDC;
 border-top-color: #1A7196;
}
#menu .active a {
 background: #FFA800;
 border-top-color: #E16629;
}
#menu a b {
 text-decoration: underline;
}
/* Page */
#page {
 width: 760px;
 margin: 0 auto;
 background: url(images/img03.gif) repeat-y;
 border-top: 1px solid #FFFFFF;
 border-bottom: 1px solid #FFFFFF;
}
/* Content */
#content {
 float: right;
 width: 480px;
 padding: 20px;
 border-bottom: 1px solid #FFFFFF;
}
#content p, #content ol, #content ul {
 line-height: 152%;
}
/* Sidebar */
#sidebar {
 float: left;
 width: 200px;
 padding: 20px;
}
/* News */
#news {
 padding-top: 10px;
 padding-bottom: 0;
}
#news ul {
 list-style-type: square;
}
#news li {
 margin-bottom: 15px;
}
#news h3 {
 margin-bottom: 10px;
 font-size: 92%;
}
#news h3 a {
 display: block;
}
#news p {
 font-size: 85%;
}
/* Welcome */
#welcome {
 margin-bottom: 20px;
}
/* Samples */
#sample1, #sample2 {
 float: left;
 width: 230px;
}
#sample1 {
}
#sample2 {
 margin-left: 20px;
}
/* Footer */
#footer {
 width: 760px;
 margin: 0 auto;
 padding: 20px 0;
 border-top: 5px solid #E16629;
}
#footer p {
 text-align: center;
 font-size: 77%;
}

Comments

Post a Comment

Popular posts from this blog

Web Designer

If you want to be a web designer. Skills Should have worked on and have a good understanding of the following packages and areas: HTML Javascript / VBscript JSP ASP Photoshop Flash Dream Weaver Frontpage Should have aesthetic picture and designing abilities (including usage of color combinations, CSS files, etc). Should have the ability to understand client requirements; and translate into appropriate web interface. Should be comfortable in working with Windows/ Java environment Work Experience At least 2 to 3 years of good web designing experience Web pages should be bug free and clean/ simple and light Should have managed/ maintained websites that are currently hosted and running Key Responsibilities Testing and implementation Analysis and design of solutions at both onsite and client sites to integrate the company's product Interaction with clients to implement solutions Interaction with third party solution providers for project i...
Post a Comment
Read more

CSS Properties

margin : length or percentage or auto;   margin-top a:link list-style margin-left a:visited list-style-image margin-right a:hover list-style-image-position margin-bottom a:focus list-style-image-type padding-top : length or percentage Css Anchor, Link height padding-left a.column1:link line-height padding-right Css Border max-height padding-bottom border min-height color : red or #2398 or rgb(,,) border-style max-width letter-spacing : normal or length border-width min-width text-align: left or center or right or justify border-bottom Css Classification text-decoration: underline or overline or line through or blink border-bottom-color clear text-indent : length or percentage border-bottom-style cursor text-transform: none or capitalize or lowercase border-bottom-width display white-space: normal or pre or nowrap bord...
Post a Comment
Read more

Try CSS

open notepad type the following and save the file with name testcss.html on desktop and then open this file in internet explorer : <html> <head> <title>css tutoriaL</title> <style type="text/css">  body {  background: #006699;  font-family: "Trebuchet MS", Verdana, Arial, serif;  } </style> </head> <body> <p style ="font-size:20px"> This text is written in <br>color code #006699 font size 20 </p> </body> </html> output :
Post a Comment
Read more