What is CSS(HTML) Describe in Bengali

-

 




CSS একটি কম্পিউটার এর ওয়েব ব্রাউজার ভিত্তিক ভাষা যার পূর্ণরূপ হলো Cascading Style Sheets. এটি দিয়ে একটি ওয়েব পেজে ব্যবহৃত HTML এর বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি কিভাবে ওয়েব ব্রাউজারে প্রদর্শন করবেন তা সহজে নির্ধারণ করতে পারবেন। সবচেয়ে গুরুত্বপূর্ণ বিষয়টি হল CSS এর মাধ্যমে আপনি ভিন্ন ভিন্ন ডিভাইসে একটি ওয়েব পেজকে প্রতিটি ডিভাইস এর সাইজ অনুযায়ী সুন্দরভাবে উপস্থাপন করতে পারবেন।

CSS Selector কি?

আপনি যে HTML Element কে Style করতে চান, সেই Element এর নাম বা tag, Id এবং class কে CSS Selector বলা হয়। সহজ কথায় যার উপর CSS style প্রয়োগ হবে, তাকে CSS Selector বলা হয়। আর সে গুলো হচ্ছে যথাক্রমে Element এর নাম বা tag, Id এবং class.

CSS এর Syntax কি?

Web Page এ CSS প্রয়োগ করার পদ্ধতিকে বলা হয় CSS Syntax. CSS Syntax এর দুটি অংশ আছে। একটি হচ্ছে Selector অংশ আর অন্যটি হচ্ছে Declerationঅংশ। আর declaration অংশ আবার দুইভাবে বিভক্ত ,প্রথম অংশ হচ্ছে property আর সেমিকোলন (:) এর পরের অংশকে বলা হয় property value. চলুন নিচের উদাহরণ দিয়ে ব্যাপারটা ভালো ভাবে বুঝে নেয়া যাক :



CSS Syntax

চলুন CSS Syntax এর আরো কিছু বিষয় জানা যাক :

  • CSS এ এক বা একাধিক Declerationব্লক থাকতে পারে। একের অধিক Declerationব্লককে সেমিকোলনের (:) মাধ্যমে পৃথক করা হয়।
  • প্রতিটি Declerationব্লকে একটি CSS Property এর নাম ও একটি ভ্যালু থাকে এবং কোলনের মাধ্যমে এদেরকে পৃথক করা হয়।
  • প্রতিটি সিএসএস Declerationব্লক সর্বদাই সেমিকোলনের মাধ্যমে শেষ হয় এবং ডিক্লেয়ারেশন ব্লক/ব্লকসমূহ Curly Braces(দ্বিতীয় বন্ধনী) দ্বারা বেষ্টিত থাকে।

Web Page এ CSS ব্যবহার করার পদ্ধতি কি?

Web Page এ CSS ব্যবহার করার চারটি উপায় রয়েছেঃ

  • Inline CSS
  • Inpage CSS
  • Internal CSS
  • External CSS

Inline CSS কি?

সরাসরি Tag এর মধ্যে style attribute এর মধ্যে যেই CSS লেখা হয় তাকে Inline CSS বলা হয়। চলুন উদাহরণ দিয়ে বুঝে নেয়া যাক:

01

02

03

04

05

06

07

08

09

10

<!DOCTYPEhtml>

<html>

   <head>

      <title>CSS Inline Example</title>

   </head>

   <body>

      <h3style="ctext-align:center;">This is an Inline CSS example</h3>

      This is an another Inline CSS

   </body>

</html>

Output



This is an Inline CSS example

This is an another Inline CSS


Inpage CSS কি?

pageএর মধ্যে যেকোনো জায়গায় (বেশির ভাগ ক্ষেত্রেই<head>এর মধ্যে হয়ে থাকে )<style></style> tag এর মধ্যে যেই CSS লেখা হয় তাকে Inpage CSS বলা হয়। চলুন উদাহরণ দিয়ে বুঝে নেয়া যাক:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

<!DOCTYPEhtml>

<html>

<head>

   <title>Inpage CSS Example</title>

   <style>

      body{

         background-color: #87CEEB;

         color: #fff;

      }

   </style>

</head>

<body>

   <h2>Inpage CSS Example</h2>

   This is an InPage CSS Example

</body>

</html>

</html>

Output


 


 

 

 

Internal CSS কি?

একই সার্ভারের মধ্যে অর্থাৎআপনারhtml file টি যেই সার্ভারে আছে সেই সার্ভারের মধ্যে .css extension যুক্ত কোনো file এ যেই css style যুক্ত করা হয় তাকে Internal CSS বলা হয়। Internal CSS কে<link href=”internalCSSFile.css” >দিয়ে লিংক করতে হয়। চলুন একটা উদাহরণ দিয়ে বুঝে নেয়া যাক :

01

02

03

04

05

06

07

08

09

10

11

<!DOCTYPEhtml>

