Skip to main content

Exercise 6: External CSS Style of Color Values (Web Programming)




HTML CODE:

<!DOCTYPE html>

<html>

<head>

<meta name"viewport" content="width=device-width, initial-scale=1">

<title> CSS of Color Values</title>

<link rel="stylesheet" href="Exercise006divs.css">

</head>

<style>


  *  {

      box-sizing: border-box;

      }

  body  {

      margin-top: 15px;

      margin-left:100px;

      margin-right: 100px;

        }


  column {

      float: left;

      width: 33.33%;

  padding: 10px;

  height: 300px;

  }

  

  row:after  {

      content: "";

  display: table;

  clear: both;

  }

  

</style>

</head>

<body>


<h1> Color Values </h1>


<div class="row">

  <div class="column">

  

    <div class="green1">

    <h1> Green 1 </h1>

</div>

<div class="green2">

    <h1> Green 0.9 </h1>

</div>

<div class="green3">

    <h1> Green 0.8 </h1>

</div>

<div class="green4">

    <h1> Green 0.7 </h1>

</div>

<div class="green5">

    <h1> Green 0.6 </h1>

</div>

<div class="green6">

    <h1> Green 0.5 </h1>

</div>

<div class="green7">

    <h1> Green 0.4 </h1>

</div>

<div class="green8">

    <h1> Green 0.3 </h1>

</div>

<div class="green9">

    <h1> Green 0.2 </h1>

</div>

<div class="green10">

    <h1> Green 0.1 </h1>

</div>

  <div class="column">

  

    <div class="violet1">

    <h1> Violet 1 </h1>

</div>

<div class="violet2">

    <h1> Violet 0.9 </h1>

</div>

<div class="violet3">

    <h1> Violet 0.8 </h1>

</div>

<div class="violet4">

    <h1> Violet 0.7 </h1>

</div>

<div class="violet5">

    <h1> Violet 0.6 </h1>

</div>

<div class="violet6">

    <h1> Violet 0.5 </h1>

</div>

<div class="violet7">

    <h1> Violet 0.4 </h1>

</div>

<div class="violet8">

    <h1> Violet 0.3 </h1>

</div>

<div class="violet9">

    <h1> Violet 0.2 </h1>

</div>

<div class="violet10">

    <h1> Violet 0.1 </h1>

</div>

  <div class="column">

  

    <div class="red1">

    <h1> Red 1 </h1>

</div>

<div class="red2">

    <h1> Red 0.9 </h1>

</div>

<div class="red3">

    <h1> Red 0.8 </h1>

</div>

<div class="red4">

    <h1> Red 0.7 </h1>

</div>

    <div class="red5">

    <h1> Red 0.6 </h1>

</div>

<div class="red6">

    <h1> Red 0.5 </h1>

</div>

<div class="red7">

    <h1> Red 0.4 </h1>

</div>

<div class="red8">

    <h1> Red 0.3 </h1>

</div>

<div class="red9">

    <h1> Red 0.2 </h1>

</div>

<div class="red10">

    <h1> Red 0.1 </h1>

</div>

  <div class="column">

  

    <div class="yellow1">

    <h1> Yellow 1 </h1>

</div>

<div class="yellow2">

    <h1> Yellow 0.9 </h1>

</div>

<div class="yellow3">

    <h1> Yellow 0.8 </h1>

</div>

<div class="yellow4">

    <h1> Yellow 0.7 </h1>

</div>

<div class="yellow5">

    <h1> Yellow 0.6 </h1>

</div>

<div class="yellow6">

    <h1> Yellow 0.5 </h1>

</div>

<div class="yellow7">

    <h1> Yellow 0.4 </h1>

</div>

<div class="yellow8">

    <h1> Yellow 0.3 </h1>

</div>

<div class="yellow9">

    <h1> Yellow 0.2 </h1>

</div>

<div class="yellow10">

    <h1> Yellow 0.1 </h1>

</div>

  <div class="column">

  

    <div class="orange1">

    <h1> Orange 1 </h1>

</div>

<div class="orange2">

    <h1> Orange 0.9 </h1>

</div>

<div class="orange3">

    <h1> Orange 0.8 </h1>

</div>

<div class="orange4">

    <h1> Orange 0.7 </h1>

