স্টাইল অ্যাট্রিবিউট ব্যবহার করে ওয়েব পেইজের বিভিন্ন এলিমেন্টের রং, ফন্টসহ বিভিন্ন বৈশিষ্ট্য বা প্রোপার্টি (property) উল্লেখ করে দেওয়া যায়। স্টাইল অ্যাট্রিবিউটের ভেতরে বিভিন্ন স্টাইলিং নির্দেশনা দেওয়া যায়। যেমন- এর আগের অংশে দেখানো হয়েছে কীভাবে স্টাইল অ্যাট্রিবিউট ব্যবহর করে লাল রঙে লেখা যায়। এজন্য color প্রোপার্টি ব্যবহার করা হয়েছে। বিভিন্ন এইচটিএমএল এলিমেন্টের বিভিন্ন প্রোপার্টি আছে। একাধিক প্রোপার্টির মান বলে দিতে চাইলে তাদের মধ্যে সেমিকোলন চিহ্ন ব্যবহার করতে হয়।
<!DOCTYPE html> <html> <head> <title>Style Attribute Experiment</title> </head> <body> <div style="width:100px; height:100px; background-color : pink; color: darkred; float: left; margin: 5px; padding: 5px;"> Hello There! </div> <div style="width:100px; height:100px; background-color : paleturquoise; color: forestgreen; float: left; margin: 5px; padding: 5px;"> How are you! </div> <div style="width:100px; height:100px; background-color : lightskyblue; color: royalblue; float: left; margin: 5px; padding: 5px;"> Nice to meet you! </div> </body> </html>
উপরের কোডটি ছবির মত আউটপুট তৈরি করবে।
আবার একই স্টাইল একাধিক এলিমেন্টে ব্যবহার করতে চাইলে, <head>…</head> অংশের ভিতরে আলাদাভাবে style ট্যাগ দিয়ে সেগুলো বলে দেওয়া যায়। নিচের উদাহরণটি সেটি দেখানো হলো-
<!DOCTYPE html>
<html>
<head>
<title>Style Attribute Experiment</title>
<style type="text/css">
p {
width:100px;
height:100px;
float: left;
margin: 10px;
padding: 10px;
font-family: sans-serif;
font-size: large;
border: 2px solid rgba (0, 0, 0, 0.2) ;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<p style="background-color: pink; color: darkred;">Hello There!</p>
<p style="background-color: paleturquoise; color: forestgreen;">How are you!</p>
<p style="background-color: lightskyblue; color: royalblue;">Nice to meet you!</p>
</body>
</html>
এখানে style ট্যাগে বলে দেওয়া হয়েছে যাবতীয় div এলিমেন্টের স্টাইল কেমন হবে, অর্থাৎ, width হবে 100 পিক্সেল, height হবে 100 পিক্সেল ইত্যাদি। আর প্রতিটি আলাদা div এলিমেন্টে তাদের নিজস্ব রং (color) ও পেছনের পর্দার রং (background-color) বলে দেওয়া হয়েছে। এভাবে স্টাইল ট্যাগ ব্যবহার করে বিভিন্ন এলিমেন্টের রূপ পরিবর্তন করা যায়।
এখানে কিছু প্রপার্টির নাম ও তাদের ব্যবহার দেখানো হলো-
| প্রোপার্টির নাম | ব্যবহার |
| width | উপাদানের প্রস্থ নির্ধারণ করা |
| height | উপাদানের উচ্চতা নির্ধারণ করা |
| font-family | ফন্ট নির্ধারণ করা |
| font-size | ফন্টের আকার নির্ধারণ করা |
| margin | অন্যান্য উপাদান থেকে দূরত্ব নির্ধারণ করা |
| padding | উপাদানের সীমানা থেকে এর ভেতরের উপাদানগুলোর দূরত্ব নির্ধারণ করা |
| border | উপাদান সীমানা দেখতে কেমন হবে তা নির্ধারণ করা |
| text-align | উপাদানের ভেতরের লেখা কীভাবে বিন্যস্ত করা হবে তা নির্ধারণ করা।(যেমন- left, right, center ইত্যাদি) |
| color | উপাদানের রং নির্ধারণ করা |
| background-color | উপাদানের পেছনের পর্দার রং নির্ধারণ করা |