• Like
Css by tanbircox
Upcoming SlideShare
Loading in...5
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comCSS টিউিটিয়াল (প্রাথটিক ধািণা ও সহজ একটি প্রজজক্ট)HTML এক ক HTML‚ HTML ক কক আ CSS ক ক ‛CSS ক এ ক ? এ এ Cascading Style Sheets HTML ক ক ( ) ক ক ক HTML এ CSS ক ক CSS এ ক আ আ HTML এ ক ক ক CSS এ ক এক ক
  • 2. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comএক এ এ HTML<html><head><style type="text/css">body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;}</style></head><body><h1>CSS example!</h1><p>This is a paragraph.</p></body></html>এ , <style type=‛text/css‛> “. </style> এ এ এ ক
  • 3. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comCSS এ ক ( : , )/*“*/ এ -/*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;}ক ক id এ # id’-#para1{text-align:center;color:red;}HTML ক এ এ ক ক :<p id="para1">Hello World!</p>এক class এ . class এCSS এp.center{text-align:center;}HTML ক এ এ ক ক :<p>This paragraph will be center-aligned.</p><html><head><style type="text/css">p.center
  • 4. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.com{text-align:center;}</style></head><body><h1>This heading will not be affected</h1><p>This paragraph will be center-aligned.</p></body></html>১. এ এ ক ক২. ক ক৩.ক এ এ ক .css কক এক এ এ mystyle.css mystyle.css ক আhr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}এ ক ক html ক<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>ক এ এ ক ক ক ককএক ক HTML CSS ক <style type=‛text/css‛> “ </style>এ CSS ক<head><style type=‛text/css‛>hr {color:sienna;}p {margin-left:20px;}body {background-image:url(‚images/back40.gif‛);}</style></head>
  • 5. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comএ এ ক ক ক এ আ<p style=‛color:sienna;margin-left:20px‛>This is a paragraph.</p>এক ক ক এ ক ক কব্যাগ্রাউন্ড টিক্সজিি টিজাইজন আনুন নতুন িাত্রাএ এ ক ক এ কআ ক কআ ক ক ক এ এ ক :h1{background-color:#6495ed;}p{background-color:#e0ffff;}div{background-color:#b0c4de;}ক ক :<html><head><style type="text/css">h1{background-color:#6495ed;}p{
  • 6. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.combackground-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 its own background color.</p>We are still in the div element.</div></body></html>body {background-image:url(‘paper.gif’);}আ ( ) ,
  • 7. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.combody{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 CSSBackgroundSets all the background properties inone declarationbackground-colorbackground-imagebackground-repeat background-attachment background-positioninherit1background-attachmentSets whether a background image isfixed or scrolls with the rest of the pagescrollfixedinherit1background-color Sets the background color of an elementcolor-rgbcolor-hexcolor-nametransparentinherit1background-imageSets the background image for anelementurl(URL)noneinherit1background-positionSets the starting position of abackground imagetop lefttop centertop right1
  • 8. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y%xpos yposinheritbackground-repeatSets if/how a background image will berepeatedrepeatrepeat-xrepeat-yno-repeatinheritএব্াি আিিা টদখজব্া টলখাি টসৌন্দর্য ব্ৃটিি ঩িটত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;}
  • 9. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comp.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}এ আ ক আ ক আ ক আ এএ ক কসুন্দি সুন্দি ব্ক্স িজিলএ ক এ এ এ আ কএ এ এ এ এ আ এআ ক ক এ এ এক ক কwidthborder , কpadding ক আmarginwidth, padding, margin paddingএ ক ককbox {width: 200px;border: 10px solid #99c;padding: 20px;margin: 20px;}
  • 10. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comএ ক :border-styleborder-widthborder-colormargin-leftmargin-rightmargin-bottommargin-toppadding-leftpadding-rightpadding-toppadding-bottomএ কbody{font-family:Arial, Helvetica, sans-serif;font-size:13px;}.info, .success, .warning, .error, .validation {border: 1px solid;margin: 10px 0px;
  • 11. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.compadding:15px 10px 15px 50px;background-repeat: no-repeat;background-position: 10px center;}.info {color: #00529B;background-color: #BDE5F8;background-image: url(info.png);}.success {color: #4F8A10;background-color: #DFF2BF;background-image:url(success.png);}.warning {color: #9F6000;background-color: #FEEFB3;background-image: url(warning.png);}.error {color: #D8000C;background-color: #FFBABA;background-image: url(error.png);}<div class="info">Info message</div><div class="success">Successful operation message</div><div class="warning">Warning message</div><div class="error">Error message</div>আ এ ক আ
  • 12. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comটব্টি টকছু না, টসএসএস (CSS) ১০টি টি঩স টদখুন১. িিয হযান্ড টকাটিিংক এ ক -/* MARGIN */h1 {margin:1em 0 2em 0.5em;}h1 {margin-top:1em;margin-right:0;margin-bottom:2em;margin-left:0.5em;}/* BORDER */h1 {border:1px solid #000;}h1 {border-width:1px;border-style:solid;border-color:#000;}/* BORDER WIDTH */h1 {border-width:1px 2px 3px 4px;}h1 {border-top-width:1px;border-right-width:2px;border-bottom-width:3px;border-left-width:4px;}/* BACKGROUND */div {background:#f00 url(background.gif) no-repeat fixed 0 0;}div {background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:0 0;
  • 13. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.com}/* FONT */h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}h1 {font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:"Lucida Grande",sans-serif;}/* LIST STYLE */ul {list-style:square inside url(image.gif);}ul {list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);}/* OUTLINE */h1 {outline:#f00 solid 2px;}h1 {outline-color:#f00;outline-style:solid;outline-width:2px;}id ক # এ class ক . এ কক আ আ : , ক এ এdiv ক
  • 14. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comএ এ কFireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.আ ক ক ক !important ক এ -.page { background-color:blue !important; background-color:red;}এ এ কa, input {outline:none;}ক ক কa:link {color: #000;text-decoration: underline}a:visited {color: #666;
  • 15. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.com}a:hover {color: #333;text-decoration: none;}a:active {color: #333;text-decoration: none;}a, input {outline:none;}h1, h2, h3, h4, h5, h6 {font-family:arial;margin:0.5em 0;padding:0;}ক ক ক
  • 16. Want more Updates  http://facebook.com/tanbir.ebooksfacebook /gmail/skype: - http://tanbircox.blogspot.comইন্টািজনি হজত সিংগ্রহীত http://techtunes.com.bd/tuner/tanbir_cox http://tunerpage.com/archives/author/tanbir_cox http://somewhereinblog.net/tanbircox http://pchelplinebd.com/archives/author/tanbir_cox http://prothom-aloblog.com/blog/tanbir_coxhttp://facebook.com/tanbir.coxhttp://facebook.com/tanbir.ebookshttp://tanbircox.blogspot.com