7/6/21

CSS Tutorial :- CSS Padding Property

        , , , ,     9 comments   

CSS PADDING

CSS Padding Property is used to give some space between the element content and element border. Just like margin you can provide the padding from the top, bottom, left, right, etc. You can independently apply padding on the element using separate properties.  And you can also apply padding property at once by using shorthand property. 

But, Padding and margin property both are different from each other. The difference between margin and padding was the margin property would have applied outside the element. But the padding property would have applied inside the element.

CSS Padding Properties

  1. Padding: - This property is used to set padding in one declaration. 
  2. Padding-top: - This property is used to set padding at the top. 
  3. Padding-right: - It is used to set the padding from the right side of the element. 
  4. Padding-bottom: - It is used to set the padding from the bottom of the element. 
  5. Padding-left: - This property was applied from the left side of the element. 

CSS Padding Values

The Value of padding can be set in Four ways: -

  1. Length: - It Specifies padding in px, pt, cm etc.    
  2. % (percentage): - It define padding in % percentages. 
  3. Initial: - It set the padding at default values.
  4. Inherit: - It inherits padding from its parent elements. 

Example: - 

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
        }

        #first,
        #second {
            border: 2px solid red;
            width: 30%;
            height: 120px;
            /* padding: 23px 23px 23px 23px; */
            margin: 23px;
        }
    </style>
</head>

<body>

    <h1> Padding Property </h1>

    <div class="container">
<p id="first"><b> This is First Paragraph.</b><br><br> Lorem ipsum, dolor
 sit amet consectetur adipisicing elit.
Assumenda libero impedit omnis voluptatibus, in neque 
nulla sed quis voluptatum repellat! Hic, cumque vero!</p>
        
<p id="second"> <b> This is Second paragraph.</b><br><br> lsdjlajsdljaldsj
asdjflasjdflajsdlfjasldfjlas dflads flaskdj fl asdjflkasd flasdjflkasd 
jflkasdjfil asdflkasdjf jdlasd flsad flkasdjf lasdfj lasdf alskdjfalsk dfjlaksd
faslkdfj alskdfjlaksd jflasdjflk .</p>
   
 </div>

</body>

</html>

Ouput: -

Without Padding

With Padding


Continue Reading →

7/2/21

Introduction of Loop in C Programming Language.

        , , , ,     1 comment   

Has it ever happened to you that in C programming you have to print a code of block several times? And you have to write that code again and again. If you write the same thing several times. Then your code will get long, complex, and difficult to read. 

And didn’t want to write the same code again and again. So what is its solution? The Solution is Loop. Loop that statement until the condition is not satisfied. Let’s talk about the loop. What is a loop? How its work? etc. etc. 

Introduction of Loop

The Loop is used to execute a statement until the condition of the code is not satisfy. In simple words, a loop provides us to execute a group of statements or multiple instructions multiple times. For Example, if you have to print 1-10 numbers then instead of using printf statement 10 times, we can use printf inside the loop which runs up to 10 iterations.

Advantages of Loop

  1. The first and main thing of the loop is we didn’t write the same code again and again.
  2. Reduce the length of the code. 
  3. The Code is readable. And easy to understand.
  4. It provides the code reusability. 
  5. Loop takes less memory space comparing (write the code several times)

There are mainly 3 types of loops available in the C programming language. These are:-

  1. While Loop
  2. For Loop
  3. Do-While Loop

Let’s See a simple example of a loop. 

Write a program to print the First 50 natural numbers using the loop.

A natural number is a positive number (counting) so don’t be confused about it.


#include<stdio.h>

int main()
{
    int i;

    for (i=1; i<=50; i++)
    {
        printf("%d \n", i);
    }
    return 0;
}

Output:- 


Look at the length of the code. Using the loop the length of the code is reduced. If we have to print 50 numbers without using a loop then we have to write printf statement 50 times. And think if I said to you that, you have to print 50 lakh numbers. I bet, you are not going to do it at any cost. Writing printf statement 50 lakh times is not an easy job.

Continue Reading →

7/1/21

CSS Tutorials : CSS Opacity Property

        , , , ,     2 comments   

CSS Opacity

The CSS Opacity property is used to specify the transparency of the Html element. In other words, You can also say that it specifies the clarity of the element. 

The Opacity property value takes from 0.0 to 1.0. The lower value, the more transparency. Look at the image below. 
The First Image that you see in the example has 0.2 Opacity. The Second image has 0.5 and the last image has a default value of 1. 

Look at the Code below to understand how its works. 
<!DOCTYPE html>
<html>
<head>
<style>
 
#img1 {

  opacity: 0.2;

}
#img2{

    opacity: 0.5;

}
#img3{

    opacity: 1;

}
</style>
</head>
<body>
 
<h1>Transparent Images</h1>
 
<img id ="img1" src="1.jpg" width="270" height="200">
<img id ="img2" src="2.jpg" width="270" height="200">
<img id ="img3" src="3.jpg" width="270" height="200">
 
</body>
</html>
 

Transparent Boxes 

You can also use the opacity property to transparent the box or text area. Look at the example below.

Example:- 

<!DOCTYPE html>
<html>
<head>
<style>
p{ 
    background-color: chocolate;
    padding: 10px;
}
#p1 {
  opacity: 1;
}
#p2{
    opacity: 0.5;
}
#p3{
    opacity: 0.2;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>

<p id = "p1"> Opacity 1</p>
<p id = "p2"> Opacity 0.5</p>
<p id = "p3"> Opacity 0.2</p>


</body>
</html>

Output :-

Apply Hover Effect Using Opacity

You can also hover over the image in the form of opacity. Let's Try it 

<!DOCTYPE html>
<html>
<head>
<style>
img:hover{
    opacity: 0.5;
}
</style>
</head>
<body>

<h1> Hover Property </h1>

<img id ="img1" src="1.jpg" width="270" height="200">
<img id ="img2" src="2.jpg" width="270" height="200">
<img id ="img3" src="3.jpg" width="270" height="200">

</body>
</html>

Ouput :-

Before Hover 

After Hover

That's All of today guys hope you all understand this opacity property very well. If you have any doubt comment below we will definitely try to solve it. 
Continue Reading →
Subscribe to: Posts (Atom)

Follow on Twitter

Linkedin

View Mad about computer's profile on LinkedIn

Categories

Mad About Computer. Powered by Blogger.
This site is in no way affiliated with or endorsed by specified business. It exists as a compendium of supporting information intended for informational purposes only. If you want to buy this website, please don't hesitate to contact us via e-mail: "d e n a c c 9 7 7 (at) g m a i l (dot) c o m" (delete spaces) or you can find and buy it on Afternic domain auctions.