setting

Web Designing Plateform: EXAMPLE FOR CSS

EXAMPLE FOR CSS



Total Conversion with CSS
Every example that you will see inside our CSS Examples is made up of the same HTML. All formatting, color changes, and mouseovers are done with some changes to the CSS code. On every page we urge you to examine the CSS code to see how we did it. View the CSS Code for

Why Use CSS?

  • CSS allows you to expirement with many unique looks much quicker than with HTML.
  • It seperates web site code into two logical groups: Content and Design
  • Web sites can consist of many pages that are cumbersome to manage. With a few changes to a single CSS file that each page references, the entire site can be changed in a fraction of the time it took in the past.

Stick With It

It may seem a little confusing at the beginning, but keep at it. Mastering the intricacies of CSS will take your web designing ability to a new level.

Sharing is Caring

Feel free to take any and all of the CSS code from these examples and use them in your own endeavors. If you don't have enough time to learn CSS design and just want to have a template, take any of these examples. And to those designers out there, if you make an impressive layout, let me know about it and I might add it to these examples
VIEW THE HTML CODE : 
<html>
<head>
<title>MYSITE CSS Examples</title>
</head>
<body>
 
<div id="menuPane"> 
        <div class="menu">
               <h4>Site Info</h4>
               <a href="http://www.MYSITE.com">Home</a><a href="http://www.MYSITE.com/about/contact.php">Contact Us</a>
        </div>
        <div class="menu">
               <h4>Beginner Tutorials</h4>
               <a href="http://www.MYSITE.com/beginnerT/" >First Website Guide</a><a href="http://www.MYSITE.com/htmlT/" >HTML Tutorial</a><a href="http://www.MYSITE.com/cssT/" >CSS Tutorial</a><a href="http://www.MYSITE.com/webhost/" >Web Host Guide</a>
        </div> 
        <div class="menu">
               <h4>Advanced Tutorials</h4>
               <a href="http://www.MYSITE.com/javascriptT/" >Javascript Tutorial</a><a href="http://www.MYSITE.com/phpT/" >PHP Tutorial</a><a href="http://www.MYSITE.com/mysqlTutorial/" >MySQL Tutorial</a>
        </div>
        <div class="menu">
               <h4>CSS Examples</h4>
               <a href="http://www.MYSITE.com/cssT/liveExampleCss/">Soothing Stuff</a><a href="http://www.MYSITE.com/cssT/liveExampleCss/style2.php">Soothing Reverse</a><a href="http://www.MYSITE.com/cssT/liveExampleCss/style3.php">Vertical Limit</a><a href="http://www.MYSITE.com/cssT/liveExampleCss/style4.php">Pancake Time</a>
        </div>
</div>
 
<div id="content">
        <h3>Total Conversion with CSS</h3>
        
        <p>Every example that you will see inside our CSS Examples is made up of the same HTML.  All formatting, color changes, and
        mouseovers are done with some changes to the CSS code.  On every page we urge you to examine the CSS code
        to see how we did it.  View the CSS Code for: <a href="style1Css.php" target="_blank">Soothing stuff</a>,  
        <a href="style2Css.php" target="_blank">Soothing Reverse</a>, <a href="style3Css.php" target="_blank">Verticle Limit</a> or,
         <a href="style4Css.php" target="_blank">Pancake Time</a>.
        </p>
        
        
        <h3>Why Use CSS?</h3>
        <ul>
               <li>  CSS allows you to expirement with many unique looks much quicker than with HTML.</li>
               <li>  It seperates web site code into two logical groups: Content and Design</li>
               <li>  Web sites can consist of many pages that are cumbersome to manage.  With a few changes to
                               a single CSS file that each page references, the entire site can be changed in a fraction
                               of the time it took in the past.</li>
        </ul>
        
        <h3>Stick With It</h3>
        <p>It may seem a little confusing at the beginning, but keep at it.  Mastering the intricacies of CSS will take
        your web designing ability to a new level.  
        </p>
        
        <h3>Sharing is Caring</h3>
        <p>Feel free to take any and all of the CSS code from these examples and use them in your own endeavors.  If you don't have enough time
        to learn CSS design and just want to have a template, take any of these examples.  And to those designers out there,
        if you make an impressive layout, let me know about it and I might add it to these examples.<br /> <br />
        <a href="liveExampleCode.inc" target="_blank">View the HTML Code </a>
        </p>
</div>
</body>
</html>

SOOTHING STUFF ...
body{
        background-color: #A3F4A3;
}

div#menuPane{
        position: absolute;
        left: 25px;
        top: 25px;
        width: 25%;
}

div.menu {
        display: block;
        font-size: 14px;
        margin: 0;
        padding: 0;
        border: 2px solid #7FC07F;
}

div.menu a {
        display: block;
        font-weight: bold;
        text-decoration: none;
        text-align: right;
        letter-spacing: 1px;
        margin: 0px;
        color: black;
        border-top: 1px solid #487048;
}

div.menu a:link{
        background: #68D768;
}

div.menu a:visited{
        background: #68D768;
}
div.menu a:hover{
        background: #3FC73F;
        letter-spacing: 2px;
}

div.menu h4{
        padding: 2px;
        margin: 0px;
}

