সিএসএস প্যাডিং টিউটোরিয়াল (CSS Padding)

0
20
css
css

সিএসএস প্যাডিং ব্যবহার করে আপনি এইচটিএমএল এলিমেন্ট (paragraphs, tables ইত্যাদি ) এর  default প্যাডিং  পরিবর্তন করতে পারেন। আর  প্যাডিং বলতে বোঝায় এলিমেন্ট এর  border এবং তার content  এর মধ্যের অংশকে।

1.p {padding: 15px; border: 1px solid black; }
2.h5{padding: 0px; border: 1px solid red;}

This is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left.

This header has no padding, which places the text right against the border!

সিএসএসপ্যাডিং: 1 Value

1 Value বিশিষ্ট প্যাডিং সকল (top, right, bottom, left.) পাশে uniform padding  তৈরী করে।

1.p {padding: 2%; border: 1px solid black; }
2.h5{padding: 0px; border: 1px solid red;}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a paragraph that has a padding of 5 pixels on every side: left, top, right, and bottom.

This header has no প্যাডিং. It is only spaced away from the paragraph because the paragraph has a প্যাডিং of 5 pixels!

সিএসএসপ্যাডিং: padding-(direction):

প্রত্যেক  এইচটিএমএল এলিমেন্ট এর প্রকৃতপক্ষে চারটি ভিন্ন প্যাডিং থাকে যেমন top, right, bottom, এবং left । প্যাডিং direction  attribute এর মাধ্যমে পৃথক পৃথক প্যাডিং নির্দেশ করা যায়। এক direction (যেমন -left) এ নির্দেশ করলে অন্যগুলো অপরিবর্তিত থাকে।

p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph had one padding specified(left), using directional declaration.

This header had each padding specified separately, using directional declaration.

সিএসএসপ্যাডিং: 2 & 4 Values

যখন আমরা দুইটি প্যাডিং Value ব্যবহার করবো তখন প্রথম Value টি top এবং bottom প্যাডিং Value নির্দেশ করবে এবং দ্বিতীয়  Value টি  left and right প্যাডিং Value নির্দেশ করবে। মনে রাখতে হবে সাধারনত প্যাডিং Value টি  top দিয়ে শুরু হয় এবং clockwise ভাবে এটি left  এ শেষ হয়। প্যাডিং Value  এর ধারাবাহিকতা হল top, right, bottom এবং left ।

1.p {
2.padding: 5px 15px;
3.border: 1px solid black;
4.}
5.h5{
6.padding: 0px 5px 10px 3px;
7.border: 1px solid red;
8.}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph has a top and bottom padding of 5 pixels and a right and left padding of 15 pixels.

This header has a top padding of 0 pixels, a right padding of 5 pixels, a bottom padding of 10 pixels, and a left padding of 3 pixels.

সিএসএস Margin:

সিএসএস Margins  প্রায় সিএসএস প্যাডিং attribute এর মত। শুধু একটা গুরুত্বপূর্ন পাথর্ক্য হচ্ছে:Margin বলতে এইচটিএমএল এলিমেন্ট এর border এর  চারপাশের অংশকে বোঝায় আর প্যাডিং  বলতে border এর ভিতরের অংশকে বোঝায়। প্যাডিং এর মত Margin এর Value সেট করা যায়।

1.p {margin: 5px; border: 1px solid black; }
2.h5{margin: 0px; border: 1px solid red;}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a paragraph that has a margin of 2% on every side: top, right, bottom, and left.

This header has a margin of 5 pixels.

সিএসএস Margin: 1 Value

এটা সিএসএস প্যাডিং: 1 Value এর মত

1.<b> </b>
2.p {margin: 2%; border: 1px solid black; }
3.h5{margin: 0px; border: 1px solid red;}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a paragraph that has a margin of 2% on every side: top, right, bottom, and left.

This header has a margin of 5 pixels.

সিএসএস Margin: margin-(direction):

এটা সিএসএস প্যাডিং: padding-(direction) এর মত ।

