এইচটিএমএল ক্লাস 04 : HTML Style and color by msharif

View this thread on steempeak.com
hive-129948 · @msharif ·
$4.43
এইচটিএমএল ক্লাস 04 : HTML Style and color
![Green Yellow Playful & Celebratory Traditional Graduation Banner(4).jpg](https://cdn.steemitimages.com/DQmYjWwx8sGiB1x3foY5ie5Tdmn6tCSb8JTvu5XYqeas7SK/Green%20Yellow%20Playful%20&%20Celebratory%20Traditional%20Graduation%20Banner(4).jpg)


----------------------------
----------------------------

<div class="text-justify">


হ্যালো বন্ধুরা সবাই কেমন আছেন? আশা করছি সবাই অনেক ভাল আছেন। আজকে এইচটিএমএল এর চতুর্থ ক্লাস আমরা শিখব কিছু গুরুত্বপূর্ণ ট্যাগের ব্যবহার যার মাধ্যমে আমরা এইচটিএমএল এ স্টাইল এবং কালার করতে পারব। সকলেই জানি যখন আমরা কোনো আরটিকেল  তখন সে আর্টিকেল এর মধ্যে বিভিন্ন কালার থাকে টেক্সট এর মধ্যে এবং বিভিন্ন স্টাইল থাকে সেখানে। আমরা আজকে সেটাই শিখবে কিভাবে এইচটিএমএল ট্যাগ ব্যবহার করে আমরা একই টেক্সটকে স্টাইল এবং কালার করতে পারি।

----------------------------
----------------------------

### HTML Style and color :

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

মূলত স্টাইল ব্যবহার করা হয় সিএসএস এর মাধ্যমে। যেহেতু আমরা এখনও সিএসএস সম্পর্কে কোন ধারণা রাখিনা আমরা এখন এইচটিএমএল করছি তাই আমরা এইচটিএমএল এর মাধ্যমে স্টাইল এর ব্যবহার শিখব। আমরা আগেই জেনেছি যে একটি ট্যাগ এর কার্যক্ষমতা বৃদ্ধি করার জন্য কিছু এট্রিবিউট ব্যবহার করা যায়। আমরা এখানে সেই কাজটি মূলত করব।

 এইচটিএমএল এ সিএসএস এর স্টাইল ব্যবহার করার জন্য আমরা মূলত এই 
h1 style="property:value;"  প্যাটার্ন টি ব্যবহার করব যা সম্পূর্ণ টি আঙ্কেল ব্র্যাক এর দ্বারা আবদ্ধ থাকবে। এখানে যে আমরা property দেখেছি এটা মানে হচ্ছে আপনি কি কাজ করতে চাচ্ছেন সেটা লিখতে হবে এরপর আমরা কোলন দেওয়ার পর লিখেছি value এর মাধ্যমে আপনি সেই কাজের ভ্যালুটা বসাতে পারেন।

![asdg.JPG](https://cdn.steemitimages.com/DQmZe1qe4wn2z7muh4hqakSNDKF2LqiA6sHfWBd5hUiPmCJ/asdg.JPG)
![image.png](https://cdn.steemitimages.com/DQmYY8qScaXeycbFSaMj3W1eK74Vp4umgmwt9zqYy37EPZu/image.png)

উপরের ছবিতে আপনারা খেয়াল করলে দেখতে পাবেন আমরা কিভাবে স্টাইল এর ব্যবহার করেছি। এখানে আমরা Style এর জায়গায় Style লিখেছি এরপর property এই জায়গায় লিখেছি text-align, এবং সর্বশেষ Value এর জায়গায় লিখেছি center & right. এটাই হচ্ছে প্যাটার্ন। এভাবেই আমরা স্টাইল লেখার সময় প্যাটার্ন ফলো করবো।

---------------------------
---------------------------

এখন আমরা দেখব কিভাবে এই লেখাটিকে বিভিন্ন কালারের রূপান্তরিত করা যায়। একই জায়গায় আমরা এ কাজটি করব। আমরা জানি একটি একটি এট্রিবিউট এর একাধিক property and Value নিয়ে কাজ করা যায় তাই আমরা সেই কাজটি করব এখানে। Property এ জায়গায় আমরা লিখব color  এবং Value এই জায়গায় লিখব যে কোন কালারের নাম।  আমি লিখছি red. এর জন্য আপনাকে প্রথম property and Value এরপর একটি সেমিকোলন ( ; ) ব্যবহার করতে হবে তারপর বাকি property and Value আপনি লিখতে পারবেন।



![image.png](https://cdn.steemitimages.com/DQmdBfai8oGUzPixYnURsQLc1K9WB4v7Gn2ms9wdokAtxvb/image.png)



![image.png](https://cdn.steemitimages.com/DQmVoVoSDMMHakxjTDWuB5tZkxYgPm1NV85bpKFw7AXHy5W/image.png)

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



![image.png](https://cdn.steemitimages.com/DQmaG15HSZ1uyGyx2DB89h3AjkVuFbcKAuQqEej4uBvaxhA/image.png)


![image.png](https://cdn.steemitimages.com/DQmeJL7ayCDYmqa48jb3M8AbdPBeJGwQ52ey52T6xdBMKEe/image.png)


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


https://htmlcolorcodes.com/ এই ওয়েবসাইট থেকে আপনি হেক্সাডেসিমেল ভ্যালু গুলো নিতে পারবেন এবং সেগুলো কালারের জন্য ব্যবহার করতে পারবেন।


![hkjhj.JPG](https://cdn.steemitimages.com/DQmV92DFsZneJEAy2KANYj2oaRqZJrRW4DxuJhRopZAXuP4/hkjhj.JPG)


এখন আমি আপনাদেরকে দেখাবো কিভাবে হেক্সাডেসিমেল ভালো গুলো ব্যবহার করে কালার ব্যবহার করতে পারবেন। শুধুমাত্র যেখানে আপনি কালারের নাম লিখেছেন সেখানে আপনাকে হেক্সাডেসিমেল ভ্যালু গুলো বসিয়ে দিতে হবে তাহলেই কাজ হয়ে যাবে।

![image.png](https://cdn.steemitimages.com/DQmZWVHvkbwfeV1GVrvgLgqxehpKsLzyXYRqYnDMabAbvun/image.png)


![image.png](https://cdn.steemitimages.com/DQmYGDnrVKdW8K5JTSVd1kSoYdyYedNhj4TnfLq5kmtogxe/image.png)


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

rgb ব্যবহারের জন্য আপনাকে কালারের পরে r,g,b প্রত্যেকটির আলাদা আলাদা মন বসাতে হবে এবং প্রত্যেকের মাঝখানে কমা থাকতে হবে নিচে আমি ছবির মাধ্যমে দেখি দেওয়ার চেষ্টা করছি।

![image.png](https://cdn.steemitimages.com/DQmTg3ZpRadDSoqLJfdgn5h81DCaoX4ruCXTWZR9CpCebs7/image.png)





----------------------
----------------------

আপনারা যারা আগের ক্লাসগুলো মিস করেছেন তাদের জন্য নিচে আমি আগের ক্লাসগুলো লিঙ্কগুলো শেয়ার করছি।

[এইচটিএমএল ফুল কোর্স || কি কি থাকবে আমাদের এই কোর্স এর মধ্যে](https://steemit.com/hive-129948/@msharif/qokin-or-or#comments)

[এইচটিএমএল ক্লাস 01 : Introduction to HTML ,Tag, element & attribute](https://steemit.com/hive-129948/@msharif/01-introduction-to-html-tag-element-and-attribute#comments)

[এইচটিএমএল ক্লাস 02 : HTML এর সাধারণ গঠন, First html webpage Create](https://steemit.com/hive-129948/@msharif/02-html-first-html-webpage-create#comments)

[এইচটিএমএল ক্লাস 03 : Heading tag ,Horizontal rules, Align attribute, Paragraph tag](https://steemit.com/hive-129948/@msharif/03-heading-tag-horizontal-rules-align-attribute-paragraph-tag#comments)


-------------------------
-------------------------

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


</div>

<center><b>Stay Safe, Stay Happy</b></center>

Cc : @amarbanglablog


![image.png](https://cdn.steemitimages.com/DQmbPrvV5srE5p2zndUhSzZoQG73QqciQbn2arik8sEEFNk/image.png)
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
👎  
properties (23)
post_id92,588,344
authormsharif
permlink04-html-style-and-color
categoryhive-129948
json_metadata{"tags":["programming","steemexclusive","coding","htmlclass04","tutorial","amarbanglablog","steemit"],"users":["amarbanglablog"],"image":["https:\/\/cdn.steemitimages.com\/DQmYjWwx8sGiB1x3foY5ie5Tdmn6tCSb8JTvu5XYqeas7SK\/Green%20Yellow%20Playful%20&%20Celebratory%20Traditional%20Graduation%20Banner(4).jpg","https:\/\/cdn.steemitimages.com\/DQmZe1qe4wn2z7muh4hqakSNDKF2LqiA6sHfWBd5hUiPmCJ\/asdg.JPG","https:\/\/cdn.steemitimages.com\/DQmYY8qScaXeycbFSaMj3W1eK74Vp4umgmwt9zqYy37EPZu\/image.png","https:\/\/cdn.steemitimages.com\/DQmdBfai8oGUzPixYnURsQLc1K9WB4v7Gn2ms9wdokAtxvb\/image.png","https:\/\/cdn.steemitimages.com\/DQmVoVoSDMMHakxjTDWuB5tZkxYgPm1NV85bpKFw7AXHy5W\/image.png","https:\/\/cdn.steemitimages.com\/DQmaG15HSZ1uyGyx2DB89h3AjkVuFbcKAuQqEej4uBvaxhA\/image.png","https:\/\/cdn.steemitimages.com\/DQmeJL7ayCDYmqa48jb3M8AbdPBeJGwQ52ey52T6xdBMKEe\/image.png","https:\/\/cdn.steemitimages.com\/DQmV92DFsZneJEAy2KANYj2oaRqZJrRW4DxuJhRopZAXuP4\/hkjhj.JPG","https:\/\/cdn.steemitimages.com\/DQmZWVHvkbwfeV1GVrvgLgqxehpKsLzyXYRqYnDMabAbvun\/image.png","https:\/\/cdn.steemitimages.com\/DQmYGDnrVKdW8K5JTSVd1kSoYdyYedNhj4TnfLq5kmtogxe\/image.png","https:\/\/cdn.steemitimages.com\/DQmTg3ZpRadDSoqLJfdgn5h81DCaoX4ruCXTWZR9CpCebs7\/image.png","https:\/\/cdn.steemitimages.com\/DQmbPrvV5srE5p2zndUhSzZoQG73QqciQbn2arik8sEEFNk\/image.png"],"links":["https:\/\/htmlcolorcodes.com\/","https:\/\/steemit.com\/hive-129948\/@msharif\/qokin-or-or#comments","https:\/\/steemit.com\/hive-129948\/@msharif\/01-introduction-to-html-tag-element-and-attribute#comments","https:\/\/steemit.com\/hive-129948\/@msharif\/02-html-first-html-webpage-create#comments","https:\/\/steemit.com\/hive-129948\/@msharif\/03-heading-tag-horizontal-rules-align-attribute-paragraph-tag#comments"],"app":"steemit\/0.2","format":"markdown"}
created2021-07-13 13:38:48
last_update2021-07-13 13:38:48
depth0
children7
net_rshares8,660,353,858,133
last_payout2021-07-20 13:38:48
cashout_time1969-12-31 23:59:59
total_payout_value2.224 SBD
curator_payout_value2.202 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length6,757
author_reputation1,000,000,000,000,000
root_title"এইচটিএমএল ক্লাস 04 : HTML Style and color"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (48)
@moh.arif · 
আপনি কোর্স টির ধারাবাহিকতা রক্ষা করছেন দেখে অনেক ভাল লাগল। আশা রাখছি পরবর্তী টিউটরিয়াল গুলোর ধারাবাহিকতা রক্ষা করবেন। ধন্যবাদ।
properties (22)
post_id92,588,545
authormoh.arif
permlinkqw6rs1
categoryhive-129948
json_metadata{"app":"steemit\/0.2"}
created2021-07-13 13:51:12
last_update2021-07-13 13:51:12
depth1
children1
net_rshares0
last_payout2021-07-20 13:51:12
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length127
author_reputation1,668,100,537,200,055
root_title"এইচটিএমএল ক্লাস 04 : HTML Style and color"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@msharif · 
ইনশাআল্লাহ ভাই চেষ্টা করব এই টিউটোরিয়ালটি ধারাবাহিকতা বজায় রাখার জন্য। আপনাকে অনেক ধন্যবাদ সবসময় আমাকে উৎসাহিত করার জন্য।
properties (22)
post_id92,588,824
authormsharif
permlinkqw6skr
categoryhive-129948
json_metadata{"app":"steemit\/0.2"}
created2021-07-13 14:07:45
last_update2021-07-13 14:07:45
depth2
children0
net_rshares0
last_payout2021-07-20 14:07:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length124
author_reputation1,000,000,000,000,000
root_title"এইচটিএমএল ক্লাস 04 : HTML Style and color"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@hafizullah · 
ভাই কোর্সটির ধারাবাহিকতা রক্ষা করার জন্য ধন্যবাদ।
properties (22)
post_id92,590,242
authorhafizullah
permlinkqw6wbs
categoryhive-129948
json_metadata{"app":"steemit\/0.2"}
created2021-07-13 15:28:42
last_update2021-07-13 15:28:42
depth1
children1
net_rshares0
last_payout2021-07-20 15:28:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length49
author_reputation2,165,486,873,690,483
root_title"এইচটিএমএল ক্লাস 04 : HTML Style and color"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@msharif · 
ধন্যবাদ ভাই
properties (22)
post_id92,590,834
authormsharif
permlinkqw6xz6
categoryhive-129948
json_metadata{"app":"steemit\/0.2"}
created2021-07-13 16:04:21
last_update2021-07-13 16:04:21
depth2
children0
net_rshares0
last_payout2021-07-20 16:04:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length11
author_reputation1,000,000,000,000,000
root_title"এইচটিএমএল ক্লাস 04 : HTML Style and color"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@steemcurator07 · 
You have been upvoted by @rex-sumon A  Country Representative, we are voting with the Steemit Community Curator @steemcurator07 account to support the newcomers coming into steemit.

---

Follow @steemitblog for the latest update. You can also check out this link which provides the name of the existing community according to  specialized subject
* [List of Steemit Communities Categorized by Their Subjects](https://steemit.com/hive-133716/@randulakoralage/list-of-steemit-communities-categorized-by-their-subjects)

There are also various contest is going on in steemit, You just have to enter in this link and then you will find all the contest link,  I hope you  will also get some interest,

* [Compilation of ongoing " contests" on Steem](https://steemit.com/hive-196725/@rishabh99946/updated-or-as-on-13th-december-or-compilation-of-on-going-contests-on-steem-blockchain)

For general information about what is happening on Steem follow @steemitblog.
properties (22)
post_id92,611,281
authorsteemcurator07
permlinkqw8ri6
categoryhive-129948
json_metadata{"users":["rex-sumon","steemcurator07","steemitblog"],"links":["https:\/\/steemit.com\/hive-133716\/@randulakoralage\/list-of-steemit-communities-categorized-by-their-subjects","https:\/\/steemit.com\/hive-196725\/@rishabh99946\/updated-or-as-on-13th-december-or-compilation-of-on-going-contests-on-steem-blockchain"],"app":"steemit\/0.2"}
created2021-07-14 15:39:45
last_update2021-07-14 15:39:45
depth1
children0
net_rshares0
last_payout2021-07-21 15:39:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length958
author_reputation1,025,914,365,470
root_title"এইচটিএমএল ক্লাস 04 : HTML Style and color"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@up-down · 
Steem/SBD doller sell korle inbox. 01700817832 ডলার বিক্রি করলে যোগাযোগ করেন ধন্যবাদ.💖
properties (22)
post_id92,623,664
authorup-down
permlinkqw9wjj
categoryhive-129948
json_metadata{"app":"steemit\/0.2"}
created2021-07-15 06:26:18
last_update2021-07-15 06:26:18
depth1
children0
net_rshares0
last_payout2021-07-22 06:26:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length86
author_reputation81,491,274,690
root_title"এইচটিএমএল ক্লাস 04 : HTML Style and color"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@ecosynthesizer · 
Hi, @msharif,

Thank you for your contribution to the Steem ecosystem.

---
<sup>Please consider voting for our [witness](https://steemlogin.com/sign/account-witness-vote?witness=symbionts&approve=true), setting us as a [proxy](https://steemlogin.com/sign/account-witness-proxy?proxy=symbionts&approve=1),
or delegate to @ecosynthesizer to earn 100% of the curation rewards!
[3000SP](https://steemlogin.com/sign/delegateVestingShares?delegatee=ecosynthesizer&vesting_shares=3000%20SP) | [4000SP](https://steemlogin.com/sign/delegateVestingShares?delegatee=ecosynthesizer&vesting_shares=4000%20SP) | [5000SP](https://steemlogin.com/sign/delegateVestingShares?delegatee=ecosynthesizer&vesting_shares=5000%20SP) | [10000SP](https://steemlogin.com/sign/delegateVestingShares?delegatee=ecosynthesizer&vesting_shares=10000%20SP) | [100000SP](https://steemlogin.com/sign/delegateVestingShares?delegatee=ecosynthesizer&vesting_shares=100000%20SP)</sup>
properties (22)
post_id92,705,334
authorecosynthesizer
permlinkre-04-html-style-and-color-20210719t042414z
categoryhive-129948
json_metadata{"app":"beem\/0.24.21"}
created2021-07-19 04:24:15
last_update2021-07-19 04:24:15
depth1
children0
net_rshares0
last_payout2021-07-26 04:24:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length944
author_reputation-54,116,952,654,646
root_title"এইচটিএমএল ক্লাস 04 : HTML Style and color"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
Help/Feedback