CSS tutorial

2,113 views
1,982 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,113
On SlideShare
0
From Embeds
0
Number of Embeds
121
Actions
Shares
0
Downloads
184
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS tutorial

  1. 1. CSSCascading Style Sheets<br />Md. Shajed E Islam<br />
  2. 2. What is CSS?<br />CSS stands for Cascading Style Sheets<br />Styles define how to display HTML elements<br />External Style Sheets can save a lot of work<br />External Style Sheets are stored in CSS files<br />
  3. 3. Benefits of Using CSS<br />
  4. 4. Separate content from<br />Fast loading pages<br />Small file size<br />Save time<br />Save money<br />Flexibility of design.<br />Way of the future<br />Print friendly<br />
  5. 5. CSS Syntax<br />A CSS rule has two main parts: a<br />selector, and one or more declarations:<br />
  6. 6. CSS Example<br />p{color:red;text-align:center;}<br />P {color:red; text-align:center; }<br />/*This is a comment*/<br />
  7. 7. CSS Id and Class<br />
  8. 8. #para1{ text-align:center; color:red;}<br />.center {text-align:center;}p.center {text-align:center;} <br />Example id/class<br /><p id=“center”></p><br /><p class=“center”></p><br />Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.<br />Do NOT start a class name with a number! This is only supported in Internet Explorer.<br />
  9. 9. Three Ways to Insert CSS<br />External style sheet<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head><br />Internal style sheet<head><style type="text/css">body {background-image:url("images/bg.gif");}</style></head><br />Inline Styles<br /><p style="color:#000; margin-left:20px;">This is a paragraph.</p><br />
  10. 10. CSS properties<br />
  11. 11. Margin Vs Padding - CSS Properties<br />
  12. 12. Grouping and Nesting Selectors<br />h1,h2,p{color:green;}<br />.marked p{color:white;}<br />
  13. 13. CSS Display and Visibility<br />div.login {visibility:hidden;}<br />div.login {display:none;}<br />display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it. Visibility:hidden means the tag is not visible, but space is allocated for it.<br />
  14. 14. CSS Positioning<br />
  15. 15. CSS Float<br />
  16. 16. CSS z-index<br />
  17. 17. CSS Image Opacity<br /><imgsrc=“logo.jpg" width="150" height="113" alt=“bglobal"style="opacity:0.4;filter:alpha(opacity=40)" /><br />
  18. 18. Pseudo-classes<br />a:link {color:#FF0000;}      /* unvisited link */a:visited {color:#00FF00;}  /* visited link */a:hover {color:#FF00FF;}  /* mouse over link */a:active {color:#0000FF;}  /* selected link */<br />
  19. 19. CSS Navigation Bar<br /><style type="text/css"><br />ul{ list-style-type:none; margin:0; padding:0; overflow:hidden;}<br />li{ float:left;}<br />a:link,a:visited{ display:block; width:120px; font-weight:bold; color:#FFFFFF;<br />background-color:#98bf21; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; }<br />a:hover,a:active { background-color:#7A991A; }<br /></style><br />
  20. 20. <ul><br /><li><a href="#">Home</a></li><br /><li><a href="#">About</a></li><br /><li><a href="#">News</a></li><br /><li><a href="#">Contact</a></li><br /></ul><br />
  21. 21. Reference<br />http://www.w3schools.com/css<br />
  22. 22. Thanks<br />

×