div#content{
        position: absolute;
        left: 30%;
        top: 25px;
        width: auto;
        border: 2px double #7FC07F;
        background-color: #76D176;
        padding: 2px;
        margin-right: 5px;
}

div#content h3{
        background-color: #A3F4A3;
        text-align: right;
        letter-spacing: -1px;
        color: #386938;
        padding: 2px;
        border-bottom: 1px solid black;
}

div#content a:link, a:visited{
        background: #68D768;
        color: #A3F4A3;
        letter-spacing: 1px;
}

div#content a:hover{
        background: #3FC73F;
        color: #A3F4A3;
        letter-spacing: 1px;
}      


SOOTHING REVERSE ...
body{
        background-color: #A3F4A3;
}
 
div#menuPane{
        position: absolute;
        left: 75%;
        top: 25px;
        width: 23%;
}
 
div.menu {
        display: black;
        font-size: 14px;
        margin: 0;
        padding: 0;
        border: 2px solid #7FC07F;
}
 
div.menu a {
        display: block;
        font-weight: bold;
        text-decoration: none;
        text-align: left;
        letter-spacing: 1px;
        margin: 0px;
        color: black;
        border-top: 1px solid #487048;
}
 
div.menu a:link{
        background: #68D768;
}
 
div.menu a:visited{
        background: #68D768;
}
 
div.menu a:hover{
        background: #3FC73F;
        letter-spacing: 2px;
}
 
div#menu h4{ 
        text-align: right;
        padding: 2px;
        margin: 0px;
}
div#content{
        position: absolute;
        left: 25px;
        top: 25px;
        width: 70%;
        border: 2px double #7FC07F;
        background-color: #76D176;
        padding: 2px;
}
 
div#content h3{
        background-color: #A3F4A3;
        text-align: left;
        display: block;
        letter-spacing: -1px;
        color: #386938;
        padding: 2px;
}
 
div#content a:link, a:visited{
        background: #68D768;
        color: #A3F4A3;
        letter-spacing: 1px;
}
 
div#content a:hover{
        background: #3FC73F;
        color: #A3F4A3;
        letter-spacing: 1px;
}






VIRTICLE LIMIT....
body{
        background-color: #FBC87F;
}
 
div#menuPane{
        position: absolute;
        left: 15%;
        top: 10px;
        width: 65%;
}
 
div.menu {
        display: inline;
        float: left;
        margin-left: 30px;
        padding: 0;
        border: 2px solid #A1855D;
}
 
div.menu a {
        display: block;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
        text-align: left;
        letter-spacing: 1px;
        margin: 0px;
        color: black;
        border-top: 1px solid #FF0000;
}
div.menu a:link, a:visited{
        background: #FF9600;
}
 
div.menu a:visited{
        background: #FF9600;
}
div.menu a:hover{
        background: #FF7800;
        letter-spacing: 1px;
}
 
div#menu h4{ 
        text-align: right;
        padding: 2px;
        margin: 0px;
}
div#content{
        position: absolute;
        left: 10%;
        top: 150px;
        width: 80%;
        border: 2px double #A1855D;
        background-color: #D1953F;
        padding: 2px;
}
 
div#content h3{
        background-color: #FBC87F;
        text-align: left;
        display: block;
        letter-spacing: -1px;
        color: #854E00;
        padding: 2px;
}
 
div#content a:link{
        background: #FF9600;
        color: #FBC87F;
        letter-spacing: 1px;
}
 
div#content a:visited{
        background: #FF9600;
        color: #FBC87F;
        letter-spacing: 1px;
}
 
div#content a:hover{
        background: #FF7800;
        color: #FBC87F;
        letter-spacing: 1px;
}

PANCAKE TIME.....
body{
        background-color: #7FCAFF;
}
 
div#menuPane{
        position: absolute;
        top: 10px;
        left: 2%;
        width: 98%;
}
 
div.menu {
        display: inline;
        float: left;
        margin-left: 1%;
        padding: 0;
        border: 2px solid #003961;
}
 
div.menu a {
        display: inline;
        font-size: 11px;
        text-decoration: none;
        text-align: left;
        padding: 2px 5px;
        color: black;
        border-top: 1px solid black;
}
 
div.menu a:link{
        background: #31AAFF;
}
 
div.menu a:visited{
        background: #31AAFF;
}
div.menu a:hover{
        background: #0078CC;
}
 
div.menu h4{ 
        text-align: right;
        padding: 2px;
        margin: 0px;
}
div#content{
        position: absolute;
        left: 10%;
        top: 135px;
        width: 80%;
        border: 2px double #003961;
        background-color: #66A5D1;
        padding: 2px;
}
 
div#content h3{
        background-color: #7FCAFF;
        text-align: left;
        display: block;
        letter-spacing: -1px;
        color: #003961;
        padding: 2px;
}
 
div#content a:link{
        background: #31AAFF;
        color: black;
        letter-spacing: 1px;
}
 
div#content a:visited{
        background: #31AAFF;
        color: black;
        letter-spacing: 1px;
}
 
div#content a:hover{
        background: #0078CC;
        color: black;
        letter-spacing: 1px;
}



Labels: Posted by at
< >

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Copyright © Web Designing Plateform Urang-kurai