ES6 শিখতে গুরুত্বপূর্ণ কারণ এর একটি কারণ হ’ল এটি জাভাস্ক্রিপ্টকে আরও ভাল লেখা এবং সহজ করে তোলে এবং একই সাথে আজকের আধুনিক ওয়েব প্রযুক্তির সাথে রিঅ্যাক্ট, নোড.জেস এবং আরও অনেকগুলি ব্যবহার করা হচ্ছে ।

এই পোস্টে, আপনি নতুন কীওয়ার্ড শিখতে পারবেন যা ES6  ভ্যারিয়েবল ডিক্লারেশন্স  জন্য নিয়ে আঁচছে: letএবং const। তবে প্রথমে, আসুন কী কী ভুল ছিল তা ব্যাখ্যা করি var।

var সমস্যা কি ছিল?

varভেরিয়েবল ঘোষণার জন্য আমাদের কাছে ইতিমধ্যে জেএসে কীওয়ার্ড ছিল । তাহলে কেন ES6 অতিরিক্ত কীওয়ার্ড চালু করেছে?

সমস্যাটি বোঝার জন্য varপ্রথমে আপনাকে বুঝতে হবে যে scope কী।

Scope determines the accessibility of variables, objects, and functions from different parts of the code. — w3schools

জাভাস্ক্রিপ্টে 3 ধরণের স্কোপ (Scope) রয়েছে:

• ফাংশন (লোকাল ) সুযোগ
• গ্লোবাল স্কোপ (Scope)
• ব্লক স্কোপ (Scope) (ইএস 6 সহ নতুন)

var supports function & global scope, but not block scope.

ফাংশন ( লোকাল ) স্কোপ

যখন কোনও ফাংশনের অভ্যন্তরে কোনও ভেরিয়েবল সংজ্ঞায়িত করা হয় , এটি কেবলমাত্র সেই ফাংশনের জন্য লোকাল হবে এবং বাইরে ব্যবহার করা যাবে না:

function local() {
  var number = 1;
   console.log(number); // 1 gets printed
}
console.log(number); // undefined

গ্লোবাল স্কোপ

যখন কোনও ফাংশনের বাইরে কোনও ভেরিয়েবল ঘোষণা করা হয় বা varকীওয়ার্ড ছাড়াই তখন তা গ্লোবাল হয়ে যাবে এবং যে কোনও জায়গা থেকে অ্যাক্সেসযোগ্য হবে:

var number = 1;

function local() {  
  console.log(number); // 1 gets printed
}

console.log(number); // 1 gets printed

ব্লক স্কোপ

curly braces { }, if-else cases এবং for loops হয় block-scoped

আসুন লুপের ভিতরে একটি ভেরিয়েবল (সহ var) সংজ্ঞায়িত করি এবং দেখুন কী প্রিন্ট হয়…

for(var i = 1; i < 10; i++) {
 console.log(i);
} 
console.log(i);    // What do we expect here?

এখানে সবকিছু ঠিক আছে মনে হচ্ছে। তবে দ্বিতীয় কনসোল.লগের কী হবে?

দ্বিতীয় console.log বাইরে জন্য লুপ এবং  লোকাল ভ্যারিয়েবল
“i” যেহেতু প্রিন্ট হওয়ার কথা ছিল undefined ।

তবে, যদি আমরা  let or const,  ব্যবহার করি, যেহেতু সেগুলি ব্লক-স্কোপড , এই সমস্যাটি সমাধান হবে।

রেডিক্লারেশন ইসু অফ var

এর সাথে আর একটি সমস্যা varহ’ল এটি একই পরিবর্তনশীলগুলিকে বারবার পুনরায় ডিক্লেয়ার করার অনুমতি দেয় :

var number = 1;   // first declaration
var number = 2;   // same variable redeclared with the same name

console.log(number); // And we see no errors

এখন আসুন দেখুন ES6 কীভাবে তাদের সাথে ডিল করে …

var এর পরিবর্তে let

