ICT & others Information

css_part2

August 29, 2016 Sharmin Khan Ishita

Inline Style

এখন Inline Style ব্যবহার করে আগের প্রোগ্রামটি Develop করবো । Inline Style এর জন্য Style নামের attribute ব্যবহার করা হয় এবং এর সাথে একটি Property ও এর Value নির্ধারণ করে দিতে হয়। এটি যে কোন একটি HTML এর Element এর সাথে যুক্ত হয়। এটি একটি ফাইলে কার্যকর হয়।

Format হচ্ছে <element style = “property: Value;”>

উদাহরণ স্বরুপ নিচের কোডিং লক্ষ্য করুন <h1 style =”color : red;”>

এখানে লক্ষ্য করুন style attribute এর পর একটি সমান চিহ্ন (=) তারপর একটি ডাবল কোটেশন দিয়ে Property ও Vlaue র মাঝে একটি কোলন চিহ্ন (:) ব্যবহার করা হয়েছে। শেষে সেমিকোলন (;) দিয়ে আবার ডাবল কোটেশন দেওয়া হয়েছে। ( “color:red;”)

নিচের প্রোগ্রামে আমরা Body, p, h1 তে Style ব্যবহার করবো p এবং h1 তে মোট ৩বার Style ব্যবহার করেছি এবং ৩ বারই Style কে আলাদা আলাদা ভাবে নির্ধারণ করতে হয়েছে, না করলে Default মান দেখাতো।

নিচের মত কোডিং সহ একটি HTML ফাইল তৈরী করুন:

<!DOCTYPE html>

<html>

This is Normal body text.

<p style="color:green;font-size:20px;"> This is First para</p>

<h1 style="color:red;text-align:center;"> Word Processor </h1>

Microsoft Word is a word processing program.

It is use to Write application, News Letter,

Writting Pad, etc.

<p style="color:green;font-size:20px;"> This is Second para</p>

<h1 style="color:red;text-align:center;"> Spread Sheet</h1>

Microsoft Excel is a Spread Sheet program.

Its devided by Row and Column. You can make

chart using Excel.

<p style="color:green;font-size:20px;"> This is Third para</p>

<h1 style="color:red;text-align:center;"> Database </h1>

Microsoft Access is a Spread Database

Managementprogram. It is use to create and analise table and database.

</body> </html>

ব্রাউজার দিয়ে খুললে নিম্নোক্ত ফলাফল পাওয়া যাবে।

Internal Style Sheet

এটিও একটি ফাইলে কার্যকর হয়। Style নামের ট্যাগের মধ্যে এটি ব্যবহৃত হয়। এই Style অ্যাট্রিবিউটটি যে কোন CSS Property ব্যবহার করতে পারে। এটি <head> সেকশনের মধ্যে দিতে হয় এবং Style ট্যাগের সাথে Type এলিমেন্ট ব্যবহার করতে হয় এবং সমান চিহ্ন দিয়ে (=) “text/css” লিখে দিতে হয়। যেমন

<head>

</head>

এরপর এর মধ্যে যে কোন HTML ট্যাগ যেমন <body>, <p>,<h1> ইত্যাদি ট্যাগের সাথে দিতে হয় এবং Property ও Value র মাঝে কোলন (:) সহ একটি সেকেন্ড ব্রাকেটের মধ্যে রাখতে হয়।

যেমন

<head>

body {background-color:yellow;}

p{color: green;}

h1 {color:red;} ইত্যাদি

শেষে <style> কে শেষ (clossing ousing tag) করতে হবে যেমন </style>

এখন আমরা আগের প্রোগ্রামটি Internal Style Sheet দিয়ে ডেভেলপ করবো। এক্ষেত্রে <body> র মধ্যে যত বার <p> ও <h1> দেওয়া হোক না কেন মান বলে দিতে হবে না। <Head> সেকশননের মধ্যে মাত্র একবার বলে দিতে হবে।

নিচের মত কোডিং সহ একটি HTML ফাইল তৈরী করুন:

<!DOCTYPE html>

<html>

<head>

body {background-color:PowderBlue;}

p {color:green;font-size:20px;}

h1 {color:red;text-align:center;}

</style>

</head>

<body>

This is Normal body text.

<p> This is First para</p>

<h1>Word Processor</h1>

Microsoft Word is a word processing program.

It is use to Write application, News Letter,

