সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

12
486
“বিসমিল্লাহির রাহমানির রাহিম “

আমি আজ আবার আপনাদের মাঝে ফিরে আসলাম । আপনারা সবাই কেমন আছেন । আল্লাহ্‌র রহমতে নিশ্চয় ভাল । আজ আমি আপনাদের কাছে নিয়ে এসেছি আমার ধারাবাহিক টিউটোরিয়াল সি এস এস /css (cascading style sheet) শিখুনঃ পর্ব- ৫  । আপনারা যারা আমার সাথে নতুন জয়েন করেছেন তারা অবশ্যই আমার সহজ বাংলায় সি এস এস শিখুন টিউটোরিয়াল এর আগের পর্ব গুলো দেখে নিবেন দেরি না করে । আপনাদের সুবিধার জন্য  সি এস এস শিখুন ধারাবাহিক টিউটোরিয়াল এর লিংক আপনাকে নিন্মে প্রদান করা হল :-

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

^^^^^^^  সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব-১ ^^^^^^^
 %%%%%% সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব-২ %%%%%
!!!!!!!!সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব-৩ !!!!!!!!!
~~~~~~~সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব-৪ ~~~~~~~
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

আসুন তাহলে আজকের ক্লাস শুরু করা যাক । আজকের ক্লাসের নাম হচ্ছে CSS TEXT . আজ আমি আপনাদের দেখব কি করে সি এস এস টেক্সট প্রপার্টিজের মাধ্যমে কিভাবে পেজে টেক্সট লিখবেন । তাহলে শুরু করা যাক ………

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫CSS TEXT ( সি এস এস টেক্সট )

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫টেক্সট কালার (text color)

  কালার প্রপার্টি ব্যবহার হবে পেজের কালার নির্ধারণে । কালার কে তিনটি উপায়ে সেট করা যায়ঃ –

  1. কালার এর নির্দিষ্ট নাম অনুযায়ী । যেমনঃ blue
  2. RGBযা একটি  কালারের RGB ভ্যালু নির্ধারণ করে । যেমনঃ ” rgb(255,o,o)
  3. Hex যা একটি কালারের ভ্যালু নির্ধারণ করে ।যেমনঃ “#ffoooo” ।

আপনাকে প্রথমে পেজের জন্য একটি ডিফল্ট বডি সিলেক্টরে নির্ধারণ করে দিতে হবে । যেমনঃ

body{color:red}