আমি উপরে উল্লিখিত সমস্যাগুলি প্রতিরোধ করতে আসুন এর সাথে আবার চেষ্টা করুন let:

for(let i = 0; i < 10; i++) {   // same local variable with let 
  console.log(i);
}

console.log(i); // This time what do we expect?

তাই let ব্লক-স্কোপ ও দ্বিতীয় console.log প্রিন্ট করছে undefined । পারফেক্ট!

এছাড়াও, একটি ভেরিয়েবলের সাথে একটি ভেরিয়েবল পুনরায় ঘোষণার চেষ্টা করে letএকটি ত্রুটি প্রদান করে:

সুতরাং letকীওয়ার্ড:

• can be used instead of var
• is block-scoped
• doesn’t allow redeclaration, but can be reassigned later

const

অন্য নতুন কীওয়ার্ড যা ES6 এনেছে তা হ’ল const।

letএবং এর মধ্যে পার্থক্য constহ’ল একবার আমরা এর সাথে একটি ভেরিয়েবল ঘোষণা করি const, পরে এটি পরিবর্তন করা যায় না:

মূল constশব্দটি:

The post জাভাস্ক্রিপ্ট – var, let, const first appeared on Bipon's Diary.

<div class="login-page">
  <div class="form">
    <form class="register-form">
      <input type="text" placeholder="user name"/>
      <input type="text" placeholder="password"/>
      <input type="text" placeholder="email id"/>
      <button>Create</button>
      <p class="message">Already Registered? <a href="#">Login</a></p>
    </form>
    
    <form class="login-form">
      <input type="text" placeholder="user name"/>
      <input type="password" placeholder="password"/>
      <button>Login</button>
      <p class="message">Not a Registered? <a href="#">Register</a></p>
    </form>
  </div>
</div>

CSS

body{
  background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6), url(https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/reference_guide/cats_and_excessive_meowing_ref_guide/1800x1200_cats_and_excessive_meowing_ref_guide.jpg));
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.login-page{
  width: 360px;
  padding: 10% 0 0;
  margin: auto;
}
.form{
  position: relative;
  z-index: 1;
  background: rgba(7, 40, 195, 0.8);
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
}
.form input{
  outline: 1;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button{
  text-transform: uppercase;
  outline: 0;
  background: #4caf50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.form button:hover, .form button:active{
  background: #43a047;
}
.form .message{
  margin: 0 0 15px;
  color: aliceblue;
  font-size: 12px;
}
.form .message a{
  text-decoration: none;
  color: #4caf50;
}
.form .register-form{
  display: none;
}

jQuery

$('.message a').click(function(){
  $('form').animate({height: "toggle", opacity: "toggle"}, "slow")
})

Source code

The post Create login and registration form using HTML CSS and JavaScript first appeared on Bipon's Diary.

The post The Past, Present and Future of CSS-in-JS first appeared on Bipon's Diary.

HTML

<div class="hero">
  <div class="btn-box">
    <button id="btn1" onclick="openHTML()">HTML</button>
    <button id="btn2" onclick="openCSS()">CSS</button>
    <button id="btn3" onclick="openJS()">Javascript</button>
  </div>
  <div id="content1" class="content">
    <div class="content-left">
      <h2>Left HTML</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially u</p>
    </div>
    <div class="content-right">
      <img src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png" alt="">
    </div>
  </div>
  <div id="content2" class="content">
    <div class="content-left">
      <h2>Left CSS</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially u</p>
    </div>
    <div class="content-right">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHrWdycKUB4lP9WYjdpPJdLXTUaDbdaYZ_LRcplbhLet-54LJ1&s" alt="">
    </div>
  </div>
  <div id="content3" class="content">
    <div class="content-left">
      <h2>Left JS</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially u</p>
    </div>
    <div class="content-right">
      <img src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png" alt="">
    </div>
  </div>
</div>

CSS

.hero{
  width: 80%;
  height: 450px;
  position: relative;
  margin: 100px auto;
  overflow: hidden;
}
.btn-box{
  display: flex;
  border: 1px solid #ccc;
}
.btn-box button{
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  margin-right: 50px;
  font-size: 20px;
  font-weight: bold;
}
.content-right img{
  width: 250px;
}
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5% auto;
  position: absolute;
  transform:translateX(100%);
  transition: 0.3s;
}
.content-left{
  flex-basis: 50%;
  text-align: left;
}
.content-left p{
  font-size: 13px;
  padding: 10px 0;
}
.content-right{
  flex-basis: 50%;
  text-align: center;
}
#content1{
  transform: translateX(0px);
}
#btn1{
  color: #ff7846;
}

