The CSS Opacity property ✍️

-

 #CSS Opacity/Transparency;

The CSS Opacity property  specifies the opacity/ transparency of an element. The opacity property can take a value from 0.0-1.0, The lower value, the more transparent.

Value range:

  • Opacity: 0.0; makes the elements invisible.

  • Opacity: 0.5; makes the element 50% see through.

  • Opacity: 1.0; Is the default value, making the element fully solid.
For example:-

<html>

<head>

    <style type="text/css">

      body

      {

        margin:25px;

      }

      .king

      {

        background-color: deeppink;

        height:230px;

        width:300px;

        border: solid 4px aquamarine;

        border-radius:40px;

        opacity:0.5;

      }

    </style>

    <title></title>

  </head>

  <body>

    <div class="king"></div>

  </body>

</html>

When we set Opacity 0.5 is makes the element 50% transperant.like;

When we set Opacity 1.0, is making the element fully solid. Like;

For example:-

<html>

<head>

 <style type="text/css">

      body

      {

        margin:25px;

      }

      .king

      {

        background-color:deeppink;

         height:230px;

        width:300px;

        border:solid 6px aquamarine;

        border-radius:40px;

        opacity:1.0;

      }

    </style>

 <title></title>

 </head>

  <body>

<div class="king"></div>

 </body>

</html>

Output is:

Let's try to understand CSS Opacity with one more example like;

<html>
  
<head>
  
<style>
  
div
  {
    
  background-color:palevioletred;
    
  padding:10px;
}
  div.first
  
  {
    
  opacity: 0.2;
    
}

div.second
  {
    
  opacity: 0.3;
    
}

div.third
  {
    
  opacity: 0.4;
    
}
  div.fourth
  {
    
  opacity: 0.6;
    
  }
  
  </style>
  
</head>
  
<body>
  
<h1>The opacity Property</h1>
  
<div class="first"><p>opacity 0.2</p></div>
  
<div class="second"><p>opacity 0.3</p></div>
  
  <div class="third"><p>opacity 0.4</p></div>
  
<div><p>opacity 1 (default)</p></div>
  
<div class="fourth"><p>opacity 0.6</p></div>
  
</body>
  
</html>

CSS Tables;

The CSS table helps you to define layout of table. CSS provide several properties specifically for styling HTML tables in addition to general properties like; border, padding, background-color.

The CSS general properties for styling tables;
  • border-collapse: it's controls whether borders merge or remain separate. 

  • border-spacing: It's sets the distance between the cell's borders when they are separate.

  • horizontal and vertical alignment: It's control the horizontal and vertical alignment of content within cells.

  • border: it's used to provide width, style and color of an HTML element.

  • background-color: it's provide style to rows.

  • width and height: it's used to set the size of table.
Let's try to understand CSS Tables with example:

<html>
<head>
<style type="text/css">

table
 {
border-collapse: collapse;
        width:350px;
        height:300px
          }

        table,td,th

        {

         border: groove 1px black;

        }

      td

        {
         text-align: center;
          vertical-align: bottom;
           }

      th

        {
         background-color: deeppink; 

        }

</style>
 <title>
</title>
</head>
<body>
<table>

  <tr>
<th colspan="3" >Employee Data</th>  
</tr>

  <tr>
<td>Emp Id</td>
<td>Name</td>
<td>salary</td>
  </tr>
    
    <tr>
<td>101</td>
<td>Taniya</td>
<td>20,000</td>
</tr>

    <tr>
<td>102</td>
<td>Bobby</td>
<td>24,000</td>
   </tr>

<tr>
<td>103</td>
<td>Riya</td>
<td>19,000</td>
</tr>
    
</table>
</body>
</html>

Output is:


Using by hover effect;

<html>

<head>

<style type="text/css">

    table

        {

        border-collapse: collapse;

        width:350px;

        height:300px;

        }
        table,td,th

        {

         border: groove 1px black;

        }

      td

        {
         text-align: center;

         vertical-align: bottom;

        }

      th

        {

         background-color: deeppink; 

         }

        tr:hover

      {

    background-color:cyam;

       }

</style>

 <title>

 </title>

</head>

<body>

<table>

    <tr>

    <th colspan="3" >Employee Data</th>  

    </tr>

<tr>

<td>Emp Id</td>

<td>Name</td>

 <td>salary</td>

 </tr>
    
    <tr>

<td>101</td>

<td>Taniya</td>

 <td>20,000</td>

    </tr>
    
    <tr>

<td>102</td>