h1{color:#ooffoo}

h4{color:rgb(255,0,0)

কি কিছুই বুজলেন না দাঁড়ান এখনই সব বুঝতে পারবেন ।

  • নোটপ্যাড খুলুন
  • নিচের কোড গুলো লিখুন
<p>
<html> 
 <head>
 <style type="text/css">  
body  {color:CadetBlue;}  
 h1 {color:#B8860B;} 
 p.tt {color:rgb(72,61,139);} 
 </style>   </head>  
<body>   
<h1>Happiness is the meaning and the purpose of life, the whole aim and end of human existence." - Aristotle</h1>  
<p> "Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful." - Albert Schweitzer</p>  
<p class="tt">"What progress, you ask, have I made? I have begun to be a friend to myself." - Hecato</p> 
 </body>
 </html>
</p>

 

  •  বলুন তো আমি এই কালার কোড এবং rgb কোড গুলো কোথায় থেকে সংগ্রহ করলাম ;) একটু চিন্তা করেন পেয়ে যাবেন কি পেলেন না  আমি আপনাদের গত পড়বে একটি ওয়েব সাইডের লিংক দিয়েছিলাম সেখান থেকে নিয়ে নিয়েছি আপনারাও একটু কষ্ট করে নিয়ে নিবেন ।
  • p.tt এর অর্থ নিশ্চয় চিন্তা করছেন এটি শুধু মাত্র এইচটিএমএল এর সাথে সি এস এস এর লিংক স্থাপন করেছে মানে আপনি ইচ্ছা করলে tt জায়গায় tb ,fr কিংবা আপনার মনমত যে কোন ট্যাগ ব্যবহার করতে পারবেন
  • দেখুন তো আপনার পেজের লিখা গুলো এরূপ হয়েছে কিনাঃ

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫টেক্সট অ্যালাইনমেন্ট  (text alignment)

text align প্রোপার্টি ব্যবহার হয় কোন পেজের হরাইজন্টাল  অ্যালাইনমেন্ট সেট করার জন্য ।টেক্সট কে ডানে ,বামে কিংবা মাঝখান থেকে অ্যালাইন করার পাশাপাশি জাস্টিফাইড অ্যালাইনও নির্ধারণ করা যায়

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

    • নোটপ্যাড খুলুন
    • নিচের কোড গুলো লিখুন
<p>
<html>  
 <head>
  <style type="text/css">
  h1 {text-align:center;}
  p.date {text-align:right;} 
  p.main {text-align:AlbertEinstein;} 
  </style>
  </head> 
 <body> 
 <h1> "These thoughts did not come in any verbal formulation. I rarely think in words at all. A thought comes, and I may try to express it in words afterward". - Albert Einstein -</h1>
  <p class="date">january, 2050</p>
 <p class="main">"I think and think for months and years. Ninety-nine times, the conclusion is false. The hundredth time I am right." - Albert Einste</p> 
 <p><b>Note:</b>The human mind has first to construct forms, independently, before we can find them in things." - Albert Einstein</p>
 </body> 
 </html>
</p>
  • আমার পেজটি এরূপ এসেছে দেখুনতো আপনার পেজটি কি রুপ এসেছে । দেখুন আমি প্রথম লেখাটি center এ কারন আমি সেট করেছি সেন্টারে । আপনি ইচ্ছা করলে এটি বামে কিংবা

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫


সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫


টেক্সট ডেকারেসন(text decaration)

টেক্সট থেকে সেট করতে কিংবা ডেকারেশন সরিয়ে ফেলতে টেক্সট ডেকারেশন ব্যবহার হয় । টেক্সট ডেকারেসন বেসির ভাগ ক্ষেত্রে ডিজাইনের থেকে আন্ডার লাইন সরিয়ে দিতে ব্যবহার করা হয় ।

যেমনঃ a{text-decoration:none}

তাহলে আর কথা না বাড়িয়ে দেখি এটি দ্বারা কিভাবে কাজ করা যায় ।

    • নোটপ্যাড খুলুন
    • নিচের কোড গুলো লিখুন

<html>
      <head>
            <style type=”text/css”>
                  a {text-decoration:none;}
                 h4 {text-decoration:overline;}
                  h2 {text-decoration:line-through;}
                  h3 {text-decoration:underline;}
                  h1 {text-decoration:blink;}
              </style>
       </head>

<body>
                          <p>Link to: <a href=”http://www.tunerpage.com/”>www.tunerpage.com</a></p>
                          <h4>”Gravitation is not responsible for people falling in love.” – Albert Einstein</h4>
                           <h2>”Only a life lived for others is a life worthwhile.” – Albert Einstein</h2>
                           <h3>”Poverty is the parent of revolution and crime.” – Aristotle</h3>
                           <h1>TAL PATAR SIPAHI</h1>
                    </body>

</html>

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

 সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫ টেক্সট ট্রান্সফরমেশন(text transformation)

টেক্সটের ভিতর আপারকেস ও লোয়ারকেস অক্ষর নির্ধারণ করতেtext transformation ব্যবহার হয় ।এটি ব্যবহার করে পুরো টেক্সট আপারকেস ও লোয়ারকেস অক্ষরে কিংবা প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের লেখায় পরিণত করা যায় ।

তাহলে দেখি এটি কি ভাবে কাজ করে ।

    • নোটপ্যাড খুলুন
    • নিচের কোড গুলো লিখুন

    <html>
         <head>
                <style type=”text/css”>
                       h1.uppercase {text-transform:uppercase;}
                       h2.lowercase {text-transform:lowercase;}
                       h3.capitalize {text-transform:capitalize;}
                  </style>
           </head>

                     <body>
                              <h1>”Wit is educated insolence.” – Aristotle</h1>
                              <h2>”A friend is a second self.” – Aristotl</h2>
                                <h3>”Happiness depends upon ourselves.” – Aristotle</h3>
                     </body>
    </html>

  • ফাইলটি সেভ করুন যেকন একটি নির্দিষ্ট নামে অবশ্যই মনে রাখবেন যে নামের শেষে অবশ্যই .html লেখাটি লিখবেন ।তাহলে দেখুন তো আপনি ফাইলটি সঠিক রূপে তৈরি করতে পারেন কিনা ।

 

 

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

 

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫ টেক্সট ইন্ডেন্টেশন(text indentation)

টেক্সটের প্রথম লাইনটির ইন্ডেন্টেশন নির্ধারণ করতে text indentation ব্যবহার হয় ।আসুন তাহলে এটির ব্যবহার দেখি।

যেমনঃ p {text-indent:50px;}

  • নোডপ্যাড খুলুন
  • নিচের মত করে কোড লিখুন

<html>
       <head>
               <style type=”text/css”>
                    p {text-indent:200px;}
                </style>
         </head>
                  <body>

                        <p>”Our wretched species is so made that those who walk on the well-trodden path always throw stones at those who are showing a new road.” – Voltaire</p>

                 </body>
</html>

  • একটি জিনিস খেয়াল করুন যে আপনি পিক্সেলের মাধ্যমে আপনি ঠিক করবেন আপনার ফাইলটির প্রথম ফাইলের দূরত্ব কতটুকু হবে ।দেখুন তো আপনারটি এ রকম হয়েছে কিনা ।

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

 

 

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫ক্যারেক্টারসমূহের মধ্যকার স্পেস নির্ধারণ

এটি দ্বারা আমরা শিখবো কি করে টেক্সটের মধ্যের ক্যারেক্টারসমূহের  স্পেস বাড়ানো কমানো যায় ।তাহলে দেখা যাক ।

  • নোড প্যাড খুলুন
  • নিচের মত করে কোড লিখুন

<html>
     <head>
            <style type=”text/css”>
                 h1 {letter-spacing:5px;}
                 h2 {letter-spacing:-5px;}
            </style>
     </head>

                 <body>
                      <h1>”Prejudice is opinion without judgement.” – Voltaire</h1>
                        <h2>”Anything too stupid to be said is sung.” – Voltaire</h2>
                 </body>

</html>

  • দেখুন তো আপনার ফাইলটি আমার টির মত হয়েছে কিনা ।

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

 

  • দেখুন আমার প্রথম লাইনটির মধ্যে স্পেস বেশি রাখা হয়েছে ।
  • এবং ২য় লাইনটির মধ্যে স্পেস একেবারে নেই কারন আমি px এর আগে (-) ব্যবহার করেছি ।
সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫প্যারাগ্রাফের শব্দ সমূহের মধ্যকার হোয়াইট স্পেস বৃদ্ধি করা

এটি দ্বারা আমরা দেখব আমরা কিভাবে প্যারাগ্রাফের হোয়াইট স্পেস বৃদ্ধি করতে পারি ।তাহলে শুরু করা যাক।

  • নোড প্যাড খুলুন
  • নিচের কোড গুলো লিখুন
<html>
 <head>
 <style type="text/css">
 p
 {
 word-spacing:70px;
 }
 </style>
 </head>

 <body>
<p>"Just as a candle cannot burn without fire, men cannot live without a spiritual life" - Buddha</p>
 </body>
</html>
  • দেখুনতো আপনারটি কিরুপ হয়েছে ।

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫ইমেজ ভারটিক্যাল অ্যালাইমেন্ট নির্ধারণ করা

এটির মাধ্যমে ইমেজের ভারটিক্যাল অ্যালাইমেন্ট সেট করতে পারব । আসুন তাহলে দেখি কিভাবে করা যায় ।

  • নোডপ্যাড খুলুন
  • নিচের কোড গুলো লিখুন
<html>
 <head>
 <style type="text/css">
 img.top{vertical-align:text-top}
 img.super{vertical-align:super}
 </style>
 </head>

 <body>
 <p>"If you want to live a happy life, tie it to a goal, not to people or things." - Albert Einstein<img src="author_einstein.jpg" alt="tal patar sipahi" width="162" height="227"/>
 <p>Albert Einstein<img src="author_einstein.jpg" alt="tal patar sipahi" width="162" height="227"/>"Imagination is everything. It is the preview of life's coming attractions" - Albert Einstein/p>
 </body>
</html>
  • দেখুন তো আপনার ইমেজটি সঠিক ভাবে দেখা যাচ্ছে কিনা । আমারটি তো দারুন দেখাচ্ছে দেখুন।

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

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

 

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

12 মন্তব্য

  1. অনেক দারুন হয়েছে। অনেক কষ্ট করেছেন বুঝাই যায়। ধন্যবাদ।

  2. চমত্কার পোস্ট ভাই ,যথেষ্ট কষ্ট করেছেন বুঝাই যায়।আরো লেখা আশা করছি , ধন্যবাদ ।

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

15 − 6 =