JS

var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
var content3 = document.getElementById("content3");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
function openHTML(){
  content1.style.transform = "translateX(0)";
  content2.style.transform = "translateX(100%)";
  content3.style.transform = "translateX(100%)";
  btn1.style.color = "#ff7846";
  btn2.style.color = "#000";
  btn3.style.color = "#000";
  content1.style.transitionDelay = "0.3s";
  content2.style.transitionDelay = "0s";
  content3.style.transitionDelay = "0s";
}
function openCSS(){
  content1.style.transform = "translateX(100%)";
  content2.style.transform = "translateX(0)";
  content3.style.transform = "translateX(100%)";
    btn1.style.color = "#000";
    btn2.style.color = "#ff7846";
    btn3.style.color = "#000";
  content1.style.transitionDelay = "0s";
  content2.style.transitionDelay = "0.3s";
  content3.style.transitionDelay = "0s";
}
function openJS(){
  content1.style.transform = "translateX(100%)";
  content2.style.transform = "translateX(100%)";
  content3.style.transform = "translateX(0)";
    btn1.style.color = "#000";
    btn2.style.color = "#000";
    btn3.style.color = "#ff7846";
  content1.style.transitionDelay = "0s";
  content2.style.transitionDelay = "0s";
  content3.style.transitionDelay = "0.3s";
}

Source Code

Ref: CSS transform Property , CSS Transitions

The post Create tab layout for website using HTML CSS and JavaScript first appeared on Bipon's Diary.

এই পোস্টে, আমি ব্যাখ্যা করছি যে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কী এবং ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য আপনাকে তিনটিই কেন দরকার।

আমি কিছু ওয়েব ডেভলপমেন্ট ফোরামে স্ক্রোল করার সময় আমি লক্ষ্য করেছি যে একের অধিক লোকের নিম্নলিখিত প্রশ্ন রয়েছে:

ওয়েব অ্যাপ্লিকেশন তৈরি করতে আমাকে কেন তিনটি ভাষা- এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট– শিখতে হবে?

প্রতিটি ভাষা তার নিজস্ব ভূমিকা পালন করে এবং সেখানে তার নিজস্ব নির্দিষ্ট ব্যবহারের ক্ষেত্রে রয়েছে। আমি যথাসম্ভব এর উত্তর দেওয়ার চেষ্টা করব এবং প্রতিটি ভাষা কী করে তা ব্যাখ্যা করব । 

আমি প্রতিটি ভাষার জন্য কীভাবে কোড লিখব সে সম্পর্কে আমি বিশদে যাব না, কারণ ওয়েব ডেভেলপারদের কোনও ওয়েবসাইট প্রোগ্রাম করার জন্য কেন অনেক ভাষাগুলি জানতে হবে তা কেবল এই পোস্টে তা বোঝার জন্য।

এইচটিএমএল

এইচটিএমএল (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজের জন্য সংক্ষিপ্ত) একটি ওয়েবসাইটের কঙ্কাল এবং এটি ওয়েব ব্রাউজারে লোড হওয়া প্রথম জিনিস।

এখানে ডেভেলপার ওয়েবসাইটটিতে কী এলিমেন্ট থাকতে হবে তা নির্ধারণ করে: বোতাম, চিত্র, পাঠ্য, লিঙ্কগুলি, ইত্যাদি । 

এখানে একটি সাধারণ এইচটিএমএল সাইটের উদাহরণ রয়েছে:

