SlideShare a Scribd company logo

Css intro

•Download as PPTX, PDF•
•
Julia Vi
Julia Vi

The document discusses key concepts in CSS including selectors, the box model, positioning, and best practices. Some key points covered include: - CSS defines how HTML elements are displayed and styled. - There are different ways to insert CSS like external, internal, and inline styles. More specific styles have precedence. - Selectors target elements using tags, IDs, classes, descendants, children, siblings and pseudo-classes. - The box model describes the sizing of elements including margins, padding, borders, and positioning. - Common properties control colors, fonts, widths, heights, and visibility of elements. Best practices encourage semantic naming and avoiding !important.

1 of 38
Julia Vishnevsky
CSS • Cascading Style Sheets • CSS defines how HTML elements are to be displayed • The style sheet file must be saved with a .css extension
WAYS TO INSERT CSS • External style sheet • Internal style sheet • Inline style
STYLE PRECEDENCE IN CSS • Browser defaults • External style sheet • Internal style sheet • Inline style
Css intro
STATEMENT STRUCTURE • Selector • Curly braces • Properties divided by a colon
SELECTORS
HTML TAG • body {} • span {} • div {} • p {}
ID / CLASS • Case sensitive • #my-id {} • #txtBox {} != #TxtBox {} • span#some-id {} • .myClass {} • div.class {}
DESCENDANT • The descendant selector matches all elements that are descendants of a specified element. • .parent .who-is-my-father {} • div span#i-am-inside {}
Css intro
CHILD SELECTOR • The child selector selects all elements that are the immediate children of a specified element • #papa > .baby {}
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 {}
GENERAL SIBLING SELECTOR • The general sibling selector selects all elements that are siblings of a specified element • div ~ brothers
Css intro
PSEUDO SELECTORS • Used to define a special state of an element • selector:hover {} • selector:first-child {} • selector:nth-child(n) {}
GROUPING • h1, h2, h3 {} • footer, header {} • #green-element, #blue-element {}
COMMENTS • /* Hi there, I am a comment */ • Please avoid these, css is self explanatory
Css intro
BROWSER SUPPORT • Beware with CSS3 • http://www.w3schools.com/cssref/css3_brow sersupport.asp
JUST SAYING….
PROPERTIES
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
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}
Css intro
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
USEFUL PROPERTIES • color : red / #FF0000 / rgb(255,0,0) • font-size: 16px (browser default) • width: 160px / 90% • height: 20px
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
Css intro
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.
Css intro
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
Css intro
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
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
BOOTSTRAP • Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web • http://getbootstrap.com
SOME EXTRAS • Css 3 • Responsive design • Sprites • Sass (Syntactically Awesome Style Sheets) and other css extensions
Css intro

More Related Content

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
  • 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
  • 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