<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>
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”
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
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)
parent container • Proceeding elements appear below • Can only be placed inside other block elements (except <a>) • Paragraphs <p> cannot contain other block elements
(bullets) • <li> List Item • <dl> Definition List (paired values) • <dt> Definition Term • <dd> Definition Description • Ordered and unordered lists can be nested
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>
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”>
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
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; }
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
- 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
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/
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/
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; }
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
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
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
• 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!
peruvianidol
kamakiri1225
kazu_kichi_67
freee
cyberagentdevelopers
horsewin
autifyhq
tsukasa_ishimaru
hide212131
yoshimi0227
sonatard
addyosmani
eileencodes
thekraken
marktimemedia
speakerdeck
mojombo
chriscoyier
lauravandoore
sstephenson
caitiem20
colly
![Questions? Mike Aparicio [email protected]](https://files.speakerdeck.com/presentations/6a9471b3c3d74ef5a13d0fdb30d596b5/slide_69.jpg){kind=link}