Writting Pad, etc.

<p> This is Second para</p>

<h1>Spread Sheet</h1>

Microsoft Excel is a Spread Sheet program.

Its devided by Row and Column. You can make

chart using Excel.

<p> This is Third para</p>

<h1> Database</h1>

Microsoft Access is a Spread Database

Managementprogram. It is use to create and analise table and database.

</body> </html>

ব্রাউজার দিয়ে খুললে নিম্নোক্ত ফলাফল পাওয়া যাবে।

Previous Post Next Post

বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft Word

Writer: Bappi Ashraf

Published By: Gyankosh Prokashani

Amount of Pages: 464

First Publish: October-2004

Last Edition: We've February-2015 edition. Future edition may be existed!

Book Price: BDT 350 (30% Discount)

The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book. Book's CD Link below...

পরিবেশক/প্রাপ্তিস্থান
Online : www.rokomari.com

Facebook Page

RELATED POST LINKS BELOW ********************************************

Next_

Part- 01: CSS সিনট্যাক্স , Syntax এর ফরম্যাট ও CSS এর প্রকারভেদ

Part- 02: Inline Style

Part- 03: External Style Sheet,Multiple CSS ( Internal+External+Inline)

Part- 04: CSS Comments, ID ও Class

Part- 05: একাধিক Sector এ Class তৈরী

Part- 06: External CSS এ Class তৈরী

Part- 07: ID সিলেক্টর, Internal ID ও External ID তৈরী

Part- 08: Selector এর গ্রুপিং ও  সুডো (Pseudo) ক্লাস এর ব্যবহার

Part- 09: Professional Project

Part- 10:  CSS দ্বারা Background এর ব্যবহার

Part- 11: প্রোপার্টির কোডিং ছোট করে লেখা and SpecialProject (1)

Part- 12: প্রোপার্টির কোডিং ছোট করে লেখা and SpecialProject (2)

Part- 13: CSS দ্বারা Text Style, Text Color  ও Text Alignment প্রোপার্টিজ

Part- 14: Text Decoration করা

Part- 15: Text Transformation ও Indentation

Part- 16: Character, Line ও Word Spacing

Part- 17: Text Direction ও VerticalAlignment

Part- 18: CSS দ্বারা Font Style, Weight ও Variant তৈরী করা

Part- 19: Properly কে শর্ট করা ও link Style করা

Part- 20: একাধিক Style প্রয়োগ ও list এর Style তৈরী করা

Part- 21: Unordered list-এর ব্যবহার (list-style-type)

Part- 22: List এ ইমেজের ব্যবহার, Position ঠিক করা ও একাধিক value ব্যবহার

Part- 23: CSS Float এর ব্যবহার, Float এ ইমেজ, Border, margin ও Text  সংযোজন

Part- 24: Horizantal Menu তৈরী করা এবং কিছু কোডিং এরব্যবহার

Part- 25: CSS এ Border ব্যবহার ও Customize  করা

Part- 26: একসাথে সব প্রোপার্টিজ ওCSS Outline এর ব্যবহার

Part- 27: একাধিক Properties ও CSS Margin এর ব্যবহার

Part- 28: আলাদা আলাদা মার্জিন সেটিং ও CSSPadding এর ব্যবহার

Part- 29: CSS Box, BorderRadius, Image ও Shadow এর ব্যবহার

Part- 30: CSS Table , Single Border তৈরী করা,

Part- 31: Nesting Selector, CSSNevigation Bar এর ব্যবহার

Part-32: CSS Height ও Width এর ব্যবহার,

Part- 33: CSS Positioning ঠিক করা

Part- 34: Overlapping ও Clipping element ও Overflow নিয়ন্ত্রন করা

Part- 35: হরেক রকম কার্সর , CSS-এ এলিমেন্টকে Hide করা

Part- 36: CSS Align এর ব্যবহার ও সকল ব্রাউজারে প্রর্দশন উপোযোগী করা

Part- 37: সকল ব্রাউজারে প্রর্দশন উপোযোগী করা ও  ইমেজ গ্যলারি তৈরী করা

Part- 38: ইমেজের অপাসিটি নিয়ন্ত্রন ও  Navigation list তৈরী

Part- 39: Hover দেওয়া , ২ টি element একসাথে ব্যবহার

Part- 40: Focus–pseudo-code,  সুডো এলিমেন্টের ব্যবহার

