html and css crash course!
TRANSCRIPT
HTML & CSS The basics
HTML CSS JavaScriptStructure Style Behaviour
HyperText Markup Language
HTML
Common HTML terms
Elements Tags Attributes
<h1>I’m a HTML Element</h1>
<p>so am I!</p>
<a>We’re a tag</a>
<h2>because I</h2>
<p>have brackets</p>
<a href="http://shayhowe.com/">You find me</a>
<p title="I'm a tooltip">after an equal sign</p>
<a href="http://shayhowe.com/">You find me</a>
<p title="I'm a tooltip">after an equal sign</p>
HTML document structure
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a web page.</p> </body></html>
HTML CHEAT SHEETDOCUMENT OUTLINE<!DOCTYPE><html><head><body>
Version of htmlHTML documentPage informationPage documents
COMMENTS<!--comment text-->
PAGE INFORMATION
<base/><meta/><title><link/><style><script>
Base URLMeta dataTitleRelevant resourceStyle resourceScript esource
DOCUMENT STRUCTURE<h[1-6]><div><span><p><br/><hr/>
HeadingPage sectionInline sectionParagraphLine breakHorizontal rule
LINKS<a href=””><a href=”mailto:”><a href=”name”><a href=”#name”>
Page linkEmail linkAnchorLink to anchor
TEXT MARKUP<strong><em><blockquote><q><abbr><acronym><address><pre><dfn><code><cite><del><ins><sub><sup><bdo>
Strong emphasisEmpahasisLong quotationShort quotationAbrreviationAcronymAddressPre-formatted textDefinitionCodeCitationDeleted textInserted textSubscriptSuperscriptText direction
<form><fieldset><legend><label><input/><select><optgroup><option><textarea><button>
FormCollection of fieldsForm legendInput labelForm inputDrop-down boxGroup of optionsDrop-down optionsLarge text inputButton
FORMS
IMAGES AND IMAGE MAPS<img/><map><area/>
ImageImage mapArea of image map
LISTS<ol><ul><li><dl><dt><dd>
Ordered listUnordered listList itemDefinition listDefinition termTerm description
TABLES<table><caption><thead><tbody><tfoot><colgroup><col/><tr><th><td>
TableCaptionTable headerTable bodyTable footerColumn groupColumnTable rowHeader cellTable cell
CORE ATTRIBUTESclassid
styletitle
*<br/> empty tags
EMPTY ELEMENTS
<br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>
BreakEmbedthematic break imageinputlnkmetaparametersourcethematic break
EXERCISE 1Create a HTML document
<!DOCTYPE html><html lang="en"> <head> </head> <body> </body></html>
1. Create a folder
1.1 Create a file called index.html
2. Make the file a html readable document:
3. Inside the <head> element, let’s add <meta> and <title> elements.
<head> <meta charset="utf-8"> <title>Hello World</title> </head>
styletitle
4. Inside the <body> element, add <h1> and <p> elements.
<body> <h1>Put a header here</h1> <p>And some text here</p> </body>
5. Let’s check it out!Double-clicking this file or dragging it into a web browser will open it for us to review.
Cascading Style Sheets
CSS
Common CSS terms
Selectors Properties Values
p { ... }
h1 { ... }
p { color: ...; font-size: ...;}
h1 { font-family: ...; font-size: ...;}
p { color: green; font-size: 16;}
h1 { font-family: Arial; font-size: 24;}
Selectors
Type SelectorsType selectors target elements by their element type
div { ... }
<div>...</div>
CSS
HTML
<div>...</div>
Class selectors allow us to select an element based on the element’s class attribute value.
Class Selectors
.awesome { ... }
<div class=”awesome”>...</div>
CSS
HTML
ID Selectors
#anacidre { ... }
<div id=”anacidre”>...</div>
CSS
HTML
ID selectors are even more precise than class selectors, as they target only one unique element at a time.
Additional Selectors
Many more advanced selectors exist and are readily available
Referencing CSS
In order to get our CSS talking to our HTML, we need to reference our CSS file within our HTML.
<head> <link rel="stylesheet" href="main.css"></head>
Create a StyleSheet
EXERCISE 2
1.1 Inside of our “styles-conference” folder, let’s create a new folder named “assets.”
1. Create a folder named “styles-conference” inside our initial folder.
1.2 For our style sheets, let’s go ahead and add another folder named “stylesheets” inside the “assets” folder.
1.3 A new file named main.css and save it within the “stylesheets” folder we just created.
1.4 Head over to Eric’s website, copy his reset, and paste it at the top of our main.css file:
http://meyerweb.com/eric/tools/css/reset/
2. Let’s connect our stylesheet to our index.html file.
<head> <meta charset="utf-8"> <title>Your title here</title> <link rel="stylesheet" href="main.css"></head>
3. Do some CSS-ing!
colorbackgroundbackground-colorbackground-attachmentbackground-repeatbackground-imagebackground-position
CSS CHEAT SHEET
FONTSfontfont-familyfont-stylefont-variant
font-weightfont-stretchfont-sizefont-size-adjust
TEXT
COLOR/BACKGROUND
BOX MODEL
TEXT MARKUPmarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-leftborderborder-topborder-bottomborder-rightborder-left
border-colorborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-styleborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-widthborder-top-widthborder-right-widthborder-bottom-widthborder-left-width
:first-child:first-line:first-letter:hover:active:focus
:link:visited:lang(var):before:after
PSEUDO-SELECTORS /CLASSES
TABLEScaption-sidetable-layoutborder-collapse
border-spacingempty-cellsspeak-header
DIMENSIONS
POSITIONING
SELECTORS*divdiv*div spandiv, spandiv > spandiv + span.classdiv.class#itemiddiv#itemida[attr]a[lang|=‘en’]
All elements<div>All elements within <div><span> within <div><div> and <span><span> with parent <div><span> preceded by <div>Elements of class “class”<div> of class “class”<div> with “itemid”<a> with attribute “attr”<a> when lang begins “en”
displaypositiontoprightbottomleftfloat
clearz-indexdirection +unicode-bidioverflowclipvisibility
text-indenttext-aligntext-decorationtext-shadowletter-spacing
word-spacingtext-transformwhite-spaceline-height width
min-widthmax-widthheight
min-heightmax-heightvertical-align
Content
PaddingBorderMargin