Girl Develop It Cincinnati: Intro to HTML/CSS Class 4


Published on

Published in: Technology
1 Like
  • Be the first to comment

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

No notes for slide

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4

  1. 1. If you have not already done so, please download Aptana: GDI CincinnatiIntro to HTML/CSS: Class 4 Erin M. Kidwell / @erinmkidwell/ John David Back / @johndavidback /
  2. 2. Agenda1. Review of terms, topics, and styling2. Print stylesheets3. Layouts4. HTML55. Detecting browser support6. CSS3 Rounded corners / unevenly rounded corners Drop shadows / inset shadows Text shadows Color: RGBA / HSL / HSLA Animations: CSS Transforms / Transitions7. Bonus exercises Building a menubar Building a two column layout
  3. 3. Review: TermsBrief Review of HTML Terms • Tag • Elements • AttributesBrief Review of CSS Terms • Element Selector • Class Selector • Id Selector • Pseudoclasses
  4. 4. Quiz<html> A) ID Selector<head> B) Element Selector <style> C) Class Selector .SamplePics { border: 2px solid pink } </style></head><body> <img src=“sample_picture.jpg” alt=“Sample”Width=“100” height=“200” class=“SamplePics”>
  5. 5. Quiz<html> A) Property<head> B) Pseudoclass <style> C) Attribute .SamplePics { border: 2px solid pink } </style></head><body> <img src=“sample_picture.jpg” alt=“Sample”Width=“100” height=“200” class=“SamplePics”>
  6. 6. Review: TopicsCSS: • Margin and Padding • Borders • FloatPositioning: • Static • Fixed • Relative • Absolute
  7. 7. Quiz<html> To position the div in the<head> middle of the page; we can <style> add margin: 0 auto; but we #centerMe also need to specify one more { property: ???: ??? ; A) Position margin: 0px auto; B) Width } C) Float </style></head><body><div id=”centerMe”>I should be centered on the page!</div>
  8. 8. Review: StylingCSS Float: an element can be pushed to the leftor right, allowing other elements to wrap around it.When an element is set to float, text and othercontent will flow around the floated element.The float property specifies whether or not anelement should float. It also specifies which direction itshould float (left, right). Example: .alignLeft { float: left; }
  9. 9. CSS FloatThis is mostcommonly used withimages, in order toalign them left orright so text flowsaround an image.It is also useful whenworking with layouts.
  10. 10. CSS ClearThe clearproperty controlsthe flow of textwhen you’re usingfloat.
  11. 11. Print StylesheetsIf your webpage contains a variety of background colors it canbe difficult for visitors to print.We can create a separate stylesheet just to allow visitors toprint by using a new attribute, MEDIA.It works by adding a second link element to your headsection:<head> <meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> <title>New Web Project</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" media="print" href="print.css"></head>
  12. 12. Print StylesheetsWhat do we do in the print.css stylesheet?We can remove ALL background colors with onesimple line in the body selector: background: white; Body { background: white; }
  13. 13. Print StylesheetsWe may also want to remove the menu bar,which is currently in the footer.We can do that by leveraging the displayproperty: #footer { display: none; } Good resource for tips and tricks on what to add to your print.css stylesheet:
  14. 14. Liquid vs Fixed LayoutFixed Layout:In a Fixed Layout, the columns are set to a specific width: 500pixels total (by total, I mean if you add up the widths of all thecolumns), 750 pixels total, 900 pixels total, etc. If you resize thebrowser on a fixed layout page, the columns will stay the samesize.Liquid Layout:In a Liquid Layout, instead of using pixels to set a specific width,the columns change sizes as you adjust the browser size. Oneway to do this is with percentages. The left column could be 20%of the page, the middle column 50% and the right column 30%,for example.
  15. 15. Further readingSamples of just about every layout you can imagine: Grids - Column-based Layouts: Layouts Versus Liquid Layouts:
  16. 16. Exercise: fixed layout to liquidLet’s assume we have a three-column layout that uses AbsolutePositioning in CSS, which we reviewed last week.File:’ll use this JSFiddle as our starting point: file:
  17. 17. HTML5?Formally, HTML5 is the W3C’s specification forthe next version of HTML.Informally, people use “HTML5” to refer to awhole set of new web standards: • HTML5 • CSS3 • JavaScript
  18. 18. HTML5: Progress and ImplementationHTML5 is still in "working draft" stageSome of the tech is making it into browsers now, but itllstill be a while until the specification isfinalized.It remains to be seen if all browsers will supportall features, and WHEN they will support them.Here is a good page summarizing which features aresupported by which browser:
  19. 19. Detecting browser supportModernizr: open-source JavaScript library that helps you understand whatyour visitor’s browsers do and do not support.With Modernizr, you can provide different CSS styling for browsers that do notsupport new CSS3 features, or use JavaScript to fall back gracefully if thevisitor’s browser does not support the new video element.Download Modernizr and then include it in your <head> section:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>My Beautiful Sample Page</title> <script src="modernizr-1.7.min.js"></script></head>
  20. 20. Detecting browser supportNext, add the class “no-js” to the <html> element:<html class="no-js">When Modernizr runs, if your browser has JavaScriptenabled, it will replace that class with the class “js”.<html class="js">Modernizr will then add classes for every feature itdetects, prefixing them with “no-” if the browserdoesn’t support it.
  21. 21. Detecting browser supportIf you are using Safari 5, which supports almost everything inHTML5/CSS3 currently, your <html> element will looksomething like this: <html class="js canvas canvastext geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface">If you are using IE 8, which supports almost nothing in HTML5/CSS3 currently, your <html> element will look something likethis: <html class="js no-canvas no-canvastext no-geolocation no-rgba no-hsla nomultiplebgs no-borderimage ... you get the idea >
  22. 22. Modernizer CSS ExampleIf the browser supports CSS .csscolumns ol {columns, the .csscolumns style isapplied. -moz-column-count: 2; -webkit-columns: 2;If the browser doesn’t support -o-columns: 2;CSS columns, as determined by columns: 2;the “nocsscolumns” class addedby Modernizr, the .no- }csscolumns style is applied. .no-csscolumns ol { float: left;Instead of using CSS columns, margin: 0 0 20px;we float our list items and applysome margins and widths to get }a similar result. .no-csscolumns ol li { float: left; width: 180px; }
  23. 23. ModernizerTo learn more about how to use Modernizr, see:
  24. 24. CSS3 EffectsCSS3 is the latest standard for CSS.It is backwards compatible, so you do not haveto change existing designs.Browsers will always support CSS2; many of theCSS3 properties have been adopted by modernbrowsers as well.
  25. 25. Old way:font-family: Helvetica, Verdana, Arial, sans-serif;Have fallback fonts in case your visitors did not have your favorite font installed.Create an image with a specific font, to ensure it looks the way you want.New Way:With CSS3, instead of relying on fonts everyone has installed, or using a specific font in animage, you can instruct the browser to download the font if the person viewing your site ismissing the font: @font-face { font-family: "Bitstream Vera Serif Bold"; src: url(""); } body { font-family: "Bitstream Vera Serif Bold", serif }NOTE that this will only make the font available to the browser, not to the rest of thecomputer.
  26. 26. Browser PrefixesThe CSS3 (and HTML5) specs are still in draft format.Using the browser prefixes ensures that the functionality willwork, even if the w3c changes the standard.Chrome/Safari: -webkit prefixFirefox: -moz prefixWhile the names and parameters of the new CSS properties arenot likely to change, there is no guarantee that they won’t.In cases where the spec has been mostly finalized you can simplyuse the property name. Ex: border-radius
  27. 27. Exercises: CSS3Please use: JSFiddle:Refer to Handout 1 forInstruction:Rounded CornersUnevenly rounded cornersDrop shadowsInset shadowsText shadowsColorRGBAHSLHSLATransforms
  28. 28. Link to handout
  29. 29. ColorBefore, we had three ways to define colors on websites:1. Color Name (color: blue);2. Hexadecimal Value (color: #CCC);3. rgb [color: rgb(255, 255, 255) or color:rgb(90%, 80%, 90%)]CSS3 has introduced two new ways:1. rgba The a stands for alpha (the level of transparency).2. hsl and hsla HSL = Hue, Saturation and Lightnessrgba = Red, Green, Blue, AlphaExample: background-color: rgba(255, 255, 255, 0.5);
  30. 30. Color: hsl and hslaHSL = Hue, Saturation and LightnessHSLA = Hue, Saturation, Lightness and AlphaSyntax: hsl( hue--in degrees from 0-359, saturation-- in % from 0-100%, lightness--in % from 0-100%) hsla( hue--in degrees from 0-359, saturation--in % from 0-100%, lightness--in % from 0-100%, alpha--from 0.0-1.0)
  31. 31. AnimationsCSS Transforms and TransitionsWe can create animations by leveraging the new CSSTransform and Transition properties.Transforms allow us to manipulate our elements.Transitions allow us to specify over what time durationthese changes should happen: effectively animating thechanges.
  32. 32. CSS TransformsYou can use CSS transforms to rotate or scale elements onyour page.We used to need JavaScript in order to do this!• Our options: rotate, scale, skew and translate.starting file: file:
  33. 33. CSS Transforms: Translate-webkit-transform: translateX(90px);-moz-transform: translateX(90px);This will move your element over 90px to theright (along the x-axis)
  34. 34. CSS Transforms: Scale-webkit-transform: scale(2.0);-moz-transform: scale(2.0);
  35. 35. CSS Transforms: ScaleWe can also scale only the vertical or the horizontalby specifying two valuesFor example, this code will double the width, butkeep the height the same: -webkit-transform: scale(2.0, 1.0); -moz-transform: scale(2.0, 1.0);This code will keep the width the same, but shrinkthe height to 1/10th of its original size: -webkit-transform: scale(1.0, 0.1); -moz-transform: scale(1.0, 0.1);
  36. 36. CSS Transforms: Example/* make a picture 1.25 times itsnormal size*/ -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25);
  37. 37. CSS Transforms: the originBy default, all the transforms occur from thecenter of the element.If you’d like the origin of the element to besomewhere other than the center, you can usethe transform-origin property. Example: -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -op-transform-origin: 0 0; transform-origin: 0 0;
  38. 38. CSS Transforms: another exampleThis JSFiddle example uses two divs to build a circle with ashadow underneath.The example uses a combination of CSS3 effects to create theshadow:A radial gradient and two transforms, a scale and a translateY.It also uses two more basic, CSS2 properties to position theshadow behind the circle along the z-axis: position and z-indexCSS Transforms: another exampleStarting file: file:
  39. 39. CSS TransitionsRight now, all of these Transforms happen instantly.Usually, we want Transforms to happen over time,over at least one second, for example.We can make that happen by combining ourTransforms with Transitions.
  40. 40. CSS Transitions: No JavascriptWe can also leverage CSS pseudoclasses to use CSSTransitions.In the sample page: acombination of Transitions and Transforms are used to both fadein and scale up the paintings as you hover your mouse over them.
  41. 41. CSS Transitions: No Javascript
  42. 42. CSS TransitionsMaking things animate!With the combination of HTML, CSS and a little bit of JavaScript, wecan animate our HTML elements.Here is a no-JavaScript example: support for CSS3 Transitions:ChromeSafari 3.1+ (mobile safari on iPhone if you have iOS 2.0+)Firefox 4.0IE 10.0Opera 10.5x
  43. 43. CSS TransitionsMore on CSS3 Transitions: version of transform and transitions JSFiddle:
  44. 44. Further Exercises
  45. 45. Sample 2 and 3 Column LayoutRefer to Handout 2 for instructionsTwo: (all fixed) (middle column is liquid) fixed width columns)
  46. 46. Link to Handout
  47. 47. Building a menubarWe will practice using the following CSS and HTML concepts tobuild a navigation bar:  HTML div element  Using CSS to style an HTML list element  Using tricks with CSS borders to make an arrow pointing to our current page  Use CSS background-color, margin, and padding to make it look nice  Leverage CSS pseudo-classes to give our links some interactivity  Practice CSS nesting to target only the ul and lis inside a given div
  48. 48. Building a menubar
  49. 49. Building a fixed menubar Finished product: teaching/codesamples/fixedMenu.html
  50. 50. THANK YOU!Congratulations on completing our Intro to HTML/CSScourse!We want to know your feedback so we can make the classbetter each time.Watch your email for a link to an anonymous surveyabout the class.You can always reach us via the Meetup group, or viaemail at