Slide 1
Slide 1 text
Intro to HTML & CSS
Mike Aparicio
User Interface Engineer
maparicio@groupon.com
Slide 2
Slide 2 text
Part I
• Learn HTML basics
• Create a personal website using only HTML
Part II
• Learn CSS basics
• Apply CSS styles to personal website
Slide 3
Slide 3 text
HTML
What the content is (semantics)
CSS
What the content looks like (presentation)
JavaScript
What the content does (behavior)
Slide 4
Slide 4 text
https://atom.io
Slide 5
Slide 5 text
https://codepen.io
https://codepen.io
Slide 6
Slide 6 text
HTML
(Hypertext Markup Language)
Slide 7
Slide 7 text
Elements
Containers for content or other elements
Tags
Code of an element, gives content semantic meaning
![]()
This is a paragraph element.
Attributes Define properties of an element or provide additional info
Tags
Code of an element, gives content semantic meaning
,
,Slide 8
Slide 8 text
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”
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
• A container of containers
• The “root” element
• Contains only and elements
Slide 12
Slide 12 text
• Goes inside element
• Contains meta data about the document
• Contains links to external dependencies
• Can contain embedded CSS/JS
• - Title of the document, appears in browser’s title bar
• - Info about the document, used by search engines
• - Links to or includes inline JavaScript
• <style> - Links to or includes inline CSS
• <link> - Links to other external files (e.g. favicons)
Slide 13
Slide 13 text
• Goes inside element, below
• Contains everything that is displayed in the browser
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Block Elements
• Take up the full width of their parent container
• Proceeding elements appear below
• Can only be placed inside other block elements (except )
• Paragraphs
cannot contain other block elements
Slide 18
Slide 18 text
https://ia.net/know-how/the-web-is-all-about-typography-period
Slide 19
Slide 19 text
-
• Define the structure and hierarchy of a document • Used in logical order • Use only one
element per page • Consider meaning over aesthetics
This is a headline
Slide 20
Slide 20 text
This is a paragraph.
“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 whitespaceSlide 21
Slide 21 text
Lists
•
- Ordered List (numbers)
•
- List Item
•
- Definition List (paired values)
•
- Definition Term •
- Definition Description • Ordered and unordered lists can be nested
- Unordered List (bullets)
•
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
• 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”)
Groupon
Slide 25
Slide 25 text
Slide 26
Slide 26 text
• Provides emphasis
• Rendered as italicized
• Can also use non-semantic , but don’t
this text appears italicized
Slide 27
Slide 27 text
• Provides strong emphasis
• Rendered as bold
• Can also use non-semantic , but don’t
this text appears bold
Slide 28
Slide 28 text
• Maintains whitespace within paragraphs • Self-closing tag • Don’t use for managing whitespace
600 W. Chicago Ave.
Chicago, IL 60654
Slide 29
Slide 29 text
Non-Semantic Elements
• Tell nothing about their contents
•
- block element
• - inline element
Here’s a SPAN inside of a DIV.
Slide 30
Slide 30 text
Semantic Container Elements
• Based on common classes previously used on divs
Slide 31
Slide 31 text
Character Entities
• © - copyright (©)
• & - ampersand (&)
• < - less than (<)
• > - greater than (>)
• ‘/’ - single “curly” quotes (‘’)
• “/” - double “curly” quotes (“”)
• — - em dash (—)
• - non-breaking space
https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
Slide 32
Slide 32 text
Personal Website
Slide 33
Slide 33 text
Personal Website
• Header
• Navigation
• Main Content
• Sidebar
• Footer
Structure
• Logo/Wordmark
• About
• Portfolio
• Blog
• Links
• Contact
Content
Slide 34
Slide 34 text
http://codepen.io/peruvianidol/pen/66afdb29a3a1db3efc3192d17670c226?editors=1000
Slide 35
Slide 35 text
HTML Cheatsheet
Typography
-
Headings
Paragraph
- Unordered List (bullets)
- List Item
- Definition List
- Definition Term
- Definition Description
Inline Elements
Link
Image Emphasis Strong Emphasis
Line break Non-Semantic ElementsBlock Inline Semantic Containers
- Ordered List (numbers)
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
CSS
(Cascading Style Sheets)
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
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;
}
Slide 41
Slide 41 text
The Cascade
• Browser default styles
• User-defined styles
• Author-defined styles (that’s you)
- An external file, using
- In the of a document, using
- Inline styles with an element, using the style attribute
• Author !important styles
• User !important styles
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
!important
• Overrides the cascade
• Makes future changes difficult
• Avoid using as much as possible
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
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/
Slide 54
Slide 54 text
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/
Slide 55
Slide 55 text
without box-sizing: border-box
Slide 56
Slide 56 text
with box-sizing: border-box
Slide 57
Slide 57 text
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;
}
Slide 58
Slide 58 text
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
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
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
Slide 64
Slide 64 text
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
Slide 65
Slide 65 text
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!
Slide 66
Slide 66 text
http://codepen.io/peruvianidol/pen/82dccb6eb4c80b31650fd6e88208daf6?editors=1100
Slide 67
Slide 67 text
http://codepen.io/peruvianidol/pen/66afdb29a3a1db3efc3192d17670c226?editors=1000
Slide 68
Slide 68 text
CSS Cheatsheet
Selectors
p {
color: #777777;
}
// affects all
.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/
Slide 69
Slide 69 text
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/)
Slide 70
Slide 70 text
Questions?
Mike Aparicio
maparicio@groupon.com