এটি কেবল ডিফাইন হবে একটি টাইটেল (ব্রাউজার ট্যাবে প্রদর্শিত হবে), একটি বড় টেক্সট, একটি সামান্য টেক্সট এবং একটি বাটন ।

এখন, এই ওয়েবসাইটটি দেখতে বেশ কুৎসিত দেখাচ্ছে। ব্যবহৃত ফন্টগুলি, ফন্টের আকার এবং রঙগুলি সমস্তই স্বয়ংক্রিয়ভাবে আপনার ওয়েব ব্রাউজারের সরবরাহ করা হয়।

সিএসএস

কিছু ডিজাইন উপরে কুরুচিপূর্ণ সাইটটি দেওয়ার জন্য, আমাদের এইচটিএমএল সাইটে সিএসএস (ক্যাসকেডিং স্টাইল শীট) কোড যুক্ত করা দরকার।

এটি একই HTML ফাইলটিতে করা যেতে পারে বা .css ফাইল থেকে লোড করা যায়। তবে এইচটিএমএলের অভ্যন্তরে সিএসএস লেখাই ভাল অনুশীলন নয়। এর জন্য আপনার সর্বদা একটি আলাদা ফাইল (বা আরও ফাইল) থাকা উচিত।

প্রতিটি সংজ্ঞা আমাদের এইচটিএমএল সাইট থেকে এলিমেন্টগুলির একটি গ্রুপের জন্য প্রযোজ্য। বা প্রথম ব্লকের উদাহরণ হিসাবে, আমরা বড় টাইটেল কেমন দেখাচ্ছে তা পরিবর্তন করি। আমরা এটিকে অন্য একটি রঙ এবং ফন্ট দেব, এটিকে আরও বড় করব, এটিকে একটি আন্ডারলাইন দেব এবং এটি স্ক্রিনকে কেন্দ্র করে তৈরি করব।

সাইটটি এখন আরও ভাল দেখাচ্ছে। তবে এমন শত শত সিএসএস বৈশিষ্ট্য রয়েছে যা সমস্ত বিভিন্ন HTML ট্যাগের জন্য সেট করা যায়। এটি এই ভাষায় আয়ত্ত করা কঠিন করে তোলে এবং সকলেই এতে ভাল নন। তবে বেসিকগুলি শিখতে এবং সামান্য অনুশীলনের মাধ্যমে শালীন কিছু পাওয়া সহজ।

এছাড়াও, অনেকগুলি সিএসএস লাইব্রেরি রয়েছে যা আপনাকে খুব বেশি সিএসএস কোড না জেনে আপনার সাইটকে সুন্দর করে স্টাইল করার ক্ষমতা দেয়। প্রায়শই ব্যবহৃত একটি হ’ল বুটস্ট্র্যাপ। আপনি সুন্দর ফর্ম, বোতাম, পাঠ্য এবং অন্যান্য এলিমেন্ট তৈরি করতে তাদের কোড অ্যাক্সেস করতে পারেন।

জাভাস্ক্রিপ্ট

আমাদের সাইটে এখন একটি কাঠামো এবং স্টাইলিং রয়েছে তবে ফাঙ্কশনালিটি অনুপস্থিত। উদাহরণস্বরূপ, অন্য কোনও ওয়েবসাইট থেকে ডেটা লোড করার সময় কোনও বোতামে ক্লিক করার সময়, ওয়েবসাইটটিতে টেক্সট পরিবর্তন করার সময়, আপনি জাভাস্ক্রিপ্টের সাহায্যে কল্পনাও করতে পারেন । 

এটি একটি আসল প্রোগ্রামিং ল্যাঙ্গুয়েজ যেখানে আপনার ফাংশন, ভেরিয়েবল, অ্যারে এবং অন্যান্য অনেক প্রোগ্রামিং সরঞ্জাম রয়েছে আপনার সাইটের মধ্যে “লজিক” তৈরি করতে।

আপনি কোনও ধরণের ফাঙ্কশনালিটি যুক্ত করতে চাইলে আপনি জাভাস্ক্রিপ্ট ব্যবহার করেন।

