সিএসএস ফন্ট (CSS Font)

0
75
css
css

টেক্স কিভাবে প্রদর্শিত হবে তার নিয়ন্ত্রন ভার সিএসএস আপনাকে দিয়েছে। আপনি টেক্সের size, color, style ইত্যাদি পরিবর্তন করতে পারেন। আপনি জেনেছেন কিভাবে টেক্স bold  বা underline করতে হয় কিন্তু আপনি কি জানেন percentage  ব্যবহার কিভাবে ফন্ট resize  করা যায়। এই বিষয়ে আলোচনা  নিচে করা হয়েছে ।

সিএসএসফন্ট রং:

যদিও টেক্সের কালারকে সিএসএস ফন্ট অংশ মনে হয় কিন্তু প্রকৃতপক্ষে এটা স্বাধীন  সিএসএস attribute। নিচে ফন্ট এর কালার পরিবর্তনের উদাহরন দেয়া হলো।

1.h4 { color: red; }
2.h5 { color: #9000A1; }
3.h6 { color: rgb(0, 220, 98); }

প্রদর্শন:

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

This is a red h4 header.

This is a hexadecimal #9000A1 h5 header.
This is an rgb(0, 220, 98) h6 header.

উপরের উদাহরনে কালার নির্দেশ করতে আমরা কালারের তিন প্রকারের ফরমেট ব্যবহার করেছি।

সিএসএসফন্ট Family:

ফন্ট family দুইটি  group  এ বিভক্ত যেমন: serif and sans-serif । গবেষনায় দেখা গিয়েছে serif fonts হতে sans-serif fonts যা  computer monitor এ খুব সহজে পড়া যায় ।

1.h4 { font-family: sans-serif; }
2.h5 { font-family: serif; }
3.h6 { font-family: arial; }

প্রদর্শন:

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

This is a header with sans-serif font

This is a header with a serif font
This is a header with an arial font

সিএসএসফন্ট আকার:

আপনি values, percentages বা key terms ব্যবহার করে ফন্ট আকার ঠিক করতে পারেন। যখন আপনি default ফন্ট পরিবর্তন করতে চাবেন তখন Percentages ব্যবহার করা ভাল কিন্তু static value সেট করা উচিত নয়।

1.p { font-size: 120%; }
2.ol{ font-size: 10px; }
3.ul{ font-size: x-large; }

Display:

This is a font size of 120%

  1. This is a font size of 10px
  • This is a font size of “x-large”

ফন্ট-weight এর অন্যান্য key terms গুলো হল: bold, bolder, and normal.

সিএসএসফন্ট Variant:

সিএসএস ফন্ট Variant এর সাহায্যে আপনি ফন্ট কে  small caps এ পরিবর্তিত করতে পারেন। Note: কিন্তু সকল ফন্ট,  সিএসএস ফন্ট Variant কে সাপোর্ট করে না তাই প্রকাশ করা আগে নিশ্চিত হয়ে নেয়া উচিত।

1.p { font-variant: small-caps; }

প্রদর্শন:

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

this text was written normally and converted to small-caps

সিএসএস টেক্সক্ট টিউটোরিয়াল (CSS Text)

সিএসএস টেক্সট এর মাধ্যমে আপনি  টেক্সট এর spacing, decoration,  এবং alignment নিয়ন্ত্রন করতে পারেন।

টেক্সট Decoration:

টেক্সট Decoration এর মাধ্যমে আমরা লিংক এর underline দুর করতে পারি।  তাছাড়া line-through,

overline এবং underline  ইত্যাদি টেক্সট এ ব্যব্হার করতে পারি।

1.h4{ text-decoration: line-through; }
2.h5{ text-decoration: overline; }
3.h6{ text-decoration: underline; }
4.a { text-decoration: none; }

প্রদর্শন:

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

This header has a line through the middle

This header has an overline
This header has an underline

This is a link without an underline – See our CSS Link tutorial for more information

টেক্সট Indent:

সিএসএস text-indent কে আমরা এইচটিএমএল (<pre>)  ট্যাগ পরিবর্তে ব্যবহার করতে পারি। values

or percentages ব্যবহার করে আমরা text-indent নির্দিষ্ট করি।text indent মানে লেখাটি বাম দিকে থেকে কতটুকু

ছাড় দিয়ে শুরু হবে।

1.p { text-indent: 20px; }
2.h5 { text-indent: 30%; }

প্রদর্শন:

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

This is a paragraph that uses a text indentation with the value of 20px. This is the recommended usage of text indentation.

This is a header that uses a text indentation of 30%. Webcoachbd does not recommend indenting your text with percentages.

টেক্সটAlign:

সাধারনত  website এ default হিসাবে টেক্সট Align: leftনিবার্চিত থাকে। টেক্সট Align attribute এর সাহায্যে

টেক্সট  এর বিভিন্ন Alignment দেয়া যায়।

1.p { text-align: right; }
2.h5{ text-align: justify; }

প্রদর্শন:

This paragraph is aligned to the right side of the HTML element. If you ever find a use

for using right justify, please let us know. Just kidding, we don’t really want to know.

This header is justified. We recommend that you either align your text to the left, which is the
default setting, or justify your text. But feel free to experiment with all the available
alignment options that are at your disposal.

টেক্সট Transform:

টেক্সট Transform এর মাধ্যমে টেক্সট এর দ্রুত capitalize করা যায়।

1.p { text-transform: capitalize; }
2.h5{ text-transform: uppercase; }
3.h6{ text-transform: lowercase; }

প্রদর্শন:

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

Hi, I am happy to see you.

Hi, I am happy to see you.

Hi, I am happy to see you.

LEAVE A REPLY

Please enter your comment!
Please enter your name here