সি এস এস (CSS) অর্থ Cascading Style Sheets . HTML পেজ এ সি এস এস কোড তিন ভাবে লেখা যায় । ইন্টারনাল ভাবে , ইনলাইন ভাবে এবং এক্সটারনাল ভাবেও করা যায় । সি এস এস এর বেসিক খুব দ্রুত শেখা যায় । তবে দক্ষতা নিরভর করে প্র্যাকটিস এর উপরে । তাই নিয়মিত প্র্যাকটিস ও বিভিন্ন প্রজেক্ট নিজে নিজে করতে থাকলে সি এস এস এর উপরে দক্ষতা চলে আসে । আর শেখার কোন শেষ নাই । তাই শেখা টা চালিয়ে যেতে হবে । আর সবচেয়ে বড় কথা মজা টা খুজে নিতে হবে ।
INTERNAL CSS :-
হেডের ভেতরে স্টাইল ট্যাগ নিয়ে তার ভেতরে সি এস এস কোড লিখতে হয়
INLINE CSS:-
এক্ষেত্রে যে অংশ সি এস এস দিয়ে ডিজাইন করব সেই অংশের ট্যাগ এর ভেতরেই সি এস এস কোড লিখতে হয়
EXTERNAL CSS:-
এখানে হেডের ভেতরে একটা লিঙ্ক লাইন দেয়া আছে । একটা সোর্স দেয়া আছে যেখানে style.css ফাইল টা আছে । এক্সটারনাল সি এস এস এর ক্ষেত্রে সি এস এস কোড লিখতে হয় ঐ style.css ফাইল এ । এজন্য একটা সিএসএস ফাইল তৈরি করে নিতে হবে এইচটিএমএল ফাইল এর সাথে সাথেই ।
এভাবেই মুলত সিএসএস কোড গুলো – এইস টি এম এল এ লিখতে হয় । প্রয়োজন অনুযায়ী সবগুলোই একসাথে ব্যাবহার করা যাবে ।
সি এস এস এর সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলো ঃ
১ । সিলেক্টর { প্রোপার্টি : ভেলু }
২। কিছু কমন প্রোপার্টি ঃ-
selector{
width:100px;
height:50px;
height:auto;
min-height:50px;
max-height:50px;
color:red;
background-color:green;
text-decoration:none;
list-style:none;
background-image: url(“paper.gif”);
background-repeat: no-repeat;
font-size:60px;
text-align:center;
margin-left:40px;
margin-right:50px;
margin-bottom:30px;
margin-top:20px;
margin:top left bottom roght; (in one line)
padding:same as margin;
border-width:2px;
border-style:solid / dotted ;
border-color:black;
border:width style color; (in one line)
display:none/inline-block/hidden;
z-index:1;
opacity:1;
visibility:visible/hidden;
transition:
float:left/right;
position:fixed/absolute/relative;
}
৩।ডিভ নিয়ে পেজ এর একটা এরিয়া নির্দিষ্ট করে নেয়া । ID CLASS দিয়ে সেই ডিভ গুলকে সিলেক্ট করা ।
একানে ডিভ দিয়ে একটা এরিয়া আলাদা করে নেয়া হয়েছে । ডিভ এ যদি আমি ক্লাস নেই তাহলে সিলেক্টর হবে .classname । আর আমি যদি আইডি নেই তাহলে সিলেক্টর হবে #idname ।
পূর্ণ ওয়েবসাইট তৈরির উদাহরণ ও
ধাপসমুহ ঃ
PART OF HTML :
PART of CSS :
1.*{margin:0px; padding:0px}
2. .container{background:lightblue; padding:20px; margin:5px;}
3..heading{background:green; padding:20px; text-align:center; color:white;}
super. thanks Zakir hossain.01711045529
Like