EXERCISE 6: EXTERNAL CCS FILES OF COLOR VALUES

-

 EXERCISE 6:
EXTERNAL CCS FILES OF COLOR VALUES 

 the preview: 







they basically follow the same format



THE CODE FOR HTML:

<!DOCTYPE html>

<html>

<head>

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

<title>CSS of Color Values</title>

<link rel="stylesheet" href="EXERCISE 6 COLOR.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="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="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="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>

  



  <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="lblue1">

<h1> Light Blue 1 </h1>

</div>


<div class="lblue2">

<h1> Light Blue 0.9 </h1>

</div>


<div class="lblue3">

<h1> Light Blue 0.8 </h1>

</div>


<div class="lblue4">

<h1> Light Blue 0.7 </h1>

</div>


<div class="lblue5">

<h1> Light Blue 0.6 </h1>

</div>


<div class="lblue6">

<h1> Light Blue 0.5 </h1>

</div>


<div class="lblue7">

<h1> Light Blue 0.4 </h1>

</div>


<div class="lblue8">

<h1> Light Blue 0.3 </h1>

</div>


<div class="lblue9">

<h1> Light Blue 0.2 </h1>

</div>


<div class="lblue10">

<h1> Light Blue 0.1 </h1>

</div>

<div class="pink1">

<h1> Pink 1 </h1>

</div>


<div class="pink2">

<h1> Pink 0.9 </h1>

</div>


<div class="pink3">

<h1> Pink 0.8 </h1>

</div>


<div class="pink4">

<h1> Pink 0.7 </h1>

</div>


<div class="pink5">

<h1> Pink 0.6 </h1>

</div>


<div class="pink6">

<h1> Pink 0.5 </h1>

</div>


<div class="pink7">

<h1> Pink 0.4 </h1>

</div>


<div class="pink8">

<h1> Pink 0.3 </h1>

</div>


<div class="pink9">

<h1> Pink 0.2 </h1>

</div>


<div class="pink10">

<h1> Pink 0.1 </h1>

</div>

<div class="white1">

<h1> White 1 </h1>

</div>


<div class="white2">

<h1> White 0.1 </h1>

</div>


<div class="white3">

<h1> White 0.3 </h1>

</div>


<div class="white4">

<h1> Grey 0.5 </h1>

</div>


<div class="white5">

<h1> Grey 0.7 </h1>

</div>


<div class="white6">

<h1> Grey 0.9 </h1>

</div>


<div class="white7">

<h1> Grey 1 </h1>

</div>


<div class="white8">

<h1> Black 0.7 </h1>

</div>


<div class="white9">

<h1 style="color: #ffffff;"> Black 0.9 </h1>

</div>


<div class="white10">

<h1 style="color: #ffffff;"> Black 1 </h1>

</div>

  </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="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 class="brown1">

<h1> Brown 1 </h1>

</div>


<div class="brown2">

<h1> Brown 0.9 </h1>

</div>


<div class="brown3">

<h1> Brown 0.8 </h1>

</div>


<div class="brown4">

<h1> Brown 0.7 </h1>

</div>


<div class="brown5">

<h1> Brown 0.6 </h1>

</div>


<div class="brown6">

<h1> Brown 0.5 </h1>

</div>


<div class="brown7">

<h1> Brown 0.4 </h1>

</div>


<div class="brown8">

<h1> Brown 0.3 </h1>

</div>

<div class="brown9">

<h1> Brown 0.2 </h1>

</div>

<div class="brown10">

<h1> Brown 0.1 </h1>

</div>

  </div>


</div>

  

</div>

  

</div>


</body>

</html>

CODING FOR CSS


div.red1 {
background: rgba(252, 3, 3, 1);
margin-left: -20px;
margin-bottom: -20px;
}

div.red2 {
background: rgba(252, 3, 3, 0.9);
margin-left: -20px;
margin-bottom: -20px;
}
div.red3 {
background: rgba(252, 3, 3, 0.8);
margin-left: -20px;
margin-bottom: -20px;
}
div.red4 {
background: rgba(252, 3, 3, 0.7);
margin-left: -20px;
margin-bottom: -20px;
}

