Remember, a Jedi can feel the Force flowing through him. I can’t get involved! I’ve got work to do! It’s not that I like the Empire, I hate it, but there’s nothing I can do about it right now. It’s such a long way from here. I call it luck. You are a part of the Rebel Alliance and a traitor! Take her away!

I don’t know, what do you think? In my experience, there is no such thing as luck.Oh God, my uncle. How am I ever gonna explain this? Hey, Luke! May the Force be with you.
1. Basic CSS with <h1>
Html:
<h1> Welcome to Spicy Restaurant </h1>
CSS Code:
H1{
Color: red;
Font-size:70px;
Font-style: italic;
Font-family:impact
}
body {
background-image: url(“ful.jpg”);
}
2. Class and ID:
html:
<p class=”am”> abul is a good boy </p>
<p Class= “am”> abul is a good boy </p>
<p class=”jam”> abul is a good boy </p>
<p class=”jam”> abul is a good boy </p>
<p id=”kathal”> abul is a good boy </p>
<p id=”kathal”> abul is a good boy </p>
<p> abul is a good boy </p>
<p> abul is a good boy </p>
CSS Code:
.am{color:red}
.jam{color:green}
#kathal{ color:blue}
3. Div Create: ২টি ডিব নিয়ে ২টি ব্লক তৈরী করতে হবে -Color, size ।
Html code:
<div class=”mango”>
this is the paragraph for mango
</div>
<div class=”apple”>
This is the paragraph for Apple
</div>
CSS Code:
.mango{background-color:red;
width:300px;
height:200px
}
.apple{
background-color:green;
width:300px;
height:200px
}
4. Margin & Padding:
মার্জিন হল চারপাশে পরীক্ষার খাতার মত স্কেলিং করা & পেডিং হল ফুটবলের মত ফুলানো বা বড় করা
Html:
<div class=”mango”>
this is the paragraph for mango
</div>
<div class=”apple”>
This is the paragraph for Apple
</div>
CSS Code:
.mango{
background-color:red;
width:300px;
height:200px;
margin-top: 50px;
margin-bottom:50px;
margin-left:50px;
padding:50px
}
7. Overflow
একটি বড় প্যারাগ্রাফের চারপাশে বর্ডার দিয়ে এটিকে ছোট একট স্ক্রলবার বক্সের মধ্যে দেখানোর পদ্ধতি ।
Html: <div id=”wrapper”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel blandit ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce rhoncus urna ut est hendrerit, ut condimentum risus tristique. Pellentesque metus justo, ultrices sed posuere convallis, viverra sit amet diam. Nullam at maximus lorem. Maecenas interdum iaculis justo, vel pulvinar nisi placerat quis. Etiam sed risus ac mi tempor consectetur. Sed lorem tellus, auctor nec vehicula eget, eleifend at justo. </p>
</div>
CSS Code:
border: 10px solid red;
height: 300px;
width: 500px;
overflow:scroll
আরেকটি overflow:hidden
}
11. Hover:
যে কোন ব্লক , Heading or paragraph er উপর মাউস নিয়ে গেলে কালার, সাইজ বা লেখা পরিবর্তন হবে ।
Html:
<div class=”mango”>
mango
</div>
CSS Code:
.mango{
background-color:blue;
width:200px;
height:200px
}
.mango:hover{
background-color:red;
width:200px;
height:200px
}
h1:hover{color:red;
font-size:40px;
}
p:hover{color:red}
12. Transitiion
আস্তে আস্তে কালার ও সাইজ পরিবর্তন করার জন্য
Html:
<div class=”mango”>
mango
</div>
CSS Code:
.mango{
background-color:blue;
width:200px;
height:200px;
transition:background-color 1s, width 1s
}
.mango:hover{
background-color:red;
width:500px;
height:200px
}
13. Transform: rotate
Html:
<div class=”mango”>
mango
</div>
CSS Code:
.mango{
background-color:#66ccff;
width:200px;
height:200px;
transition:all 2s
}
.mango:hover{
background-color:blue;
width:200px;
height:200px;
transform:rotate(10deg);
}
14. transform: skewx(10deg); রম্বসের মত ঘুরে যাবে ।
15. Google search: CSS transform or CSS properties or CSS style for more design.
17. Div Background Image: fixed & scroll
Div এর মধ্যে ব্যাকগ্রাউন্ড ইমেজ দেয়া এবং এই ইমেজকে ফিক্সড বা স্ক্রল করা ।
Html:
<div class=”wrapper”>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel blandit ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce rhoncus urna ut est hendrerit, ut condimentum risus tristique. Pellentesque metus justo, ultrices sed posuere convallis, viverra sit amet diam. Nullam at maximus lorem. Maecenas interdum iaculis justo, vel pulvinar nisi placerat quis. Etiam sed risus ac mi tempor consectetur. Sed lorem tellus, auctor nec vehicula eget, eleifend at justo.
More more…………………………………………………………………….. </p>
</div>
CSS Code:
.wrapper {
background-image:url(“ful.jpg”);
background-attachment:fixed;
/*আরেকবার : scroll দিয়ে ট্রাই করতে হবে */
background-size: 900px 720px
}
20. Basic Form Create:
Html:
<form>
First Name
<input type=”text”>
Last Name
<input type=”text”>
Age
<input type=”number”> <br> <br>
<input type=”submit”>
</form>
24. Form: Radio Button
Gender:
MALE
<input type=”radio” value=”male” name=”abul”>
FEMALE
<input type=”radio” value=”female” name=”abul”> <br>
Note: Male টা সবসময় চেকড রাখতে চাইলে
MALE
<input type=”radio” value=”male” name=”abul” checked>
25. Select Country: select, option
Country:
<select >
<option> USA </option>
<option> Australia </option>
<option> Germany </option>
<option> Canada </option>
<option> Russia </option>
<option> China </option>
<option> Singapore </option>
<option> Hangkong </option>
</select>
  • যে কোন অপশন সিলেক্টেড রাখার জন্য <option selected> Singapore </option>
