रंग और पृष्ठभूमि

<style>

#txt1{
    color: red;
}

#txt2{
    color: #ff0000;
}

#txt3{
    color:  rgb(255,0,0);
}

/*  
   0.4 is the alpha value. 
   We can define decimal values 
   between 1 and 0.
 */
#txt4{
    color:  rgba(255,0,0, 0.4);
}

</style>

<div class="box">
<h1 id="txt1">
    This is red color
</h1>
<h1 id="txt2">
    This is red color that defined with HEX type
</h1>
<h1 id="txt3">
    This is red color that defined with RGB type
</h1>
<h1 id="txt4">
    This is red color that defined with RGBA type
</h1>
</div>

<!DOCTYPE html>
<html>
<head>
<style>
#box {
  padding:10px;
  background-color: lightblue;
  border:1px solid #c0c0c0;
  color:#ffffff;
}
</style>
</head>
<body>

<div id="box">Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. Donec ante purus, 
    eleifend egestas tempus non, consequat ac ex..
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#box {
  padding:10px;
  background-color: lightblue;
  opacity: 0.5;
  border:1px solid #c0c0c0;
  color:#ffffff;
}
</style>
</head>
<body>

<div id="box">
    Lorem ipsum dolor
    sit amet, consectetur adipiscing elit.
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#box {
  padding:10px;
  width:300px;
  height:300px; 
  background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>

<div id="box"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#box {
  padding:10px;
  width:300px;
  height:300px; 
  background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");

/* the element's background would fill the
 div's background without 
the image's ratio being distorted*/
 background-size: contain;
}
</style>
</head>
<body>

<div id="box"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#box {
  padding:10px;
  width:300px;
  height:300px; 
  background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");

 /* The width and height values 
     are set to 50%. */
 background-size: 50% 50%;
}
</style>
</head>
<body>

<div id="box"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#box {
  padding:10px;
  width:300px;
  height:300px; 
  background-image: url("cdn.coddykit.com/cms/coddy_test.png");

 /* The width and height 
     values are set to 50%. */
 background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>

<div id="box"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#box {
  padding:10px;
  width:300px;
  height:300px; 
  background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");

 /* The width and height 
     values are set to 50%. */
 background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>

<div id="box"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#box {
  padding:10px;
  width:300px;
  height:300px; 
  background: no-repeat center/50% 
      url("https://cdn.coddykit.com/cms/coddy_test.png");
   }
</style>
</head>
<body>

<div id="box"></div>

</body>
</html>