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