Css training


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Css training

  1. 1. CSS Overview You know what CSS is: CASCADING STYLE SHEETS. Styling of HTML elements VIA standard rules.
  2. 2. Important Topics 1. CSS Syntax / Selectors 2. Including CSS Rules 3. CSS Box Model 4. Floating/Clearing Effectively 5. Positioning 6. Use of “!important” declaration 7. Responsive Considerations
  3. 3. Elements, IDs, Classes ID (#foo {prop: set;}) One instance per page (usually). Class (.foo {prop: set;}) Multiple instances per page (often). HTML Element (foo {prop: set;}) Vague! But powerful!
  4. 4. Specificity in Selectors Show “lineage” of element (#wrapper #content .cool) Build with effective use of IDs and classes site-wide. Pseudo-selectors: don’t rely on them too much.
  5. 5. Ways to Include Rules External Stylesheet (Preferred!) <style> Tag (Helpful! But not portable!) Inline style=“” attribute (Powerful! But messy!)
  6. 6. <link> to External Styles Remember position in DOM; later rules will overwrite earlier rules Allows you to keep styles isolated (forms, etc.) and allows portability of styles Makes site-wide styling edits easy! Easy to reference in Chrome Developer Tools
  7. 7. <style> Tags Useful for single-page styles Hacky solution for weirdo CMSes (hiding elements that you need to hide, etc.) Not portable, but lets you target multiple elements on the same page VIA IDs, classes, and HTML elements. Happy friday
  8. 8. Inline style=“” Attributes Browser gives style=“” attributes most priority. Ve r y p o w e r f u l ! ! Must be manually replicated; not portable! Makes HTML messy Useful for JavaScript stuff
  9. 9. More on Specificity… Depending on ordering in DOM and degree of specificity of rule declarations, the more specific rule will override another. In other words, if one set of rules comes after another set, rules with the same specificity will be overridden.
  10. 10. What the heck is it Established primarily by the width/height, padding, margin and border of an object. Accounts for the on-page space that a block object occupies over the course of a page (total width / height). Determines if a float can happen.
  11. 11. Here’s some dumb math LEFT MARGIN + LEFT BORDER WIDTH + LEFT PADDING + WIDTH + RIGHT PADDING + RIGHT BORDER WIDTH + RIGHT MARGIN =============== "Calculated" Width
  12. 12. Width and Height Raw width / height of an element. How much space it occupies with no modification. For instance, a 360px wide image, before any borders are margins, occupies that much space. Use “Inspect Element” in Chrome to determine calculated dimensions with all modifiers.
  13. 13. Padding Spacing “inside” of an element’s borders. Padding cannot be negative. Constrains content to calculated width; when padding is in a nested element, parent will not expand.
  14. 14. Borders Reside outside of padding, inside of margin. They’re just like a line you can place around an element. You’ll probably see them a lot. Check out the cool border on this. Can be styled in stupid ways (dotted, colored). Still count to total calculated size.
  15. 15. Marginzzzzzzzzzzzzzzzzzz Extends from element’s border. Gives form to spacing outside of an element. Most useful for positioning elements normally. Try to use this instead of “top” etc. when possible; only use that for weirdo positioning. Set left & right margins to “auto” on block elements with set width to center the element. Doesn’t work for top/bottom margins.
  16. 16. Misc. Box Model Stuff Child elements must fit within the “width” property of parent elements (not calculated) There’s also the “outline” property that’s similar to a border, but does not count to calculated width SHORTCUTZZ: margin/padding: TOP, RIGHT, BOTTOM, LEFT element {margin: 200px 0;} element { padding: 1px 2px 3px;} border: WIDTH, STYLE, COLOR element {border: 1px solid #fff;}
  17. 17. Floats Neatly organize block/inline-block elements. You can float right, none or left, it’s up to you! But try to float left as much as possible. (LTR reading, old Internet Explorer) Takes into consideration box model for width. Blocks can float around inline content (text). Parent element must float to inherit heights!
  18. 18. CLEAR THE FLOATS Used in unison with floats to “clear” a “line” from a float. Cleared elements allow more floats to happen on next line. Left, Right or Both Depending on placement of element, use left or right. Clearing “BOTH” makes an element appear on its own, devoid of floats
  19. 19. “Styles” of position: Static – Default. Try to use as much as possible. Based on DOM flow. Relative – Follows DOM. Relative to STATIC position. Absolute – Relative to first non-static parent. Useful for form label placement within input fields. Fixed – ALWAYS stays in place. Useful for “sticky” nav bars, etc. You don’t wanna use this much. Gangnam Style - just kiddin
  20. 20. “Positions” for position: Top, right, bottom, left are all CSS properties. Set px or %. Allow you to adjust placement of an object while utilizing the value set for the “position” property. Positioned elements still can use margins! Use with caution.
  21. 21. Allows for the overlap of elements when using positioning. Z probably refers to like, X, Y, and Z coordinates; depth. Just a numerical value with no unit. Keep track of z-indexed elements. Z-INDEX
  22. 22. You should be writing good, specific CSS. However, sometimes you really need to override something. Use the “!important;” declaration RARELY, since, like, if everything’s important, nothing’s important. B-) When to Use “!important”
  23. 23. What’s Responsive???? Similar user experience for multiple devices. Usually constrained to WIDTH of view. Use percentages instead of fixed units. Look at 800theface.com! CSS rules for “break” points within viewable zones.
  24. 24. When doing custom work for a client’s site (implementing forms, a 404 page or whatever) take into consideration if the site’s responsive. Work with the AM & Graphics to mockup alternate approaches to maintain responsive stuff. Is the Site Responsive?
  25. 25. By!!!!!!!!!!!!!!!!!!!!!!!!!! Later!!!!!!!