এই কোড স্নিপেট শুধুমাত্র একটি খুব সাধারণ ফাংশন যা শিরোনামের শিরোনামটিকে অন্য টেক্সটে পরিবর্তিত করে।

জাভাস্ক্রিপ্ট শেখা আপনার ওয়েব ডেভেলপমেন্টর বেশিরভাগ সময় নেয় কারণ এটি জানার অনেক কিছুই রয়েছে এবং আপনি এটির সাথে করতে পারেন এমন কার্যত সীমাহীন সম্ভাবনা রয়েছে।

এজন্য সাম্প্রতিক বছরগুলিতে এটি এত ব্যাপক জনপ্রিয়। এমন আরও কয়েক মিলিয়ন জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা অন্যরা তৈরি করেছে যে আপনি নিজের প্রজেক্ট ব্যবহার করতে পারেন।

এটিকে আরও জটিল করে তুলতে: আপনি কেবল ব্রাউজারে নয়, সার্ভার-সাইড কোড (বা আপনার কম্পিউটারে স্থানীয়ভাবে চলমান কোড) লিখতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। এটিকে নোড.জেএস বলা হয় । 

আপনি সম্ভবত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যেমন ভিউ, রিএ্যাক্ট, অ্যাঙ্গুলার সম্পর্কে শুনেছেন যা এখনই খুব বেশি চাহিদা রয়েছে ।  এই লাইব্রেরিগুলি যা আপনাকে অ্যাপ্লিকেশনগুলি দ্রুত এবং সহজতর করতে সহায়তা করে। তবে আমি কোনও ফ্রেমওয়ার্ক শিখতে শুরু করার পরামর্শ দেই না। প্রথমে বেসিকগুলি জানার জন্য সময় দেওয়া উচিত।

তিনটি অংশই এক সাথে কাজ করে

আপনার তিনটি ভাষা জানা দরকার কারণ তারা এক সাথে কাজ করে। এইচটিএমএলে আপনি ক্লাস বা আইডি রয়েছে এমন এলিমেন্টগুলি ডিফাইন করতে পারেন, যা আপনি সিএসএস বা জাভাস্ক্রিপ্ট দিয়ে ম্যানিপুলেট করতে পারেন।

আপনি CSS এর সাহায্যে জাভাস্ক্রিপ্ট থেকে স্টাইল পরিবর্তন করতে পারেন। ওয়েবসাইটটি জাভাস্ক্রিপ্ট থেকে চলাকালীন আপনি সিএসএস ক্লাস পরিবর্তন করতে পারেন।

সারাংশ

আপনি যদি ওয়েব ডেভেলপার হয়ে উঠতে গুরুতর হন: হ্যাঁ, আপনাকে এই তিনটি ভাষা এবং আরও শিখতে হবে। আপনি যদি কোনও সার্ভারে চলমান কোডটি লিখতে চান তবে সম্ভবত এটির জন্য আপনার একটি বা অন্য ভাষা শেখার প্রয়োজন হবে (রুবি, পিএইচপি, পাইথন,…)

সংক্ষেপ:

এইচটিএমএল হ’ল কঙ্কাল

সিএসএস হ’ল এটি সুন্দর করে তোলা (কঙ্কালের উপর কাপড় এবং মেকআপ করা )

জাভাস্ক্রিপ্ট ফাঙ্কশনালিটি যুক্ত করে (কঙ্কালের সাথে মুভমেন্ট যোগ করা )

The post নতুনদের জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট first appeared on Bipon's Diary.

সিএসএস কী, কীভাবে সিএসএস লিখতে হয় এবং কীভাবে সেগুলি এইচটিএমএলতে যুক্ত করা যায় সে সম্পর্কে আমাদের নজর থাকবে।

সিএসএস কি?

