» » Css Example

EXAMPLE FOR THE 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;
}




00:14

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 

  • Symbolic Constants

    What Is The Variables and Arithmetic Expressions The next program uses the formula oC=(5/9)(oF-32) to print the following table

  • Navigation For Blogger New Script

    Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friend

  • How To Creat Facebook Fantasty Box

    Fantasty Look Custom Facebook Like Box To Blogger Facebook Like Box is very useful widget to show visitors the authority and love of t

  • Basic Knowladge Of Computer

    Computer is an electronic device that accepts the data from any Input Device process them according to instruction and gives the Output.Computer is an electronic device that..

  • Earn Money To Easy Way

    HI MEMBER, FIRST OF ALL HEARTY WELCOME TO OUR COMPANY.FIRST TIME IN THE WORLD WE ARE INTRODUCING A STEP BY STEP TRAINING PROCESS TO MAKE MONEYMAKE MONEY ONLINE

Top
Blogger Template - See more at: http://www.arya2014.blogspot.in
ONLINE EDUCATION Basic Computer Application EARN MONEY TO EASY WAY Make Money Online "C" PROGRAMING Introducing "C" Language