1.p { margin-left: 5px; border: 1px solid black; }
2.h5{ margin-top: 0px;
3.margin-right: 2px;
4.margin-bottom: 13px;
5.margin-left: 21px;
6.border: 1px solid red; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph had one margin specified (left), using directional declaration. Note that there is still a margin below and above this paragraph. This is because our CSS only replaced one of the four margins, which didn’t effect the top and bottom margins.

This header had each margin specified separately, using directional declaration.

সিএসএস Margin: 4 Values

এটা সিএসএস প্যাডিং: 2 & 4 Values এর মত ।

1.p {margin: 5px 15px;
2.border: 1px solid black; }
3.h5{margin: 0px 5px 10px 3px;
4.border: 1px solid red;}

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph has a top and bottom margin of 5 pixels and a right and left margin of 15 pixels.

This header has a top margin of 0 pixels, a right margin of 5 pixels, a bottom margin of 10 pixels, and a left margin of 3 pixels.

সিএসএস বর্ডার টিউটোরিয়াল (CSS Border)

এইচটিএমএল এলিমেন্টs এর চারপাশে যে বর্ডার দেখা যায় তা সিএসএস বর্ডার এর মাধ্যমে সম্পুর্নভাবে customize করা যায়। সিএসএস বর্ডার এর মাধ্যমে বর্ডার এর স্টাইল পরিবর্তন করা যায়।

বর্ডার Style Types:

অসংখ্য প্রকারের বর্ডার Style রয়েছে যা আপনি আপনার পছন্দমত বিভিন্ন ধরনের বর্ডার তৈরী করতে পারেন।

এই টিউটোরিয়ালে সিএসএস ক্লাস ব্যবহার করেছি,ক্লাস সমন্ধে জনা না থাকলে আগে আমাদের সিএসএস ক্লাস টিউটোরিয়ালটি পরে আসুন। http://www.webcoachbd.com/css-tutorials/css-class

01.p.solid {border-style: solid; }
02.p.double {border-style: double; }
03.p.groove {border-style: groove; }
04.p.dotted {border-style: dotted; }
05.p.dashed {border-style: dashed; }
06.p.inset {border-style: inset; }
07.p.outset {border-style: outset; }
08.p.ridge {border-style: ridge; }
09.p.hidden {border-style: hidden; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a solid border

This is a double border

This is a grooved border

This is a dotted border

This is a dashed border

This is an inset border

This is an outset border

This is a ridged border

This is a hidden বর্ডার

বর্ডার Width:

বর্ডার-width attribute এর সাহায্যে বর্ডার এর পুরুত্ব পরিবর্তন করা যায়। বিভিন্ন key terms বা ভেলু দিয়ে বর্ডার-width নির্দিষ্ট করা যায়। বিভিন্ন term ব্যবহার করা যেতে পারে যেমন thin, medium, thick ইত্যাদি।

1.table { border-width: 7px;
2.border-style: outset; }
3.td { border-width: medium;
4.border-style: outset; }
5.p { border-width: thick;
6.border-style: solid; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This table has an outset border with a width of 7 pixels.
Each cell has an outset border with a “medium” width.

This paragraph has a solid border with a “thick” width.

বর্ডার Color:

border-color attribute এর মাধ্যমে আপনি পছন্দমত color combination করে বর্ডারকে দৃষ্টি নন্দন করে তুলতে পারেন।

01.table { border-color: rgb( 100, 100, 255);
02.border-style: dashed; }
03.
04.
05.td { border-color: #FFBD32;
06.border-style: ridge; }
07.
08.
09.p { border-color: blue;
10.border-style: solid; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

This table has a dashed border with the RGB value ( 100, 100, 255).
Each cell has a ridged border with a hexadecimal color of #FFBD32.

This paragraph has a double border with a color of “blue”.

সিএসএস লিস্ট টিউটোরিয়াল (CSS List)

লিস্টs  মুলত দুই প্রকার যথা:  unordered এবং  ordered ।সিএসএস দিয়ে লিস্ট কে এইচটিএমএল হতে অনেক বেশি customize করা যায়। এমনকি image  কে bullet points হিসাবে unordered লিস্ট এর জন্য ব্যবহার করা যায়।

সিএসএসলিস্ট Style Type:

আপনি যদি default number এর ordered লিস্ট বা unordered লিস্ট এর  bullets/discs হতে ভিন্ন স্টাইল ব্যবহার  করতে চান তাহলে আপনি লিস্ট এর জন্য  বিভিন্ন ধরনের স্টাইল ব্যবহার করতে  পারেন। নিচে বিভিন্ন স্টাইল দেয়া হলো:

১. Unordered list styles: square, circle, disc (default), এবং none ।

২.  Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), এবং  none ।

1.ol { list-style-type: upper-roman; }
2.ul { list-style-type: circle; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

Here is an ordered list:

  • This list is
  • using roman
  • numerals
  • with CSS!

and now an unordered list:

  1. This list is
  2. using circle types
  3. with CSS!

সিএসএস লিস্ট ইমেজের সাথে:

আমরা আগেই বলেছি  normal bullet এর পরিবর্তে image  কে  ব্যবহার করা যায়।

1.ul { list-style-image: url("listArrow.gif"); }
2.ol { list-style-image: url("listArrow2.gif"); }

প্রদর্শন:

(নোট প্যাডে দেখুন)

Here is an unordered list:

  • This list is
  • using a picture with CSS!

and now an ordered list:

  1. This list is
  2. using a picture
  3. with CSS!

সবচেয়ে ভাল হয় Unordered লিস্ট  এর ক্ষেত্রে  image  কে ব্যবহার করা।

সিএসএসলিস্ট Position:

list-style-position এর ভেলু  inside দিলে তখন লিস্টগুলো মার্জিন হতে ভিতরের দিকে থাকবে আর Outside দিলে normal লিস্ট Position এ থাকবে। Outside ভেলুটি একটি default setting ।

1.ul { list-style-position: inside; }
2.ol { list-style-position: outside; }

প্রদর্শন:

(নোট প্যাডে দেখুন)

  • This list is
  • using inside
  • positioning with CSS!

and now an ordered list:

  1. This list is
  2. using outside
  3. positioning with CSS!

লিস্ট:সব একটাতে

এই  list-style-type এর মাধ্যমে এমন একটা ব্যবস্থা করা যায় যখন আপনার list-style image লোড নিবে না তখন অন্য list-style দেখাবে।

1.ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}

প্রদর্শন:

(নোট প্যাডে দেখুন)

  • This list’s image did
  • NOT load correctly
  • But because we chose to include
  • A CSS list type, we avoided a bland list!

সিএসএস লিংক টিউটোরিয়াল (Pseudo Class)

সিএসএস এর মাধ্যমে এনকর ট্যাগ বা  লিংকে এ আমরা ইফেক্ট যোগ করতে পারি।

সিএসএস এনকর/লিংক অবস্থা:

আপনি কি জানেন  লিংক এর চারটি ভিন্ন অবস্থা আছে। সিএসএস এর মাধ্যমে প্রতিটি অবস্থাকে    customize করা যায়। নিচের keyword গুলো আলাদা অবস্থা নির্দেশ করে।

link –এটি একটি লিংক যেটি ব্যবহার হয়নি ।

visited – এটি একটি লিংক যা পূর্বে ব্যবহার হয়েছে কিন্তূ লিংকের ঊপর mouse রাখা হয়নি।

hover – এটি একটি লিংক যার ঊপর মাউস রাখার সাথে সাথে visual ইফেক্ট দেখাবে।

active – এটি একটি লিংক যেটা বর্তমানে সক্রিয় আছে

সিএসএস Pseudo-Classes:

সিএসএস Pseudo-Classe এর মাধ্যমে আমরা  সিএসএস লিংক এর চারটি অবস্থাকে(state)modify করতে পারি।

1.a:(STATE'S NAME) { attribute: value; }

state বা অবস্থার নাম হল pseudo class যা এইচটিএমএল এলিমেন্ট দেখতে কেমন হবে তা নির্দেশ করে। link, visited এবং hover এই order মেনে চললে আমরা সঠিকভাবে কার্যকর সিএসএস লিংক তৈরী করতে পারবো।

1.a:link { color: red; }
2.a:visited { color: red; }
3.a:hover { color: blue; }
1.<a href="/">This is a special CSS Link</a>!

প্রদর্শন:

মাউস রাখার আগে

before_mouse

মাউস রাখার পর

after_mouse

আমরা লিংকের Underline দুর করতে text-decoration এর ভেলু none করে দেই।

1.a:link { color: red; text-decoration: none; }
2.a:visited { color: red; text-decoration: none; }
3.a:hover { color: blue; }

প্রদর্শন:

মাউস রাখার পূর্বে

মাউস রাখার পরে

লিংকের Underline দুর করার সময় সর্তক হওয়া ঊচিত কেননা normal text এবং লিংক চিনতে সমস্যা সৃস্টি হতে পারে। সেজন্য লিংকের দুটি অবস্থা যেমন লিংক এবং hover এর কালার ভিন্ন হওয়া উচিত।

01.a:link {
02.color: white;
03.background-color: black;
04.text-decoration: none;
05.border: 2px solid white;
06.}
07.a:visited {
08.color: white;
09.background-color: black;
10.text-decoration: none;
11.border: 2px solid white;
12.}
13.a:hover {
14.color: black;
15.background-color: white;
16.text-decoration: none;
17.border: 2px solid black;
18.}

প্রদর্শন:

মাউস রাখার পূর্বে

This link is a almost over-the-top

মাউস রাখার পরে

01.a:link {
02.color: blue;
03.background-color: red;
04.font-size: 26px;
05.border: 10px outset blue;
06.font-family: sans-serif;
07.text-transform: lowercase;
08.text-decoration: none;
09.}
10.a:visited {
11.color: blue;
12.background-color: red;
13.font-size: 26px;
14.border: 10px outset blue;
15.font-family: sans-serif;
16.text-transform: lowercase;
17.text-decoration: none;
18.}
19.a:hover{
20.color: blue;
21.background-color: red;
22.font-size: 27px;
23.border: 10px inset blue;
24.font-family: serif;
25.text-transform: uppercase;
26.text-decoration: line-through;
27.letter-spacing: 3px;
28.word-spacing: 6px;
29.font-weight: normal;
30.}

প্রদর্শন:

মাউস রাখার পূর্বে

মাউস রাখার পরে

সিএসএস কার্সর (CSS Cursor)

আমরা   উইন্ডোজ, লিনাক্স ব্যবহার সময় বিভিন্ন মাউস কার্সর আইকন দেখেছি। বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস কার্সর এর আইকন বিভিন্ন হয়। জনসাধারন যখন আপনার site visit করবে সেখানেও  বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস এর আইকন বিভিন্ন করে তৈরী করা যায়। যা সিএসএস দ্বারা করা সম্ভব ।

LEAVE A REPLY

Please enter your comment!
Please enter your name here