সিএসএস (ক্যাসকেডিং স্টাইল শীট) ওয়েবপেজগুলি স্টাইল করার জন্য একটি ভাষা। আমরা CSS ব্যবহার করে কোনও ওয়েবপেজের ডিজাইন এবং লেআউট পরিবর্তন করতে পারি। ডেস্কটপ, ট্যাবলেট এবং মোবাইল ডিভাইসগুলির মতো বিভিন্ন স্ক্রিনে কোনও ওয়েবসাইটের ভিউ কীভাবে পরিবর্তিত হয় তা আমরাও নির্ধারণ করতে পারি।

সিএসএস কোনও প্রোগ্রামিং ভাষা নয়, সি ++ বা জাভাস্ক্রিপ্টের মতো। তবে সিএসএস যতটা সহজ মনে হচ্ছে তত সহজ নয়। আপনি যদি না বুঝে এটি ব্যবহার করার চেষ্টা করেন তবে ওয়েব ডেভেলপমেন্টে আপনার অসুবিধা হবে। সুতরাং, প্রোগ্রামিংয়ের ভাষা শেখার মতো সিএসএস শেখাও গুরুত্বপূর্ণ।

আসুন একটি ওয়েবসাইটে সিএসএসের ইফেক্ট প্রকাশ করার জন্য একটি উদাহরণ দিয়ে চালিয়ে দেওয়া যাক। নীচে আপনি দেখতে পাচ্ছেন যে ফেসবুকটি যথারীতি দেখতে (সিএসএস সহ):

এবং আপনি এখানে সিএসএস ছাড়াই ফেসবুকের চেহারা দেখছেন:

আমরা দেখতে পাচ্ছি, সিএসএস একটি ওয়েবসাইটের ভিজ্যুয়াল উপস্থাপনাটিকে আরও ভাল করে তোলে।

সিএসএস সিনটেক্স:

আসুন আমাদের প্রথম সিএসএস কোড লিখি। উদাহরণস্বরূপ, আমি <h1> ট্যাগটির রঙ পরিবর্তন করতে চাই।

I’m a Header

প্রথমত, আমাদের এইচটিএমএল এলিমেন্ট কীভাবে সন্ধান করতে হয় তা সিএসএসকে বলতে হবে । আমরা এটি “সিলেক্টর” নামে একটি বৈশিষ্ট্য দিয়ে করতে পারি । সিএসএসে একটি সিলেক্টর তাদের ট্যাগের নাম, শ্রেণীর নাম, আইডি এবং আরও অনেক কিছু দ্বারা এইচটিএমএল এলিমেন্টগুলি অনুসন্ধান করতে ব্যবহৃত হয়।

সুতরাং নীচে আমি এইচটিএমএল এলিমেন্টের জন্য একটি সিলেক্টর এর ট্যাগ নামের <h1> এর উপর ভিত্তি করে সংজ্ঞায়িত করেছি:

h1 { }  // An example of a selector 

এর পরে, আমরা সিএসএস এর নিয়মগুলি ঘোষণা করতে পারি, সিলেক্টর বন্ধনীগুলির মধ্যে, প্রত্যেকটি একটি অর্ধ-কোলন দিয়ে শেষ হয়:

h1 {   // CSS rules between brackets
  color: red;
} 

সুতরাং সিলেক্টর  (h1) এর উপর ভিত্তি করে সিএসএস এখন বুঝতে পারে নতুন রুলস কোথায় প্রয়োগ করতে হবে:

সিএসএস সিলেক্টর সংজ্ঞায়িত করার বিভিন্ন উপায় রয়েছে, নীচে আপনি সিলেক্টর এর কয়েকটি  উদাহরণ দেখতে পাবেন:

ক্লাস সিলেক্টর(Class Selector) : তাদের ক্লাসের বৈশিষ্ট্য অনুসারে এইচটিএমএল এলিমেন্টগুলি সন্ধান করে

আইডি সিলেক্টর(Id Selector): তাদের নির্দিষ্ট আইডির সাহায্যে এলিমেন্টগুলি সন্ধান করে

এলিমেন্ট সিলেক্টর (Element Selector): তাদের ট্যাগ নাম দ্বারা এলিমেন্টগুলি সন্ধান করে