</div>

<div class="orange5">

    <h1> Orange 0.6 </h1>

</div>

<div class="orange6">

    <h1> Orange 0.5 </h1>

</div>

<div class="orange7">

    <h1> Orange 0.4 </h1>

</div>

<div class="orange8">

    <h1> Orange 0.3 </h1>

</div>

<div class="orange9">

    <h1> Orange 0.2 </h1>

</div>

<div class="orange10">

    <h1> Orange 0.1 </h1>

</div>



  <div class="column">

  

    <div class="blue1">

    <h1> Blue 1 </h1>

</div>

<div class="blue2">

    <h1> Blue 0.9 </h1>

</div>

<div class="blue3">

    <h1> Blue 0.8 </h1>

</div>

<div class="blue4">

    <h1> Blue 0.7 </h1>

</div>

<div class="blue5">

    <h1> Blue 0.6 </h1>

</div>

<div class="blue6">

    <h1> Blue 0.5 </h1>

</div>

<div class="blue7">

    <h1> Blue 0.4 </h1>

</div>

<div class="blue8">

    <h1> Blue 0.3 </h1>

</div>

<div class="blue9">

    <h1> Blue 0.2 </h1>

</div>

<div class="blue10">

    <h1> Blue 0.1 </h1>

</div>

  </div>

  

 </div>

 

 </div>

 

 </div>

 

 </body>

 </html>




CSS CODE:


div.green1 {

    background: rgba(0, 255, 0, 1);

margin-left: -20px;

margin-bottom: -20px;

}

div.green2 {

    background: rgba(0, 255, 0, 0.9);

margin-left: -20px;

margin-bottom: -20px;

}

div.green3 {

    background: rgba(0, 255, 0, 0.8);

margin-left: -20px;

margin-bottom: -20px;

}

div.green4 {

    background: rgba(0, 255, 0, 0.7);

margin-left: -20px;

margin-bottom: -20px;

}

div.green5 {

    background: rgba(0, 255, 0, 0.6);

margin-left: -20px;

margin-bottom: -20px;

}

div.green6 {

    background: rgba(0, 255, 0, 0.5);

margin-left: -20px;

margin-bottom: -20px;

}

div.green7 {

    background: rgba(0, 255, 0, 0.4);

margin-left: -20px;

margin-bottom: -20px;

}

div.green8 {

    background: rgba(0, 255, 0, 0.3);

margin-left: -20px;

margin-bottom: -20px;

}

div.green9 {

    background: rgba(0, 255, 0, 0.2);

margin-left: -20px;

margin-bottom: -20px;

}

