(CSS-4) Overflow,Border-radius,Shadow Effects

Video Tutorial_14

CSS Layout – Overflow:

<style type="text/css">

.sobuj{

width: 900px;

height: 500px;

background: green;

margin: 50px auto;

overflow: hidden;

}

          .white{

background: white;

width: 300px;

height: 300px;

border-radius: 50%;

margin:100px 110px;

overflow: hidden;

}

img {

width: 150px;

margin: 80px 80px;

display: block;

   }

</style>

<div class="sobuj">

          <div class="white">

                    <img src="paris.jpg" alt="Paris">

          </div>

Border-radius:

<style type="text/css">

.sobuj{

width: 900px;

height: 500px;

background: green;

margin: 50px auto;

overflow: hidden;

position: :relative;

}

            .lal{

background: white;

width: 300px;

height: 300px;

border-radius: 50%;

                        position: absolute;

                        bottom: 0;

                        right:0;

                        top:0;

                        left:0;

margin: 50px auto;

}

            img {

    width: 150px;

                        margin: 80px 80px;

                        display:block;

                        position: absolute;

                        bottom: 0;

                        right:0;

                        top:0;

                        left:0;

                        margin: auto;

            }

</style>

<div class="sobuj">

            <div class="lal">

                        <img src="paris.jpg" alt="Paris">

            </div>

CSS Shadow Effects:

<style>

            h2{

                        background: red;

                        font-size: 50px;

                        padding: 10px;

                        display: inline-block;

                       box-shadow: 10px 10px 10px green;

                        text-shadow: 10px 10px 10px green;

}

</style>

<h2> This is heading </h2>

Read more »

(CSS_3) CSS Gradients

Video Tutorial_13

CSS Box Model:

<style type="text/css">

   .box{

   width: 300px;

    border: 25px solid green;

    padding: 25px;

    margin: 25px 25px 25px 25px;

   background-color: lightgrey;

}

</style>

<div class="box">This text is the actual content of the box.</div>

You can use div{} or .box{}

CSS Gradients:

 

Linear-Gradient:

<style type="text/css">

            .taposi{

background: linear-gradient(to right bottom, green, brown, navy, yellow);

width: 100px;

height: 50px;

border: 10px solid green

}

</style>

<div class="Taposi"></div>

Radial Gradient:

<style type="text/css">

            .taposi{

            background: radial-gradient(green, brown, navy, yellow);

            width: 300px;

             height: 300px;

            border: solid green;

            border-radius: 150px;

margin: 20px;

}

</style>

<div class="Taposi"></div>

Read more »

(CSS_2) Letter-Spacing Property

Video Tutorial_12

U tag in CSS:

<style type="text/css">

u{

color:White;

background: Blue;

text-align: center;

font-size: 50px;

display: block;

width: 500px;

margin: 0 auto;

            }

</style>   

   <u>This is an Underline</u>

letter-spacing Property

H2 tag:

(1) <style type="text/css">

            h2[part="Younger"]{

            width: 200px;

             height: 50px;

            background: yellow;

            color: black;

            }

            h2[part="elder"]{

            width: 200px;

             height: 50px;

            background: green;

            color: white;

            }

</style>   

<h2 part="Younger">Taposi</h2>

<h2 part="elder">Pushpo</h2>

    </style> 

(2)

<style type="text/css">

h2.younger{

width: 300px;

height: 150px;

background: yellow;

color: black;

}

h2.elder{

width: 300px;

height: 150px;

background: green;

color: white;

}

</style>   

<h2 class="Younger">Taposi</h2>

<h2 class="elder">Pushpo</h2>

    </style>   

(3)

<style type="text/css">

.dhaka h2{

width: 200px;

height: 50px;

background: Black;

color: White;

}

.sylhet h2{

width: 200px;

height: 50px;

background: pink;

color: green;

}

</style>   

<div class="Dhaka">

<h2>Taposi</h2>

</div>

<div class="Sylhet">

<h2>Pushpo</h2>

</div>

    </style>   

If we use “id” in the place of “class” then we need to use “#” in the place of “.”

<style type="text/css">

            #dhaka h2{

                        width: 200px;

                height: 50px;

                        background: yellow;

                                    color: black;

                        }

</style>   

<div id="Dhaka">

<h2>Taposi</h2>

</div>

Read more »

(CSS_1) Three Ways to Insert CSS

CSS: Cascading Style Sheets

Video Tutorial_11

Three Ways to Insert CSS

• External style sheet
• Internal style sheet
• Inline style

Inline style:

<p style="property: value; property: value; "></p>

<P style="color:red; background: yellow">This is a paragraph</P>

Internal style sheet:

<style type="text/css">

            h2{

color:red;

background: yellow;

text-align: center;

padding-top: 10px;

padding-bottom: 10px;

margin:0;

font-size: 20px;

font-family: calibri;

}

</style>

<h2>This is heading</h2>     

<P>This is a paragraph</P>

Read more »

(HTML_5) Language, Abbreviation, Address,Base,Blockquote,Quotation,Button Tag_5

Video Tutorial-9,10

Short cut way of coding HTML:

https://code.google.com/archive/p/zen-coding/downloads

Zen.Coding-Notepad++.v0.7.zip

Language Code:

<!DOCTYPE HTML>

<HTML LANG="en-US">     ( for US english code "en-us" Bangla "bn_BD" Language code Link : https://wpcentral.io/internationalization/ )

<head>

<meta charset="UTF-8">  (For use any language have to use UTF-8.  UTF mean Unicode Transformation Formate.

<title> Welcome to our website</title>

</head>

<body>

</body>

</html>

Abbreviation Tag:

<abbr title="World Health Organization">WHO</abbr>

Address Tag:

<address>

Name: </br>

Vill: </br>

PS: </br>

Post office: </br>

Post Code: </br>

</address>

Name with email:

<address>

Email address: <a href="mailto:taposi2011@gmail.com">Roksana Siddika</a>.

</address>

Base tag: ( Base tag use for open every anchor text in a new tab)

<head>

<base href="https://www.w3schools.com" target="_blank"/>

</head>

<body>

<a href="https://www.google.com/">Visit Us</a>

</body>

Blockquote

<blockquote>Tumi onek din beche thako</blockquote>

Quotation

<q>Tumi onek din beche thako</q>

Button

<button>Send</button>

Details:

<details>

<option value="">Ami</option>

<option value="">Tumi</option>

<option value="">She</option>

<option value="">he</option>

</details>

Delete Tag:

<del>All data will be delete</del>

Form Tag:

<form action="">

Name:<input type="text" />

Password:<input type="password" />

<input type="submit" value="login" />

</form>

Form,fieldset,legend Taxtarea tag:

<form action="">

<fieldset>

<legend>Login</legend>

Name:<input type="text" />

Password:<input type="password" />

<textarea name=""id="" cols="30" rows="10"></textarea>

<input type="submit" value="login" />

</fieldset>

</form>

Meta Tag: (Refresh)- Refresh document every 5 seconds

<head>

<meta http-equiv="refresh" content="5">

</head>

Pre tag: defines preformatted text.

Text in a pre element is displayed in a fixed-width font, and it preserves both      spaces and line breaks.

<pre>

            life         is           not           a               bed               of           roses

</pre>

Sup Tag: Subscript text

Sup Tag: superscripted text.

<p>H₂SO₄</p>

<p>a²+2ab+b²</p>

Read more »