• 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

Views

Total Views
1,170
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
265
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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