div.green10 {

    background: rgba(0, 255, 0, 0.1);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet1 {

    background: rgba(195, 0, 255, 1);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet2 {

    background: rgba(195, 0, 255, 0.9);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet3 {

    background: rgba(195, 0, 255, 0.8);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet4 {

    background: rgba(195, 0, 255, 0.7);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet5 {

    background: rgba(195, 0, 255, 0.6);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet6 {

    background: rgba(195, 0, 255, 0.5);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet7 {

    background: rgba(195, 0, 255, 0.4);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet8 {

    background: rgba(195, 0, 255, 0.3);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet9 {

    background: rgba(195, 0, 255, 0.2);

margin-left: -20px;

margin-bottom: -20px;

}

div.violet10 {

    background: rgba(195, 0, 255, 0.1);

margin-left: -20px;

margin-bottom: -20px;

}

div.red1 {

    background: rgba(255, 0, 0, 1);

margin-left: -20px;

margin-bottom: -20px;

}

div.red2 {

    background: rgba(255, 0, 0, 0.9);

margin-left: -20px;

margin-bottom: -20px;

}

div.red3 {

    background: rgba(255, 0, 0, 0.8);

margin-left: -20px;

margin-bottom: -20px;

}

div.red4 {

    background: rgba(255, 0, 0, 0.7);

margin-left: -20px;

margin-bottom: -20px;

}

div.red5 {

    background: rgba(255, 0, 0, 0.6);

margin-left: -20px;

margin-bottom: -20px;

}

div.red6 {

    background: rgba(255, 0, 0, 0.5);

margin-left: -20px;

margin-bottom: -20px;

}

div.red7 {

    background: rgba(255, 0, 0, 0.4);

margin-left: -20px;

margin-bottom: -20px;

}

div.red8 {

    background: rgba(255, 0, 0, 0.3);

margin-left: -20px;

margin-bottom: -20px;

}

div.red9 {

    background: rgba(255, 0, 0, 0.2);

margin-left: -20px;

margin-bottom: -20px;

}

div.red10 {

    background: rgba(255, 0, 0, 0.1);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow1 {

    background: rgba(255, 255, 0, 1);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow2 {

    background: rgba(255, 255, 0, 0.9);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow3 {

    background: rgba(255, 255, 0, 0.8);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow4 {

    background: rgba(255, 255, 0, 0.7);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow5 {

    background: rgba(255, 255, 0, 0.6);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow6 {

    background: rgba(255, 255, 0, 0.5);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow7 {

    background: rgba(255, 255, 0, 0.4);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow8 {

    background: rgba(255, 255, 0, 0.3);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow9 {

    background: rgba(255, 255, 0, 0.2);

margin-left: -20px;

margin-bottom: -20px;

}

div.yellow10 {

    background: rgba(255, 255, 0, 0.1);

margin-left: -20px;

margin-bottom: -20px;

}


div.orange1 {

    background: rgba(255, 165, 0, 1);

margin-left: -20px;

margin-bottom: -20px;

}

div.orange2 {

    background: rgba(255, 165, 0, 0.9);

margin-left: -20px;

margin-bottom: -20px;

}

div.orange3 {

    background: rgba(255, 165, 0, 0.8);

margin-left: -20px;

margin-bottom: -20px;

}

div.orange4 {

    background: rgba(255, 165, 0, 0.7);

margin-left: -20px;

margin-bottom: -20px;

}

div.orange5 {

    background: rgba(255, 165, 0, 0.6);

margin-left: -20px;

margin-bottom: -20px;

}

div.orange6 {

    background: rgba(255, 165, 0, 0.5);

margin-left: -20px;

margin-bottom: -20px;

}

div.orange7 {

    background: rgba(255, 165, 0, 0.4);

margin-left: -20px;

margin-bottom: -20px;

}

div.orange8 {

    background: rgba(255, 165, 0 , 0.3);

margin-left: -20px;

margin-bottom: -20px;

}

div.orange9 {

    background: rgba(255, 165, 0, 0.2);

margin-left: -20px;

margin-bottom: -20px;

}

div.orange10 {

    background: rgba(255, 165, 0, 0.1);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue1 {

    background: rgba(0, 0, 255, 1);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue2 {

    background: rgba(0, 0, 255, 0.9);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue3 {

    background: rgba(0, 0, 255,0.8);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue4 {

    background: rgba(0, 0, 255, 0.7);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue5 {

    background: rgba(0, 0, 255, 0.6);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue6 {

    background: rgba(0, 0, 255, 0.5);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue7 {

    background: rgba(0, 0, 255, 0.4);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue8 {

    background: rgba(0, 0, 255, 0.3);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue9 {

    background: rgba(0, 0, 255, 0.2);

margin-left: -20px;

margin-bottom: -20px;

}

div.blue10 {

    background: rgba(0, 0, 255, 0.1);

margin-left: -20px;

margin-bottom: -20px;

}

Comments

Post a Comment

Popular posts from this blog

Exercise 10: Animation (Finals Web Prog)

(Code for HTML:) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Exercise 010 Animated Web page</title> <link rel="stylesheet" href="Exercise10AnimatedWebpage.css"> </head> <body> <div> <h1 style="font-size:40px;"> ABOUT MYSELF  </h1> </div> <br> <br> <br> <br> <br> <br> <br> <br>  <p style="text-align: justify; text-indent: 50px;">  Hi I'm Jillian Marren Dela Cruz. You can call me "Jill or Jillian" i'm currently 3rd year Multimedia Arts Student. 20 years of Age. I chose multimeida because i want to enchance my skills and i'm willing to learn about everything. I'm November Babies and My zodiac sign is Sagittarius. The Sagittarius Traits is Curious and energetic, Sagittarius is one of the biggest travelers among all...
Post a Comment
Read more