Part- 41 : Professional ProjectFinal (Special Project)

Part- 42: About Us.html  page তৈরী করা, Text Effect ও   Multiple Column

css_part1- CSS সিনট্যাক্স , Syntax এর ফরম্যাট ও CSS এর প্রকারভেদ

August 29, 2016 Sharmin Khan Ishita

ওয়েব পেজের ভিজুয়াল প্রেজেন্টেসন এর জন্য W3C Standard সহ CSS কে ব্যবহার করা হয়। HTML হচ্ছে মার্কআপ ল্যাগুয়েজ কিন্তু এই মার্কআপ ল্যাগুয়েজ কে ইউজার বা ডিজাইনাররা CSS দিয়ে আরো মনোমুগ্ধকর করে থাকেন। HTML যেখানে ওয়েব পেজ প্রদর্শন করে অপর দিকে CSS কোন ওয়েব পেজকে প্রদর্শন করতে পারেনা। CSS বিভিন্ন ধরণের কনটেন্টকে ধারণ করে এবং HTML এর মাধ্যমে প্রদর্শন করে। CSS আসার কারণে ডিজাইনারদের অনেক পরিশ্রম কম হচ্ছে এবং একই কাজ বার বার করার একঘেয়েমি থেকে মুক্ত হয়েছেন ডিজাইনাররা। CSS দ্বারা এক্সটারনাল ফাইলে একবার Style তৈরী করে রেখে বিভিন্ন HTML ফাইলে বার বার ব্যবহার করা যায়। CSS এর সম্পূর্ন রুপ হচ্ছে Cascading Style Sheets.

সুতরাং Style Sheets এর মধ্যে বিভিন্ন ধরণের Style সংরক্ষণ করে রাখা যাবে। এই Style মোট তিন ভাবে সংরক্ষণ করে রাখা যাবে। আমরা উদাহরণের মাধ্যমে বিষয়গুলি জানবো। Style Sheets জানতে হলে প্রথমে আপনাকে অবশ্যই HTML/XHTML জানতে হবে।

HTML/XHTML সম্বন্ধে আরও বিস্তারিত জানতে বাপ্পি আশরাফের প্রকাশিতব্য HTML, XML, CSS ও PSD to HTML এর বইটি সংগ্রহ করে নিন।

CSS সিনট্যাক্স

CSS সিনট্যাক্স মোট ৩টি অংশে গঠিত

১. Selector ২. Property (Declaration) ৩. Value (Declaration)

সিনট্যাক্স দেখানোর আগে আমরা আমাদের HTML কোডিং মনে করি। আমরা জানি h1 দ্বারা হেডিং নির্ধারণ করা হয়। HTML কোডিং এ h1 ব্যবহার করলে Text কে একটি নিদিষ্ট সাইজে প্রদর্শন করা যাবে। যেমন <h1>This is heading1</h1>

এটির দ্বারা নিম্নলিখিত ভাবে Heading প্রদর্শিত হবে যেমন

লক্ষ্য করুন এখানে Font এর কোন style ( Family) বা Color উল্লেখ নাই। আমরা CSS দ্বারা সেটিই নির্ধারণ করে দিতে পারি। যেমন

h1{style=”font-family:arial;color:red;”}

এখন যদি আমরা h1 দিয়ে কোডিং করি যেমন <h1> This is heading1 </h1>

তবে আগের মতই Heading প্রদর্শিত হবে কিন্ত Font দেখাবে Arial Fontএ এবং red কালারে প্রদর্শিত হবে। এভাবে নির্দিষ্ট ফোল্ডারের মধ্যে যতগুলি HTML ফাইল তৈরী হবে সবগুলির একই বৈশিষ্ট হবে । অর্থ্যাৎ বার বার h1 এর Font Family ও Color বলে দিতে হবে না।

Syntax এর ফরম্যাট

Syntax এর ফরম্যাট হবে নিম্নরুপ:

1. Selector হলো HTML এলিমেন্ট/ট্যাগ যার মধ্যে CSS নির্ধারণ করা হয় । যেমন

<body>, <h1> বা <p> ইত্যাদি

2. Property হলো HTML ট্যাগের সাথে ব্যবহৃত Attributes যেমন

font- family, color, text-align ইত্যাদি

Selector ও Property একসাথে দিলে ফরম্যাট হবে

body { color:value ; text-align: value;} বা