<td>Bobby</td>

 <td>24,000</td>
    </tr>

<tr>

<td>103</td>

<td>Riya</td>

 <td>19,000</td>

    </tr>
    
</table>

</body>

</html>

Output is:


CSS Tables style with tr:nth-child property;

<html>
  <head>
    <style type="text/css">
      table
      {
    bordercollapse:collapse;
      width: 350px;
        border:solid 4px limegreen;
      }
      th,td
      {
        border-bottom:ridge 3px black;
        text-align: center;
      }
      th
      {
        background-color:orange;
      }
      tr:nth-child(even)
      {
        background-color:rgb(244,150,220);
      }
      tr:nth-child(odd)
      {
        background-color:rgb(134,155,180);
      }
    </style>
  </head>
  <body>
  <table>

    <tr>
 <th colspan="3" >Employee Data</th>  
   </tr>

  <tr>
   <td>Emp Id</td>
   <td>Name</td>
   <td>salary</td>
  </tr>
    
    <tr>
   <td>101</td>
    <td>Taniya</td>
    <td>20,000</td>
    </tr>

    <tr>
    <td>102</td>
    <td>Bobby</td>
    <td>24,000</td>
   </tr>

      <tr>
     <td>103</td>
     <td>Riya</td>
     <td>19,000</td>
    </tr>

    <tr>
      <td>104</td>
      <td>Priya</td>
      <td>16,000</td>
    </tr>

</table>
  </body>
</html>

Output is:


CSS layout - The display property:

CSS display property defines how an element is rendered on a web page and how it interacts with other elements in the layout.
It control a whether an element is treated as a block, inline, grid, flex, or other box type.

The Common CSS display property:-

  • block: Starts on a new line and takes up the full width.

  • inline: The element does not start on a new line and only takes up as much width as it's content requires.

  • inline-block: This value combines the features of both inline and block.

  • none: It takes up no space.

  • Flex: It's excellent for creating flexible, responsive layouts.

  • grid: This value makes an element a block-level grid container.

CSS - Layout - The postion property;


The position property Specifies the type of positioning method used for an element.

There are four different positions values:
  • Static: This is default value for all HTML documents.

  • Relative: The element is positioned relative to its normal position in the document flow.

  • Fixed: The element is stays in the same place even when page is scrolled.

  • Sticky: The value is a hybrid of relative and fixed.


Comments

Post a Comment

Popular posts from this blog

WEBSITE DEVELOPMENT USING HTML AND CSS

-
What is website ? A website is a collection of publicly accessible, interlinked web pages that share a single domain name . Websites, can be created and maintained by an individual, group, business or organisation to serve a variety of purpose. Websites come ina nearly endless variety, including educational sites , news sites , forums , social media sites , e-commerce sites , and so on.  The page within a website are usually a mix of text and other media. That said, there are no rules dictating the form of  a website. Examples of website are: Bing.com    wikipedia.org ,    google.com , amazon.com   etc. Languages used for website development ; The most common programming languages used to develop website are : HTML (Hyper Text Markup Language) JavaScript   CSS (Cascading Style Sheets) PHP: Hypertext Preprocessor Note:- Some of these can be used as an extension of the existing languages but some can be used entirely separate from the other language...
Read more

Introduction to CSS ✍️

-
Image
  Basics About CSS ✍️ Cascading style sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. Cascading style sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags . Using CSS, you can specify s number of style properties for a given HTML element . Each property has a name and a value, separated by a colon (:).  Each property declaration is separated by a semi-colon (;). Advantages of CSS : CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. SEO Benefits - Faster loading times and mobile-friendliness, both facilitated by CSS, are important factors for search engine rankings , which can hel...
Read more

Advanced properties of CSS

-
Image
  In this article you will see how you can display your content better on your website with the help of using Css's properties like, text-shadow and box-shadow. #Whenever you want to apply Text-Shadow on your website in html with using CSS values .  Firstly ,  you should know that t ext -shadow accept four values like ; text-shadow:h-shadow v-shadow blur- radius  color ; h-shadow :- It is  horizontal offset of the shadows , in this positive values move the shadow to the right and the negative values move the shadow to the left. v-shadow :- It is vertical offset of the shadows , in this positive values move the shadow down and the nagative values move the shadow up. blur-radius :- The blur radius works optionally in the text-shadow . A large value makes the shadow more dispersed. Color :- This provides colour to the text-shadow. Example :- Here is how you would use the CSS text -shadow property in a HTML file to add a simple shadow to an <h1> element :...
Read more