<html>

   <head>

      <title>CSS Internal Example</title>

        <linkrel="stylesheet"type="text/css"href="style.css">

   </head>

   <body>

      <h2>Internal CSS Example</h2>

      This is an Internal CSS Example

   </body>

</html>

এখানে “style.css” কেমন হবে তা দেখানো হলোঃ

1

2

3

4

5

6

7

8

9

h2{

  color:blue;

}

p{

  color:white;

}

body{

  background-color: #DA90DA;

}

Output





External CSS কি?

External CSS অনেকটা Internal CSS এর মতোই শুধু পার্থক্য হচ্ছে একই সার্ভারের পরিবর্তে ভিন্ন কোনো সার্ভারের মধ্যে অর্থাৎআপনারhtml file টি যেই সার্ভারে আছে সেই সার্ভারের বাহিরে .css extension যুক্ত কোনো file যখন যুক্ত করা হয় তাকে External CSS বলা হয়। External CSS কেও<link href=”externalWebSite/ExternalCSSFile.css” >দিয়ে লিংক করতে হয়। চলুন একটা উদাহরণ দিয়ে বুঝে নেয়া যাক :

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPEhtml>

<html>

<head>

   <title>External CSS</title>

   <linkrel="stylesheet"href="Study Life (webeduadda.blogspot.com)"crossorigin="anonymous">

</head>

<body>

   <tableclass="table table bordered table hover table-striped table-condensed table-dark">

   <tr>

      <td>One</td>

      <td>Two</td>

      <td>Three</td>

   </tr>

   <tr>

      <td>Four</td>

      <td>Five</td>

      <td>Six</td>

   </tr>

   <tr>

      <td>Seven</td>

      <td>Eight</td>

      <td>Nine</td>

   </tr>

   <tr>

      <td>Ten</td>

      <td>Eleven</td>

      <td>Twelve</td>

   </tr>

</table>

</body>

</html>

Output





Comments

Post a Comment

Popular posts from this blog

Computer MCQ Part 4 (151-200)

-
Image
 Computer MCQ for Practice 151. CorelDraw is a ______ based drawing application package. a) Photo paint b) Bitmap c) Vector d) Scalar Answer: C 152. ______tool removes overlapping segments in the objects. a) Knife b) Crop Tool c) Virtual Segment Tool d) Eraser Answer: C 153. Which submenu convert the .cdr file in .jpeg format? a) import b) filter c) export d) text Answer: C 154. Apply add perspective from ________ menu. a) Effects b) File c) Help d) Window Answer: A 155. Where we from insert the 'insert character' ? a) File b) Edit c) View d) Text Answer: D 156. CorelDraw is a ______ type of graphics software? a) Raster graphics b) Vector graphics c) Both of these d) None of these Answer: B 157. Shortcut key of zoom to page_______ a) Shift + F2 b) Shift + F3 c) Shift + F4 d) Shift + F5 Answer: C 158. Zoom to all objects, use_______ a) Shift + F2 b) F2 c) F4 d) F3 Answer: C 159. What is the shortcut key to align selected objects to the bot...
Read more

Computer Mcq Part 1 (1-50)

-
Image
 MCQ ABOUT COMPUTER FROM 1 TO 50 1. An Optical Input Device that interprets pencil marks on paper media is______ a) O.M.R b) Punch card reader c) Optical scanners d) Magnetic tape Answer: A 2. A Billionth of a second is defined as a______ a) Millisecond b) Microsecond c) Nanosecond d) Picoseconds Answer: C 3. CD-ROM stands for______ a) Compactable Read Only Memory b) Compact Data Read Only Memory c) Compactable Disk Read Only Memory d) Compact Disk Read Only Memory Answer: D 4. The Name box on to the left of formula bar______ a) shows the name of workbook currently working on b) shows the name of worksheet currently working on c) shows the name of cell or range currently working on d) None of above Answer: C 5. By Formatting a cell in Currency format, you can specify ? a) Decimal Places  b) Currency Symbol c) Both 1 and 2 Options d) None of above  Answer: C 6. The slide that is used to introduce a topic and set the tone for the presentat...
Read more

Computer MCQ Part 3 (101-150)

-
Image
 ALL ABOUT COMPUTER MCQ 101. Which command brings you to the first slide in your presentation? a) Next slide button b) Page up c) Ctrl + Home d) Ctrl + End Answer: C 102. Which file starts MS Word? a) Winword.exe b) word.exe c) word2003.exe d) 2007.exe Answer: A 103. Which is not a computer classification? a) Mainframe b) Maxframe c) Mini d) Notebook Answer: B 104. Which language is directly understood by the computer without translation program? a) Machine language b) Assembly language c) High level language d) None of above Answer: A 105. Which menu provides you options like Animation Scheme, custom Animation, Slide Transition? a) Insert Menu b) Format Menu c) Tools Menu d) Slide Show Menu Answer: D 106. Which of the following features should you use while typing in the notes text box? a) Slide show  b) Insert c) Slide maser d) Zoom Answer: D 107. Which of the following is internal memory? a) Disks b) Pen Drives c) RAM d) CDs An...
Read more