26. Date of Birth:
Date of Birth:
<input type=”date”>
27. Minimu Maximum Date:
Date of Birth:
<input type=”date” min=”1980-01-01″ max=”2019-01-01″>
28. Age: with Max Min
Age
<input type=”number” min=”18″ max=”100″>
29. Email:
Email:
<input type=”email”>
30. Favourite Color:
Favourite Color:
<input type=”color”>
32. Upload button:
Upload:
<input type=”file”>
33. Password:
Password:
<input type=”password”>
34. Email:
<input type=”email”>
35. Comments Box:
<textarea rows=”20″ cols=”50″> Write your Comments Here </textarea>
36. Form এর চারপাশে বর্ডার এবং টাইটেল দেয়া : Fieldset and Legend tag
ফরমের ভিতর Fieldset এবং Legend ট্যাগ যুক্ত করতে হবে ।
<form>
<fieldset>
<legend> Customer information Form </legend>
First Name
<input type=”text”>
Last Name
<input type=”text”>
Date of Birth:
<input type=”date” min=”1980-01-01″ max=”2019-01-01″>
Gender:
MALE
<input type=”radio” value=”male” name=”abul” checked>
FEMALE
<input type=”radio” value=”female” name=”abul”> <br>
Country:
<select >
<option> USA </option>
<option> Australia </option>
<option> Germany </option>
<option> Canada </option>
<option> Russia </option>
<option> China </option>
<option selected> Singapore </option>
<option> Hangkong </option>
</select>
Email:
<input type=”email”>
Favourite color:
<input type=”color”>
Upload:
<input type=”file”>
Password:
<input type=”password”> <br> <br> <br>
Comments Box
<textarea rows=”20″ cols=”50″> Write your Comments Here </textarea>
Age
<input type=”number” min=”18″ max=”100″>
<input type=”submit”>
</fieldset>
</form>
39. Gradient: Linear-gradient
html:
<div class=”mango”>
</div>
CSS Code:
.mango{
width:700px;
height:400px;
background: linear-gradient(to top,red,green,yellow);
}
Practice Linear-gradient: Top, Bottom, Left, Right
40. Radial Gradient:
<div class=”mango”>
</div>
CSS Code:
.mango{
width:700px;
height:400px;
background: radial-gradient(red 10%,green 40%,yellow 50%);
}
41. Online Gradient Creator:
Google search or go to colorzilla.com
42. Animation:
<div class=”mango”>
</div>
CSS Code:
.mango{
width:700px;
height:500px;
background:red;
animation-name:komola;
animation-duration:1s;
animation-iteration-count:20
}
@keyframes komola{
from{background:red}
to{background:green; border-radius:50%}
}
43. Animation direction: Left to Right
Html: same
CSS Code:
.mango{
width:700px;
height:500px;
background:red;
animation-name:komola;
animation-duration:1s;
animation-iteration-count:infinite;
position:relative;
animation-direction:alternate;
}
@keyframes komola{
from{left:0px}
to{left:700px}
}
44. Div animation Movement:
Html:
<div class=”mango”>
</div>
CSS Code:
.mango{
width:700px;
height:500px;
background:red;
animation-name:komola;
animation-duration:1s;
animation-iteration-count:infinite;
position:relative;
animation-direction:alternate;
}
@keyframes komola{
0%{left:0;top:0}
25%{left:200px;top:0}
50%{left:200px; top:200px;}
75%{left:0;top:200px}
100%{left:0;top:0}
}
45. Audio
<audio controls autoplay loop>
<source src=”chakri.mp3″ >
</audio>
CSS Code:
audio{
width:500px;
height:200px;
background:red;
}
কন্ট্রোলস টা তুলে দিলে ব্যাকগ্রাউন্ডে মিউজিক বাজবে অটোপ্লে দিলে অটোপ্লে হবে লুপ দিলে শেষ হওয়ার পর পুণরায় শুরু হবে । মজিলা বা এজ থেকে ভাল দেখা যাবে ।
46. Video:
<video controls autoplay loops poster=”flower.jpg”>
<source src=”abul.mp4″>
</video>
CSS Code:
video{
width:500px;
height:300px;
background:red;
border-radius:5px;
}
41. Iframe:
একটি ওয়েব সাইটের মধ্যে Window আকারে আরেকটি ওয়েব সাইট খোলা ।
html:
<iframe src=”http://www.prothomalo.com“>
</iframe>
Css:
iframe{
width:400px;
height:500px;
border:3px solid green;
}
43. Create Menu:
Html:
<ul id=”menu”>
<li> <a href=”#”> </li>
<li> <a href=”#”> Fruits <a> </li>
<li> <a href=”#”> Aam <a> </li>
<li> <a href=”#”> Jaam <a> </li>
<li> <a href=”#”> Kathal <a> </li>
<li> <a href=”#”> Komola <a> </li>
<li> <a href=”#”> Apple <a> </li>
</ul>
CSS:
}
#menu li{
display:inline;
}
#menu li a {
color:white;
text-decoration:none;
background:black;
padding: 20px;
}
#menu li a:hover{
Background:red;
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here