VirtualMV/CSS/Example

From WikiEducator
< VirtualMV‎ | CSS
Jump to: navigation, search



Introduction

This page contains examples of two very different style sheets that can be attached to a web site.

VmvIcon Objectives.png

Using styles in a web page

By the end of this page you will be able to:

  • Describe how diffrernt CSS pages interact with an HTML web page

Sample css file linked to an html page

This is an example called neon.css (from Microsoft's Frontpage/Expression Web)

 a:link    { color: rgb(204,255,0); }
 a:visited { color: rgb(102,204,0); } 
 a:active  { color: rgb(255,255,0);}
 body   {font-family: Verdana, Arial, Helvetica;
         background-color: rgb(0,0,0);
         color: rgb(102,255,51);
        }
 table  {table-border-color-light: rgb(255,255,153);
         table-border-color-dark: rgb(255,255,51); 
        }
 h1, h2, h3, h4, h5, h6
        { font-family: Verdana, Arial, Helvetica;
        }
 h1     {color: rgb(204,255,0);}
 h2     {color: rgb(153,504,255);}
 h3     {color: rgb(255,51,153);}
 h4     {color: rgb(255,51,153);}
 h5     {color: rgb(153,504,255);}
 h6     {color: rgb(204,255,0);}

To include this in an html file

<html>
<head>
<title>HTML/CSS example</title>
 <link rel="stylesheet" type="text/css" href="neon.css" />
</head>
<body>
<h1>Heading one</h1>
<p>If you are creating this html file<br />
try to create a page that tests out all of the styles in neon.css</p>
</body>
</html>

and an alternative sweets.css. As an exercise create this and change the href in the previous html example to see the change

a:link    { color:#0033CC; }
a:visited { color:#339966; } 
a:active  { color:#FF9900; }
body      { font-family: Arial, Helvetica; background-color: rgb(255,255,204);
            color:#663399; }
h1, h2, h3, h4, h5, h6
          { font-family: Arial Rounded MT Bold, Arial, Helvetica; }
h1        { color:#663399; }
h2        { color:#FF6699; }
h3        { color:#339966; }
h4        { color:#663399; }
h5        { color:#FF6699; }
h6        { color:#339966; }

Notice I have changed the RGB decimal colours to hexidecimal

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/CSS/Example. (2018). In WikiEducator/VirtualMV wiki. Retrieved November 16, 2018, from http://wikieducator.org/VirtualMV/CSS/Example    (zotero)