ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
সম্পূর্ণ কোড হবে নিচের মতো করে:
<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>
</body>
</html>
ব্যাগ্রাউন্ডে কোন ছবি ব্যবহার করতে চাইলে
body {background-image:url(‘paper.gif’);}
আপনি চাইলে ছবিটি (নিচের মতো ) ডানে, বামে বা মাঝে রাখতে পারেন।
ডানে
body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:top right;
}
নিচে
body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}
নিচের টেবিলে ব্যাগ্রাউন্ডের প্রপারটিগুলো এক নজরে দেখে নিন।
Property Description Values CSS
background Sets all the background properties in one declaration background-color
background-image
background-repeat background-attachment background-position
inherit 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll
fixed
inherit 1
background-color Sets the background color of an element color-rgb
color-hex
color-name
transparent
inherit 1
background-image Sets the background image for an element url(URL)
none
inherit 1
background-position Sets the starting position of a background image top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
inherit 1
background-repeat Sets if/how a background image will be repeated repeat
repeat-x
repeat-y
no-repeat
inherit
এবার আমরা দেখবো লেখার সৌন্দর্য বৃদ্ধির পদ্ধতি
টেক্সট এলাইনমেন্ট:
h1 {text-align:center;} /* মাঝ বরাবর */
p.date {text-align:right;} /* ডানে*/
p.main {text-align:justify;} /*জাস্টিফাইড*/
টেক্সট ডেকোরেশন
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
ইন্ডেন্টেশন
p {text-indent:50px;}
বড়/ছোট হাতের লেখা করতে চাইলে
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}