Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Intro to HTML and CSS

Intro to HTML and CSS

A basic intro to HTML and CSS for a workshop at Groupon.

Mike Aparicio

July 19, 2016
Tweet

More Decks by Mike Aparicio

Other Decks in Technology

Transcript

  1. Part I • Learn HTML basics • Create a personal

    website using only HTML Part II • Learn CSS basics • Apply CSS styles to personal website
  2. HTML What the content is (semantics) CSS What the content

    looks like (presentation) JavaScript What the content does (behavior)
  3. Elements Containers for content or other elements <p>This is a

    <strong>paragraph</strong> element.</p> Attributes Define properties of an element or provide additional info <img src=“groupon.svg” alt=“Groupon”> Tags Code of an element, gives content semantic meaning <p>, </p>, <img>
  4. The DOM The Document Object Model (DOM) is a cross-platform

    and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. “Parents, Children, Descendants”
  5. HTML Guidelines • Use lowercase for tags <a href=“#”></a> •

    Use two-space indentation (soft tabs) when nesting • Close tags in the correct order <p><span>Text</span></p> • Use double quotes on attributes <img src=“#”> • <!-- Use comments liberally --> • Save files as .html
  6. Doctype • The very first line in every HTML document

    • Tells the browser how to render the page • Not part of the HTML itself • Does not have a closing tag <!DOCTYPE html>
  7. <html> • A container of containers • The “root” element

    • Contains only <head> and <body> elements
  8. <head> • Goes inside <html> element • Contains meta data

    about the document • Contains links to external dependencies • Can contain embedded CSS/JS • <title> - Title of the document, appears in browser’s title bar • <meta> - Info about the document, used by search engines • <script> - Links to or includes inline JavaScript • <style> - Links to or includes inline CSS • <link> - Links to other external files (e.g. favicons)
  9. <body> • Goes inside <html> element, below <head> • Contains

    everything that is displayed in the browser
  10. Block Elements • Take up the full width of their

    parent container • Proceeding elements appear below • Can only be placed inside other block elements (except <a>) • Paragraphs <p> cannot contain other block elements
  11. <h1> - <h6> • Define the structure and hierarchy of

    a document • Used in logical order • Use only one <h1> element per page • Consider meaning over aesthetics <h1>This is a headline</h1>
  12. <p> <p>This is a paragraph.</p> “A distinct piece of writing,

    usually dealing with a single theme and indicated by a new line, indentation, or numbering.” • Use as a container for content, not managing whitespace
  13. Lists • <ol> Ordered List (numbers) • <ul> Unordered List

    (bullets) • <li> List Item • <dl> Definition List (paired values) • <dt> Definition Term • <dd> Definition Description • Ordered and unordered lists can be nested
  14. Inline Elements • Take up only as much room as

    needed by the content • Proceeding elements are placed adjacent to • Can be placed inside block or inline elements
  15. <a> • A for “anchor” • Links to external pages

    or other resources, or to other sections of the page • Can contain block elements • Hyperlink reference (href) attribute contains destination - can be absolute (“https://“), - relative to HTML file (“contact.html”), - or link to a section of the page (“faq.html#returns”) <a href=“https://groupon.com”>Groupon</a>
  16. <img> • Embeds an image in the document • Does

    not have a closing tag • alt attribute is required, describes image for screen readers or in cases where image doesn’t load • Use for content, not decoration • Avoid text in images • Avoid linking to external image URLs <img src=“cat.gif” alt=“Hilarious cat GIF”>
  17. <em> • Provides emphasis • Rendered as italicized • Can

    also use non-semantic <i>, but don’t <em>this text appears italicized</em>
  18. <strong> • Provides strong emphasis • Rendered as bold •

    Can also use non-semantic <b>, but don’t <strong>this text appears bold</strong>
  19. <br> • Maintains whitespace within paragraphs • Self-closing tag •

    Don’t use for managing whitespace <p>600 W. Chicago Ave.<br> Chicago, IL 60654</p>
  20. Non-Semantic Elements • Tell nothing about their contents • <div>

    - block element • <span> - inline element <div> <p>Here’s a <span>SPAN</span> inside of a DIV.</p> </div>
  21. Semantic Container Elements • Based on common classes previously used

    on divs <article> <aside> <figcaption> <figure> <footer> <header> <main> <nav> <section>
  22. Character Entities • &copy; - copyright (©) • &amp; -

    ampersand (&) • &lt; - less than (<) • &gt; - greater than (>) • &lsquo;/&rsquo; - single “curly” quotes (‘’) • &ldquo;/&rdquo; - double “curly” quotes (“”) • &mdash; - em dash (—) • &nbsp; - non-breaking space https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
  23. Personal Website • Header • Navigation • Main Content •

    Sidebar • Footer Structure • Logo/Wordmark • About • Portfolio • Blog • Links • Contact Content
  24. HTML Cheatsheet Typography <h1>-<h6> Headings <p> Paragraph <ul> Unordered List

    (bullets) <ol> Ordered List (numbers) <li> List Item <dl> Definition List <dt> Definition Term <dd> Definition Description Inline Elements <a href=“[URL]”>Link</a> <img src=“[URL]” alt=“”> Image <em>Emphasis</em> <strong>Strong Emphasis</strong> <br> Line break Non-Semantic Elements <div> Block <span> Inline Semantic Containers <article> <aside> <figcaption> <figure> <footer> <header> <main> <nav> <section>
  25. Homework • Visit https://developer.mozilla.org/en-US/docs/Web/HTML/Element • What are some HTML elements

    we didn’t cover today? • Are they inline or block elements? • Do they have any unique attributes? • Play around with them in CodePen • Try adding some to your personal site
  26. Selector A method of targeting HTML elements for styling Declaration

    A key/value pair defining the style for a selector Property An attribute of an element defined by a CSS selector p { color: #333333; font-size: 1rem; line-height: 1.5; }
  27. The Cascade • Browser default styles • User-defined styles •

    Author-defined styles (that’s you) - An external file, using <link href=“” rel=“stylesheet”> - In the <head> of a document, using <style> - Inline styles with an element, using the style attribute • Author !important styles • User !important styles
  28. Selectors • p - affects all paragraph elements • .tag

    - affects all elements with class=“tag” • #intro - affects all elements with id=“intro” • a[href] - affects elements with specific attributes • :visited - pseudo-selectors affect elements in certain states • Multiple selectors can be separated by commas • Selectors can be nested or combined in unique ways • Many special types of selectors exist • Selectors affect specificity http://www.w3schools.com/cssref/css_selectors.asp
  29. Inheritance • The passing down of properties from parent elements

    to their children • Not all properties are inherited • Can force properties to be inherited by using “inherit” value
  30. Specificity • Determines which styles “win” when more than one

    applies • Calculated in a comma-separated list - X, X, X, X, X • Element selectors have the lowest specificity (0, 0, 0, 0, 1) • Class, pseudo-class and attribute selectors (0, 0, 0, 1, 0) • ID selectors (0, 0, 1, 0, 0) • Inline styles (0, 1, 0, 0, 0) • !important has the highest specificity (1, 0, 0, 0, 0) • Multiple selectors increase specificity • We want to keep specificity as low as possible https://css-tricks.com/specifics-on-css-specificity/
  31. The Box Model • HTML elements are boxes that consist

    of content, padding, borders and margins • Defines space around and between elements • “box-sizing: border-box” normalizes width to include padding and border* • margin-top, margin-right, margin-bottom, margin-left • margin/padding: [top] [right] [bottom] [left] • margin: 1rem 1rem 1rem 1rem -> margin: 1rem • margin: 1rem auto 1rem auto -> margin: 1rem auto (centers) • border: [width] solid/dashed/dotted [color] * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
  32. Color • Can use hexadecimal, RGB(A), HSL(A), or 140 named

    values* • color - the color of an element’s text • background-color - the background color of an element • border-color - the color of an element’s border * http://www.w3schools.com/colors/colors_names.asp button { color: #ffffff; background-color #53A318: border: 1px solid #338833; }
  33. Typography • font-family - defines the font stack - ‘Open

    Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif - Browser will use first available font in stack - Multi-word fonts should be quoted - Browser default is Times New Roman • font-size - expressed in px, em, rem, %, etc. • line-height - relative to font-size (1.5), does not require a unit • text-align - horizontal alignment of text (left/right/center) • font-style, letter-spacing, word-spacing, text-decoration… http://reference.sitepoint.com/css/typography
  34. Units of Measurement • px - absolute pixel value •

    em - relative to font-size of element • rem - relative to font-size of root element (body: 16px) • % - relative to another value (width, font-size, etc.) • Convert px -> %: target % context = result • vw/vh - relative to 1% of the width/height of the viewport • width, height, min-width, max-width, min-height, max-height http://www.w3schools.com/cssref/css_units.asp
  35. CSS Guidelines • Avoid applying styles to ID selectors •

    Apply classes to elements rather than nesting selectors • Use lowercase for classes, dashes (-) rather than underscores • Make classes short and meaningful • If you must nest, never nest more than three deep • CSS should be additive - avoid overriding styles • Lowercase all hex values • Don’t use a unit when value is zero (margin: 0 vs. margin: 0px) • /* Use comments liberally */ • Save files as .css
  36. Personal Website • Change the font • Add some color

    • Adjust font sizes • Apply margins and padding to things • Check out http://www.w3schools.com/cssref/ and experiment with properties we didn’t cover • Pair with your neighbor • Ask questions!
  37. CSS Cheatsheet Selectors p { color: #777777; } // affects

    all <p> .intro { font-size: 150%; } // affects all w/ class=“intro” Properties color: [hex/RGB or color name]; background-color: [as above]; font-size: [value in px/em/%]; line-height: [multiple of font-size]; font-family: [comma-separated list]; text-align: [left/center/right]; margin: [top] [right] [bottom] [left]; padding: [top] [right] [bottom] [left]; border-width: [top] [right] [bottom] [left]; border-style: [solid/dashed/dotted]; border-color: [hex/RGB or color name]; border: [width] [style] [color]; http://www.w3schools.com/cssref/
  38. Resources • W3Schools (http://www.w3schools.com/) • Mozilla Developer Network (https://developer.mozilla.org/en-US/) •

    HTML & CSS Guidelines (http://codeguide.co/) • Can I Use? (http://caniuse.com/) • CSS-Tricks (https://css-tricks.com/) • Codrops (http://tympanus.net/codrops/) • CodePen Patterns (http://codepen.io/patterns/) • Google Fonts (https://www.google.com/fonts) • Gridlover (http://www.gridlover.net/try) • HTML Validator (https://validator.w3.org/)