WEB DESIGN - CSS PART 01

 

What is CSS

•       CSS stands for Cascading Style Sheets

•       CSS describes how HTML elements are to be displayed on screen, paper, or in other media

CSS Syntax

CSS Selector কি?

আপনি যে HTML Element কে Style করতে চান, সেই Element এর নাম বা tag, Id এবং class কে CSS Selector বলা হয়। সহজ কথায় যার উপর CSS style প্রয়োগ হবে, তাকে CSS Selector বলা হয়। আর সে গুলো হচ্ছে যথাক্রমে Element এর নাম বা tag, Id এবং class.

CSS এর Syntax কি?

Web Page এ CSS প্রয়োগ করার পদ্ধতিকে বলা হয় CSS Syntax. CSS Syntax এর দুটি অংশ আছে। একটি হচ্ছে Selector অংশ আর অন্যটি হচ্ছে Decleration অংশ। আর declaration অংশ আবার দুইভাবে বিভক্ত , প্রথম অংশ হচ্ছে property আর সেমিকোলন (:) এর পরের অংশকে বলা হয় property value.

CSS Syntax এর আরো কিছু বিষয় জানা যাক

•       CSS এ এক বা একাধিক Decleration ব্লক থাকতে পারে। একের অধিক Decleration ব্লককে সেমিকোলনের (:) মাধ্যমে পৃথক করা হয়।

•       প্রতিটি Decleration ব্লকে একটি CSS Property এর নাম ও একটি ভ্যালু থাকে এবং কোলনের মাধ্যমে এদেরকে পৃথক করা হয়।

•       প্রতিটি সিএসএস Decleration ব্লক সর্বদাই সেমিকোলনের মাধ্যমে শেষ হয় এবং ডিক্লেয়ারেশন ব্লক/ব্লকসমূহ Curly Braces(দ্বিতীয় বন্ধনী) দ্বারা বেষ্টিত থাকে।

Web Page এ CSS ব্যবহার করার পদ্ধতি

•       Inline CSS

•       Inpage CSS

•       Internal CSS

•       External CSS

CSS এ @import কি?

CSS এ internal অথবা external যেকোনো। .css file কে অন্য আরেকটি .css file এ import করার জন্য এটি ব্যবহৃত হয়। তবে আপনি চাইলে এটিকে html ফাইলেও ব্যবহার করতে পারেন। যদিও html file এ performance এর বিবেচনায় link ট্যাগ ই উত্তম। এটির syntax দুইভাবে হয়। একটি হচ্ছে string হিসেবে আরেকটি হচ্ছে url হিসেবে import করা।

Example__

@import "navigation.css";

or

 

@import url("navigation.css");

CSS এ Unit কি?

CSS Style দিয়ে HTML Elements, Id এবং class গুলোর উপর width এবং height প্রকাশ করার মাধ্যম কে CSS Unit বলা হয়। অনেক CSS Porperty length ভ্যালু নেয়, যেমন- width, height, margin, padding, font-size, border-width ইত্যাদি। Unit একটি নম্বর যা বিভিন্ন length এর একক অনুসরন করে, যেমন 10px, 2em ইত্যাদি

CSS এ দু’ধরনের লেন্থ ইউনিট রয়েছেঃ

•       Relative

•       Absolute.

CSS Relative Lengths

Relative Length বলতে এক Length এর সাথে অন্য Length এর Property মিল বুঝায়।

CSS Absolute Length

Absolute Length এর ইউনিট fixed এবং এর দৈর্ঘ্য তার ঠিক প্রকৃত সাইজেই হবে।

CSS Text

1. Text Alignment          ----    text-align
2. Text Color        -----   color
3. Text Decoration        ---    text-decoration
4. Text Transformation   ---           text-transform
5. Text Indentation    ---      text-indent, letter-spacing
6. Text Shadow       ---        text-shadow

CSS Fonts

1. Font Families      ---        font-family
2. Font Style     ---       font-style, font-variant
3. Font Size       ---     font-size
4. Google Fonts

CSS Links

1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouses over it
4. a:active - a link the moment it is clicked

CSS Lists

•       list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)

•       list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)

•       list-style-image (specifies an image as the list item marker)