Css

সি এস এস (CSS) অর্থ Cascading Style Sheets . HTML পেজ এ সি এস এস কোড তিন ভাবে লেখা যায় । ইন্টারনাল ভাবে , ইনলাইন ভাবে  এবং এক্সটারনাল ভাবেও করা যায় । সি এস এস এর বেসিক খুব দ্রুত শেখা যায় । তবে দক্ষতা নিরভর করে প্র্যাকটিস এর উপরে । তাই নিয়মিত প্র্যাকটিস ও বিভিন্ন প্রজেক্ট নিজে নিজে করতে থাকলে  সি এস এস এর উপরে দক্ষতা চলে আসে । আর শেখার কোন শেষ নাই । তাই শেখা টা চালিয়ে যেতে হবে । আর সবচেয়ে বড় কথা মজা টা খুজে নিতে হবে ।

INTERNAL CSS :-

হেডের ভেতরে  স্টাইল ট্যাগ নিয়ে তার ভেতরে সি এস এস কোড লিখতে হয়

 

INLINE CSS:-

এক্ষেত্রে যে অংশ সি এস এস দিয়ে ডিজাইন করব সেই অংশের ট্যাগ এর ভেতরেই সি এস এস কোড লিখতে হয়

EXTERNAL CSS:-

এখানে হেডের ভেতরে একটা লিঙ্ক লাইন দেয়া আছে । একটা সোর্স দেয়া আছে যেখানে style.css ফাইল টা আছে । এক্সটারনাল সি এস এস এর ক্ষেত্রে সি এস এস কোড লিখতে হয় ঐ style.css ফাইল এ  । এজন্য একটা সিএসএস ফাইল তৈরি করে নিতে হবে এইচটিএমএল ফাইল এর সাথে সাথেই ।

 

 

এভাবেই মুলত সিএসএস কোড গুলো  – এইস টি এম এল এ  লিখতে হয় । প্রয়োজন অনুযায়ী সবগুলোই একসাথে ব্যাবহার করা যাবে ।

সি এস এস এর সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলো ঃ

১ । সিলেক্টর { প্রোপার্টি : ভেলু } 

Screenshot (48)

২। কিছু কমন প্রোপার্টি ঃ-

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 দিয়ে সেই ডিভ গুলকে সিলেক্ট করা । 

Screenshot (41)

একানে ডিভ দিয়ে একটা এরিয়া আলাদা করে নেয়া হয়েছে । ডিভ এ যদি আমি ক্লাস নেই তাহলে সিলেক্টর হবে  .classname ।  আর আমি যদি আইডি নেই তাহলে সিলেক্টর হবে  #idname ।

পূর্ণ  ওয়েবসাইট  তৈরির উদাহরণ ও
ধাপসমুহ ঃ

PART OF HTML :

Screenshot (47)

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;}

Screenshot (43)

Post navigation

0 thoughts on “সি এস এস (CSS) Intro”

Leave a Reply

2 thoughts on “Css

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s