h1 { color : value ; text-align: value;} ইত্যাদি

3. Value হলো HTML ট্যাগে ব্যবহৃত Attributes এর একটি মান । যেমন Color : red, Size: 20px, text- align: center ইত্যাদি। কাজেই পরিপূর্ণ ফরম্যাট হচ্ছে

css_part1_image3

লক্ষ্য করুন এখানে প্রথমে Selector দিতে হয়। পরে একটি ডিলিমিটার বা সেকেন্ড ব্রাকেট ({}) দিয়ে শুরু করতে হয় । এর পর Property দিতে হয় এবং একটি কোলন চিহ্ন (:) দিয়ে Value নির্ধারণ করে দিতে হয় এরপর একটি সেমিকোলন চিহ্ন (;) দিতে হয় । শেষে আবার একটি ডিলিমিটার বা সেকেন্ড ব্রাকেট দিয়ে শেষ করতে হয়- আবার Syntax লক্ষ্য করুন ।

body{color:red;}

যদি একাধিক Property দিতে হয় তবে একটি সেমিকোলন চিহ্ন দিয়ে পৃথক করে দিতে হয় । যেমন

P{font-family:arial;color:red;} বা

h1{font-family:arial;color:green;} বা

h2{font-family:arial;color:blue;}ইত্যাদি

তবে কোডিং করার সময় আলাদা আলাদা লাইন ব্যবহার করুন, এতে কোড বুঝতে সুবিধা হবে। যেমন-

{

font-family:arial;

color:red;

}

CSS এর প্রকারভেদ

আগেই বলেছি মোট ৩টি উপায়ে CSS লেখা সম্ভব-

1. ইনলাইন স্টাইল (Inline Style) – এটি HTML এলিমেন্ট/ ট্যাগের মধ্যে লিখতে হয় এবং style নামে একটি Keyword ব্যবহার করতে হয়।

<body>

একটু পরেই আমরা বাস্তব উদাহরণে চলে যাব।

2. ইন্টারন্যাল স্টাইল ( Internal Style ) এটি HTML ফাইলের <head> সেকশনের মধ্যে লিখে দিতে হয় এবং <style> নামের একটি ট্যাগ ব্যবহার করতে হয় যেমন

<head>

