Your SlideShare is downloading. ×
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Hardcore CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hardcore CSS

1,190

Published on

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

No Downloads
Views
Total Views
1,190
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Upload slides before talk, and post the link here
  • What is CSS? Basically, it’s a way of making your HTML styled how you want it to look.Stylesheets were even built into Tim Berner’s Lee (the creator of HTML and, basically, the web) – although it was up to browser makers to manage it.People wanted more control over this new medium. Existing publishing tools like LaTeX could trivially manage layout in ways that weren’t possible in the web. People wanted more.
  • Håkon Lie was a physicist atCERN who wanted more powerful presentation.
  • Is there a CSS4? Yep! But no one supports it, so who cares? Let’s go back to CSS3!
  • elements match all HTML element types. These are the easiest and weakest way to match.
  • Classes match any element that have the matching classes names, and are prefixed with a dot. They don’t have to be the same elements type and there can be as many copies of the same class name as you want. You can have a superhero for
  • IDs are the most restrictive, and there should only ever be one matching ID in a document. Don’t reuse IDs. Ever. For any reason…. Ever.IF you aren’t sure when making an HTML document if you’ll ever have more than one, then just use a class.
  • IDs are the most restrictive, and there should only ever be one matching ID in a document. Don’t reuse IDs. Ever. For any reason…. Ever.IF you aren’t sure when making an HTML document if you’ll ever have more than one, then just use a class.
  • Finally, selectors nest.
  • Finally, selectors nest. The section’s “h1” will be blue, but not h1’s that aren’t inside a section tag.
  • Selector Specificity is the algorithm used to decide which settings win when there’s a conflict
  • Even though we thought we were coloring the name Joe to be blue, it was overridden by the “#person div” selector. But why?
  • You must computer selector specificity.
  • This is a tabular example of what they’re talking about. It’s fine if you’re implementing a browser, but who wants to calculate just to figure out the winner?
  • If an element isn’t showing up the way you think it should, it’s easy to compare why one selector is winning over another one.
  • If an element isn’t showing up the way you think it should, it’s easy to compare why one selector is winning over another one.If one is greater than another, you’re done! That selector will win.If they’re equal, move onto the next selector grouping.
  • Going through this list one at a time would be boring, and you can look all these up. So instead, here are a couple real use-cases that use these selectors:”class” is just an attribute, so we can use these selectors to partially match them.
  • By this point you’re hopefully good and bored. Part of the reason people are so bad at CSS is because to do the cool interesting stuff, you have to really understand the dull boring stuff. And sadly, not enough designers bother getting to that point, instead opting to just start copy and pasting other people’s work. That’s fine, but it’s better to know yourself.
  • Tracking is letter-spacing
  • C5: How do we get an outline around our little stitching pattern here?
  • C6:
  • C7:
  • C8: shadows get blurrier the further away from the source. If you’re rotating, they also need to move to keep the light source the same.
  • Media represents the actual device you’re viewing your page on.
  • These may not be best practices, but they’re certainly things I like to do.
  • all values will be the same, including font sizes.Resets are built into most modern CSS libraries, YUI, blueprint, html5 boilerplate… but if you aren’t using one, just download the YUI Yahoo User Interface
  • An “em” (pronounced “em”, not E-M”) is a unit of measure that represents the text size. It’s a measure in typography back when metal blocks were cut for types. It’s roughly equivalent to the capital letter “M”.Anyway, in web browsers this typically defaults to 16px.The “html” is for older IE browsers, while body is for every other browser.
  • Interesting thing about layouts. It’s probably the most basic thing that all web designers need to do – but it’s not drop dead simple. You’re probably used to using floats, then clearfixing sections, and it’s never certain how it’ll act in browsers
  • The reality is there are many reasons to create columns. The simplest one is that you have some text you want in two columnsC9
  • You’ve probably done a multi-column layout. The standard method is to create a couple divs, give them each a width, then float them both so they line up side-by-side.Show HTML as sections setup using floats. Switch to boxesC9
  • Elastic layouts are similar to fixed, but based on ems rather than pixels. As font size increases, the container’s width attempts to match. However, resizing a container measured in ems won’t change the container size. Modern browsers are increasingly removing the necessity of elastic designs, since most now resize pixels as well.
  • Fluid layouts are based on percentages. So, you may have two columns where the left is 30% and the main column is 70%.
  • Responsive will change based on the device width. Use media queries to adjust layout.
  • The September monthly meetup is cancelled because, instead, we’re hosting RailsGirls. An international organization dedicated to increasing the presence of women who code.
  • Transcript

    • 1. HARDCORE CSS Eric Redmond @coderoshi PDX Web & Design
    • 2. A SHORT HISTORY OF Hardcore CSS CSS
    • 3. CSS Cascading Style Sheets A SHORT Separates style from HISTORY OF CSS substance  (separate from HTML)Stylesheets non-standard In 1990 TBL separated docs from layout Each browser decided doc style
    • 4. Cascading HTML style sheets – a proposal A SHORT Oct 10, 1994 HISTORY OF CSS Håkon W Lie (CERN) proposes
    • 5. Cascading HTML style sheets – a proposal A SHORT Oct 10, 1994 HISTORY OF CSS Håkon W Lie (CERN) proposes
    • 6. Cascading HTML style sheets – a proposal Oct 10, 1994 A SHORT Håkon Lie (CERN) HISTORY OF CSS Bert Bos was first adoptorCascading? An ordered list of stylesheets, that start with the first, and values are added/overridden by later SS1995-1996 Netscape, IE and others added support CSS Level I emerged from W3C draft in Dec 1996
    • 7. CSS2 1998 Level 2 was proposed A SHORT Adoption was relatively fast HISTORY OF CSSCSS3 First draft published in 1999 Divided into 50 modules Still being fucking written Sllloooowwww adoption…CSS4 Started in 2009 Not support at all
    • 8. HardcoreSELECTORS CSS
    • 9. UniversalElementsClasses SELECTORSIDsAttributesPseudo classesPseudo elements
    • 10. <em>I’m Arial too!</em>*{ SELECTORS font-family: Arial; U n i v e r s al}
    • 11. <strong> hulk smash</strong> SELECTORS Elementsstrong { color: green; text-transform:uppercase;}
    • 12. <span class=superhero> Iron Man</span> SELECTORS Classes.superhero { font-family: International Super Hero ;}
    • 13. <div id=main> My main content.</div> SELECTORS IDs#main { border:1px solid green; padding:1em;}
    • 14. <article role=main> My main content.</article> SELECTORS IDs[role=main] { border:1px solid green; padding:1em;}
    • 15. <ul> <li>Item 1</li> <li>Item 2</li> SELECTORS</ul> Pseudo Classesli:first-child { color:red;}
    • 16. <h1> Excelsior</h1> SELECTORS Pseudo Elementsh1:after { content: !;}
    • 17. <h1>Page Title<h1><section> <h1>Section Title</h1> SELECTORS</section> Nestingsection h1 { color:blue;}
    • 18. <h1>Page Title<h1><section> <h1>Section Title</h1> SELECTORS</section> Nestingsection h1 { color:blue;}
    • 19. HardcoreSPECIFICITY CSS
    • 20. <section id=person><div id=name>Joe</div><div>A nice guy</div> SELECTOR SPECIFICIT Y</section> What wins?#person div { color:red;}#name { color:blue;}
    • 21. SELECTORSPECIFICIT Y
    • 22. SELECTOR…What? SPECIFICIT Y
    • 23. SELECTOR SPECIFICIT Ywww.w3.org/TR/css3-selectors/#specificityCalculating a selectors specificity  count the number of ID selectors in the selector (= a)  count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)  count the number of type selectors and pseudo-elements in the selector (= c)  ignore the universal selector
    • 24. CALCULATIONSelector a b c Specificity* 0 0 0 0li 0 0 1 1ul li 0 0 2 2ul li:after 0 0 3 3h1 *[rel=up] 0 1 1 11ul li span.red 0 1 3 13li.red.level 0 2 1 21#name 1 0 0 100#person div 1 0 1 101
    • 25. EASIER WAYI.C.A.T.  IDs > Classes/Attributes > Types  Pseudos are of their kind  Pseudo-classes are classes  Pseudo-elements are elements (types)
    • 26. EASIER WAY1. Compare the count of IDs  div#content *[role=main] section#person = 2  section#person div#name .superhero:last = 22. Compare the count of Classes+Attributes  div#content *[role=main] section#person = 1  section#person div#name .superhero:last = 13. Compare the count of Types  div#content *[role=main] section#person = 2  section#person div#name .superhero:last = 3
    • 27. HardcoreADVANCED(ISH) DETAILS CSS
    • 28. The Box Model THE BOX MODEL
    • 29. More Box Model THE BOX MODEL
    • 30. [attr] – attr exists[attr=val] – value equals ATTRIBUTE[attr~=val] – exists in MATCHING whitespace set[attr|=val] – value followed by a dash[attr^=val] – value begins with[attr$=val] – value ends with[attr*=val] – value contains
    • 31. :nth-child(N):nth-last-child(N) PSEUDO:nth-of-type(N) CLASSES:first-child:last-child:empty:target:enabled:disabled:not(S)
    • 32. HardcoreCSS3 FUN THINGS CSS
    • 33. Fonts Typekit Google Fonts FontSquirrelBaby Typography Tracking (not Kerning) LeadingShadows
    • 34. Boxes Border types Border Radius Outline Box Shadowbox-shadow: 6px 6px 6px 6px #666; [right] [down] [blur] [width] #[color];
    • 35. Backgrounds Gradients  lea.verou.me/demos/cssgradient splease Patterns  lea.verou.me/css3patternsbackground-image: -webkit-linear-gradient( bottom, rgb(4,4,133) 15%, rgb(40,66,171) 58% );
    • 36. Transforms Most browsers require a prefix -o-transform: …; -ms-transform: …; -moz-transform: …; -webkit-transform: …;
    • 37. Rotate transform: rotate(20deg);Scale transform: scale(2, 2);
    • 38. Transitions Best in reaction to something! Timing Easing
    • 39. HardcoreMEDIA CSS
    • 40. MEDIA T YPESMedia Type Descriptionall All media type devicesaural Speech and sound synthesizersbraille Braille tactile feedback devicesembosses Paged braille printershandheld Small or handheld devicesprint Printersprojection Projected presentations, like slidesscreen Computer screens (and mobile screens)tty Media using a fixed-pitch character grid, like terminalstv Television-type devices
    • 41. External Media Attribute <link rel="stylesheet” media="print" MEDIA href="printer.css" />Inline Media Rule @media print { body { color:black; } }
    • 42. Hardcore(BEST?) PRACTICES CSS
    • 43. Problem: Browsers still have different default behaviors BEST PRACTICESSolution: Reset CSS
    • 44. *{ vertical-align: baseline; font-weight: inherit; BEST PRACTICES font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0;}
    • 45. yui.yahooapis.com/3.5.1 /build/cssreset /cssreset.css
    • 46. Problem: Some Browsers (*cough*IE*cough*) do not BEST recognize HTML5 elements PRACTICES (Best?)Solution: P r a c t i ce s Modernizr
    • 47. Problem: Some browsers pre implemented CSS3 BEST PRACTICESSolution: (Best?) P r a c t i ce s Know the prefixes  -o- = Opera  -moz- = Mozilla (Firefox)  -webkit- = Webkit (Chrome, Safari, iOS)
    • 48. Problem: EMs are inconsistentSolution: BEST PRACTICES Set font size to 10px (Best?) P r a c t i ce shtml, body { font-size:10px;}
    • 49. HardcoreLAYOUTS CSS
    • 50. Classic floats One True Layout  positioniseverything.net/articles/ onetruelayout LAYOUTS Floats The Holy Grail  alistapart.com/articles/holygrail
    • 51. Multicolumns LAYOUTS CSS3 M u l t ic o l umn s
    • 52. Display Box LAYOUTS C S S 3 D i s p l ay B ox
    • 53. Elastic LAYOUTS Elastic
    • 54. Fluid LAYOUTS Fluid
    • 55. Responsive Just change layout using media queries LAYOUTS Re s p o n s i ve@media only screen and(max-device-width: 480px) { body { font-size:10px; }}
    • 56. Summer Social & Lightning Talks PDX W&D UPCOMING Thursday, Aug 9 Webtrends (that would be here)Rails Girls PDX September 7-8 Signup at RailsGirls.com (ladies only)

    ×