Recommended
More Related Content
What's hot
What's hot (20)
Similar to Css intro
Similar to Css intro (20)
Recently uploaded
Recently uploaded (20)
Css intro
- 2. CSS • Cascading Style Sheets • CSS defines how HTML elements are to be displayed • The style sheet file must be saved with a .css extension
- 3. WAYS TO INSERT CSS • External style sheet • Internal style sheet • Inline style
- 4. STYLE PRECEDENCE IN CSS • Browser defaults • External style sheet • Internal style sheet • Inline style
- 6. STATEMENT STRUCTURE • Selector • Curly braces • Properties divided by a colon
- 7. SELECTORS
- 8. HTML TAG • body {} • span {} • div {} • p {}
- 9. ID / CLASS • Case sensitive • #my-id {} • #txtBox {} != #TxtBox {} • span#some-id {} • .myClass {} • div.class {}
- 10. DESCENDANT • The descendant selector matches all elements that are descendants of a specified element. • .parent .who-is-my-father {} • div span#i-am-inside {}
- 12. CHILD SELECTOR • The child selector selects all elements that are the immediate children of a specified element • #papa > .baby {}
- 13. ADJACENT SIBLING SELECTOR • The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element • Sibling elements must have the same parent element, and "adjacent" means "immediately following” • #me + .my brother {}
- 14. GENERAL SIBLING SELECTOR • The general sibling selector selects all elements that are siblings of a specified element • div ~ brothers
- 16. PSEUDO SELECTORS • Used to define a special state of an element • selector:hover {} • selector:first-child {} • selector:nth-child(n) {}
- 17. GROUPING • h1, h2, h3 {} • footer, header {} • #green-element, #blue-element {}
- 18. COMMENTS • /* Hi there, I am a comment */ • Please avoid these, css is self explanatory
- 20. BROWSER SUPPORT • Beware with CSS3 • http://www.w3schools.com/cssref/css3_brow sersupport.asp
- 21. JUST SAYING….
- 22. PROPERTIES
- 23. BOX MODEL • All HTML elements can be considered as boxes • The CSS box model is essentially a box that wraps around HTML elements • The box model allows us to add a border around elements, and to define space between elements
- 24. MARGINS, PADDING, BORDER • p {padding : 20px} • span {border : 2px solid silver} • div {margin : 5px 10px 7px 9px} • p {margin : 10px 5px} • {top, right, bottom, left} / {top-bottom, right- left}
- 26. POSITION • static - HTML elements are positioned static by default • relative - positioned relative to its normal position • fixed - is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled • absolute - is positioned relative to the nearest positioned ancestor
- 27. USEFUL PROPERTIES • color : red / #FF0000 / rgb(255,0,0) • font-size: 16px (browser default) • width: 160px / 90% • height: 20px
- 28. DISPLAY • The display property specifies the type of box used for an HTML element • inline (default) - depends on content size • inline-block - depends on specified width • block - depends on ancestor (parent) size
- 30. THE INVISIBILITY CLOAK • display : none • No space allocated for it. • You can still interact with it through the dom • visibility : hidden • The tag is not visible, but space is allocated on the page.
- 32. BEST PRACTICES • Use useful naming conventions • You shouldn’t have to rename the element in your HTML and rename the id in your style sheet just to change its position • Big no no: #red-label • Another BIG no no: #home-page-footer • Avoid !important
- 34. CSS IN THE <HEAD> • When you have the CSS declared before <body> starts, your styles has actually loaded already • This way you don't render ugly html - html elements are rendered with their styling. • This way very quickly users see something appear on their screen (e.g. background color). • This way you avoid double rendering - If you leave the the styles somewhere in the body, the browser has to re-render the page (new and old styling) when the styles declared are parsed. • This way you avoid triple rendering - in cases where you have overriding css statements
- 35. RESET.CSS VS. NORMALIZE.CSS • Different browsers come with different defaults • Reset.css aims to remove all built-in browser styling. • Standard elements like H1-6, p, span, div… end up looking exactly alike, having no decoration at all. You're then supposed to add all decoration yourself • Normalize.css preserves useful defaults rather than "unstyling" everything
- 36. BOOTSTRAP • Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web • http://getbootstrap.com
- 37. SOME EXTRAS • Css 3 • Responsive design • Sprites • Sass (Syntactically Awesome Style Sheets) and other css extensions