সিএসএস সিলেক্টর সম্পর্কে আরও জানতে আপনি এখানে পরীক্ষা করতে পারেন।

এইচটিএমএলে সিএসএস কীভাবে যুক্ত করবেন?

সিলেক্টর  কেন এবং কীভাবে ডিফাইন করতে হবে এবং কিছু সিএসএস কোড লিখতে হবে তা এখন আপনি শিখে গেছেন।

আমরা এইচটিএমএল ফাইলে 3 টি বিভিন্ন উপায়ে সিএসএস যুক্ত করতে পারি:

১. এক্সটার্নাল সিএসএস ফাইল:

পৃথক ফাইলে সিএসএস কোড রাখা সেরা অনুশীলন। বাস্তব প্রোগ্রামিং জগতে, আমাদের এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কোড পৃথক ফাইলে রাখা এবং পরে প্রয়োজনের সাথে সেগুলি ইম্পোর্ট করা দরকার।

আমরা .css এর এক্সটেনশান সহ একটি পৃথক সিএসএস ফাইল তৈরি করতে এবং এটি HTML এ অন্তর্ভুক্ত করতে পারি।

উদাহরণস্বরূপ, আমরা এটির মতো একটি সিএসএস ফাইল তৈরি করতে পারি: index.css

ইনডেক্স কোডের (index.css) ভিতরে, আমরা আমাদের সিএসএস কোড লিখতে পারি:

p {  
  color: red;
}

তারপরে আমরা নীচের মতো <লিঙ্ক> ট্যাগ দিয়ে সূচি.এসএসটিএমএল ইম্পোর্ট করতে পারি:

সুতরাং এখন এইচটিএমএল ফাইলের সিএসএস কোড রয়েছে এবং পরিবর্তনগুলি এলিমেন্টগুলির জন্য প্রযোজ্য হবে।

2. <স্টাইল> ট্যাগ সহ ইন্টারনাল সিএসএস:

আর একটি উপায় যেখানে আপনি সিএসএস কোড লিখতে পারেন তা HTML এ <স্টাইল> ট্যাগের মধ্যে। এটি সিএসএস কোডটি পৃথক ফাইলের চেয়ে সরাসরি এইচটিএমএল ফাইলের অভ্যন্তরে রাখবে।

৩. ইনলাইন স্টাইল:

তৃতীয় উপায়টি হল সিএসএস রুলস ডাইরেক্টলি কোনও এইচটিএমএল এলিমেন্টের অভ্যন্তরে লিখা। এই পদ্ধতিতে আমরা সিএসএসের নিয়মগুলি সরাসরি ট্যাগের মধ্যেই সংজ্ঞায়িত করি এবং এর জন্য কোনও ক্লাস তৈরি করার দরকার নেই।

<p style=”color: blue; font-size: 22px;”> I’m a Simple man </p>

সিএসএস ওয়েব ডেভলপমেন্টের একটি প্রয়োজনীয় অংশ। এই আর্টিকেলে, আমি সিএসএসের খুব প্রাথমিক ব্যবহার এবং সিনটেক্স ব্যাখ্যা করার চেষ্টা করেছি। আপনার যদি কোনও প্রশ্ন থাকে তবে নীচে মন্তব্য বিভাগে জিজ্ঞাসা করতে দ্বিধা করবেন না।

সিএসএসের বিশ্বে এক্সপ্লোর করার জন্য আরও অনেকগুলি বিধি এবং বৈশিষ্ট্য রয়েছে। আমি আমার নিম্নলিখিত আর্টিকেলে সেগুলি কভার করব।

আপনাকে অনেক ধন্যবাদ আর্টিকেলটি পড়ার জন্য । ভাল থাকবেন এবং পরিবারকে সময় দিবেন ।

The post নতুনদের জন্য সিএসএস: সিএসএস কী এবং ওয়েব ডেভেলপমেন্টে এটি কীভাবে ব্যবহার করতে হয়? first appeared on Bipon's Diary.