p{ color: red;>

</style>

</head>

3. এক্সটারন্যাল স্টাইল ( External Style ) এটি আলাদা একটি ফাইল লিখে .css নামে সেভ করতে হয় এবং পরে কোডিং দিয়ে HTML ফাইলের মধ্যে কল করতে হয় । মনে করুন MyStyle.css নামে একটি ফাইলের মধ্যে p{color:red;} নামে কোডিং করেছেন। এটিকে HTML ফাইলের মধ্যে আনার জন্য href বা hyper Reference কোড ব্যবহার করতে হবে এবং Head সেকশনে কোডিং হবে নিম্নরুপ

<head>

</head>

<body>

চলুন আমরা এখন style ব্যবহার করে কয়েকটি ফাইল তৈরী করে ফেলি। আমরা অবশ্য না জেনেই আমাদের HTML প্রোগ্রামগুলিতে বিভিন্ন style sheet ইতিমধ্যেই ব্যবহার করেছি । তবে এগুলি সব Inline style, এখন সম্পূর্ণ প্রক্রিয়াটি জানবো।

এটি Style বাদে একটি প্রোগ্রাম। Notepad ++ বা Dreamweaverএ নিচের মত কোডিংসহ একটি HTML ফাইল তৈরী করুন:

<!DOCTYPE html>

<html>

<head>

<title> example of CSS</title>

</head>

<body>

This is Normal body text.

<h1>Word Processor</h1>

Microsoft Word is a word processing program.

It is use to Write application, News Letter,

Writting Pad, etc.

<h1>Spread Sheet</h1>

Microsoft Excel is a Spread Sheet program.

Its devided by Row and Column. You can make

chart using Excel.

<h1>Database</h1>

Microsoft Access is a Spread Database

Managementprogram. It is use to create and analise table and database.

</body>

</html>

Editor এ নিচের মত দেখাবেঃ

ব্রাউজার দিয়ে খুললে নিম্নোক্ত ফলাফল পাওয়া যাবে।

এই প্রোগ্রামে আমরা কোন css কোড ব্যবহার করি নাই এজন্য p বা h1 বা body এর মধ্যে বার বার Value বলে দিতে হয়নি।

Previous Post Next Post

বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft Word

Writer: Bappi Ashraf

Published By: Gyankosh Prokashani

Amount of Pages: 464

First Publish: October-2004

Last Edition: We've February-2015 edition. Future edition may be existed!

Book Price: BDT 350 (30% Discount)

পরিবেশক/প্রাপ্তিস্থান
Online : www.rokomari.com

Facebook Page

RELATED POST LINKS BELOW ********************************************

Next_

Part- 01: CSS সিনট্যাক্স , Syntax এর ফরম্যাট ও CSS এর প্রকারভেদ

Part- 02: Inline Style

Part- 03: External Style Sheet,Multiple CSS ( Internal+External+Inline)

Part- 04: CSS Comments, ID ও Class

Part- 05: একাধিক Sector এ Class তৈরী

Part- 06: External CSS এ Class তৈরী

Part- 07: ID সিলেক্টর, Internal ID ও External ID তৈরী

Part- 08: Selector এর গ্রুপিং ও সুডো (Pseudo) ক্লাস এর ব্যবহার

Part- 09: Professional Project

Part- 10: CSS দ্বারা Background এর ব্যবহার

Part- 11: প্রোপার্টির কোডিং ছোট করে লেখা and SpecialProject (1)

Part- 12: প্রোপার্টির কোডিং ছোট করে লেখা and SpecialProject (2)

Part- 13: CSS দ্বারা Text Style, Text Color ও Text Alignment প্রোপার্টিজ

Part- 14: Text Decoration করা

Part- 15: Text Transformation ও Indentation

Part- 16: Character, Line ও Word Spacing

Part- 17: Text Direction ও VerticalAlignment

Part- 18: CSS দ্বারা Font Style, Weight ও Variant তৈরী করা

Part- 19: Properly কে শর্ট করা ও link Style করা

Part- 20: একাধিক Style প্রয়োগ ও list এর Style তৈরী করা

Part- 21: Unordered list-এর ব্যবহার (list-style-type)

Part- 22: List এ ইমেজের ব্যবহার, Position ঠিক করা ও একাধিক value ব্যবহার

Part- 23: CSS Float এর ব্যবহার, Float এ ইমেজ, Border, margin ও Text সংযোজন

Part- 24: Horizantal Menu তৈরী করা এবং কিছু কোডিং এরব্যবহার

Part- 25: CSS এ Border ব্যবহার ও Customize করা

Part- 26: একসাথে সব প্রোপার্টিজ ওCSS Outline এর ব্যবহার

Part- 27: একাধিক Properties ও CSS Margin এর ব্যবহার

Part- 28: আলাদা আলাদা মার্জিন সেটিং ও CSSPadding এর ব্যবহার

Part- 29: CSS Box, BorderRadius, Image ও Shadow এর ব্যবহার

Part- 30: CSS Table , Single Border তৈরী করা,

Part- 31: Nesting Selector, CSSNevigation Bar এর ব্যবহার

Part-32: CSS Height ও Width এর ব্যবহার,

Part- 33: CSS Positioning ঠিক করা

Part- 34: Overlapping ও Clipping element ও Overflow নিয়ন্ত্রন করা

Part- 35: হরেক রকম কার্সর , CSS-এ এলিমেন্টকে Hide করা

Part- 36: CSS Align এর ব্যবহার ও সকল ব্রাউজারে প্রর্দশন উপোযোগী করা

Part- 37: সকল ব্রাউজারে প্রর্দশন উপোযোগী করা ও ইমেজ গ্যলারি তৈরী করা

Part- 38: ইমেজের অপাসিটি নিয়ন্ত্রন ও Navigation list তৈরী

Part- 39: Hover দেওয়া , ২ টি element একসাথে ব্যবহার

Part- 40: Focus–pseudo-code, সুডো এলিমেন্টের ব্যবহার

Part- 41 : Professional ProjectFinal (Special Project)

Part- 42: About Us.html page তৈরী করা, Text Effect ও Multiple Column

ICT & others Information

know yourselves. information, computer, 7 wonders, various.

Monday, August 29, 2016

css_part2

css_part1- CSS সিনট্যাক্স , Syntax এর ফরম্যাট ও CSS এর প্রকারভেদ

Search

Featured

New 7 wonders and other nominees

Followers

Popular Posts

Archive