div.red5 {
background: rgba(252, 3, 3, 0.6);
margin-left: -20px;
margin-bottom: -20px;
}
div.red6 {
background: rgba(252, 3, 3, 0.5);
margin-left: -20px;
margin-bottom: -20px;
}
div.red7 {
background: rgba(252, 3, 3, 0.4);
margin-left: -20px;
margin-bottom: -20px;
}
div.red8 {
background: rgba(252, 3, 3, 0.3);
margin-left: -20px;
margin-bottom: -20px;
}
div.red9 {
background: rgba(252, 3, 3, 0.2);
margin-left: -20px;
margin-bottom: -20px;
}
div.red10 {
background: rgba(252, 3, 3, 0.1);
margin-left: -20px;
margin-bottom: -20px;
}



div.orange1 {
background: rgba(252, 102, 3, 1);
margin-left: -18px;
margin-bottom: -20px;
}

div.orange2 {
background: rgba(252, 102, 3, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.orange3 {
background: rgba(252, 102, 3, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.orange4 {
background: rgba(252, 102, 3, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}

div.orange5 {
background: rgba(252, 102, 3, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.orange6 {
background: rgba(252, 102, 3, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.orange7 {
background: rgba(252, 102, 3, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.orange8 {
background: rgba(252, 102, 3, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.orange9 {
background: rgba(252, 102, 3, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.orange10 {
background: rgba(252, 102, 3, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}



div.yellow1 {
background: rgba(252, 227, 3, 1);
margin-left: -18px;
margin-bottom: -20px;
}

div.yellow2 {
background: rgba(252, 227, 3, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow3 {
background: rgba(252, 227, 3, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow4 {
background: rgba(252, 227, 3, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}

div.yellow5 {
background: rgba(252, 227, 3, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow6 {
background: rgba(252, 227, 3, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow7 {
background: rgba(252, 227, 3, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow8 {
background: rgba(252, 227, 3, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow9 {
background: rgba(252, 227, 3, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow10 {
background: rgba(252, 227, 3, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}

div.green1 {
background: rgba(26, 227, 0, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}

div.green2 {
background: rgba(26, 227, 0, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.green3 {
background: rgba(26, 227, 0, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.green4 {
background: rgba(26, 227, 0, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}

div.green5 {
background: rgba(26, 227, 0, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.green6 {
background: rgba(26, 227, 0, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.green7 {
background: rgba(26, 227, 0, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.green8 {
background: rgba(26, 227, 0, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.green9 {
background: rgba(26, 227, 0, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.green10 {
background: rgba(26, 227, 0, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.lblue1 {
background: rgba(0, 217, 255, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}

div.lblue2 {
background: rgba(0, 217, 255, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.lblue3 {
background: rgba(0, 217, 255, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.lblue4 {
background: rgba(0, 217, 255, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}

div.lblue5 {
background: rgba(0, 217, 255, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.lblue6 {
background: rgba(0, 217, 255, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.lblue7 {
background: rgba(0, 217, 255, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.lblue8 {
background: rgba(0, 217, 255, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.lblue9 {
background: rgba(0, 217, 255, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.lblue10 {
background: rgba(0, 217, 255, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue1 {
background: rgba(31, 15, 255, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}

div.blue2 {
background: rgba(31, 15, 255, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue3 {
background: rgba(31, 15, 255, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue4 {
background: rgba(31, 15, 255, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}

div.blue5 {
background: rgba(31, 15, 255, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue6 {
background: rgba(31, 15, 255, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue7 {
background: rgba(31, 15, 255, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue8 {
background: rgba(31, 15, 255, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue9 {
background: rgba(31, 15, 255, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue10 {
background: rgba(31, 15, 255, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet1 {
background: rgba(195, 0, 255, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}

div.violet2 {
background: rgba(195, 0, 255, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet3 {
background: rgba(195, 0, 255, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet4 {
background: rgba(195, 0, 255, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}

div.violet5 {
background: rgba(195, 0, 255, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet6 {
background: rgba(195, 0, 255, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet7 {
background: rgba(195, 0, 255, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet8 {
background: rgba(195, 0, 255, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet9 {
background: rgba(195, 0, 255, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet10 {
background: rgba(195, 0, 255, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}

div.pink1 {
background: rgba(255, 0, 111, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}

div.pink2 {
background: rgba(255, 0, 111, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink3 {
background: rgba(255, 0, 111, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink4 {
background: rgba(255, 0, 111, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}

div.pink5 {
background: rgba(255, 0, 111, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink6 {
background: rgba(255, 0, 111, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink7 {
background: rgba(255, 0, 111, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink8 {
background: rgba(255, 0, 111, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink9 {
background: rgba(255, 0, 111, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink10 {
background: rgba(255, 0, 111, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}

div.brown1 {
background: rgba(74, 27, 0, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}

div.brown2 {
background: rgba(74, 27, 0, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.brown3 {
background: rgba(74, 27, 0, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.brown4 {
background: rgba(74, 27, 0, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}

div.brown5 {
background: rgba(74, 27, 0, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.brown6 {
background: rgba(74, 27, 0, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.brown7 {
background: rgba(74, 27, 0, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.brown8 {
background: rgba(74, 27, 0, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.brown9 {
background: rgba(74, 27, 0, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.brown10 {
background: rgba(74, 27, 0, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}


div.white1 {
background: rgba(255, 255, 255, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}

div.white2 {
background: rgba(128, 128, 128, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.white3 {
background: rgba(128, 128, 128, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.white4 {
background: rgba(128, 128, 128, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}

div.white5 {
background: rgba(128, 128, 128, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.white6 {
background: rgba(128, 128, 128, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.white7 {
background: rgba(128, 128, 128, 1);
margin-left: -18px;
margin-bottom: -20px;
}
div.white8 {
background: rgba(0, 0, 0, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.white9 {
background: rgba(0, 0, 0, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.white10 {
background: rgba(0, 0, 0, 1);
margin-left: -18px;
margin-bottom: -20px;
}

Comments

Post a Comment

Popular posts from this blog

-
Image
W elcome To My Art Blog Portraits are works of art that record the likenesses of humans or animals that are alive or have been alive. The word  portraiture  is used to describe this category of art. The purpose of a portrait is to memorialize an image of someone for the future. It can be done with painting, photography, sculpture or almost any other medium. Some portraiture is also created by artists purely for the sake of creating art, rather than working on commission. The human body and face are fascinating subjects that many artists like to study in their personal work. Many artists also choose to do a "self-portrait." It is a work of art depicting the artist created by their own hand. These are typically made from a reference photo or by looking in a mirror. Self-portraits can give you a good sense of how an artist views themselves and, quite often, it is rather introspective. Some artists will regularly create self-...
Read more
-
Image
 REGISTRATION FORM <!DOCTYPE hmtl> <html>  <body>   <title>Form Element and Attributes</title> <style> //format and styles div{ margin-bottom:10px; } label{  display:inline-block; width:120px; } legend{ padding:20px0; font-size:20px; } </style> </head> <body> <form action="/form/submit" method="GET or POST" > <fieldset> <legend>Personal Information:</legend> <label for="fname">Name</label> <input type="text" placeholder="Enter Name" name="Name" id="fname"/><br/><br/> <label for="number">Phone</label> <input type="number" placeholder="Enter Number" name="Phone" id="number"/><br/><br/> <label for="email">Email</label> <input type="email" placeholder="Enter Email" name="email" requ...
Read more
-
Image
BASIC THINGS TO KNOW ABOUT PHOTOSHOP  HELLO MAAM! this is our group project FOR MIDTERM grp: SALO , DELA CRUZ, AGBIN , UBALDO  that includes  READ HEAR SEE  TALK ABOUT USE AND DO   
Read more