HTML and CSS crash course!

HTML CSS JavaScript
Structure 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>

<!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 SHEET
DOCUMENT OUTLINE
<!DOCTYPE>
<html>
<head>
<body>
Version of html
HTML document
Page information
Page documents
COMMENTS

PAGE INFORMATION
<base/>
<meta/>
<title>
<link/>
<style>
<script>
Base URL
Meta data
Title
Relevant resource
Style resource
Script esource
DOCUMENT STRUCTURE
<h[1-6]>
<div>
<span>
<p>
<br/>
<hr/>
Heading
Page section
Inline section
Paragraph
Line break
Horizontal rule
LINKS
<a href=””>
<a href=”mailto:”>
<a href=”name”>
<a href=”#name”>
Page link
Email link
Anchor
Link to anchor
TEXT MARKUP
<strong>
<em>
<blockquote>
<q>
<abbr>
<acronym>
<address>
<pre>
<dfn>
<code>
<cite>
<del>
<ins>
<sub>
<sup>
<bdo>
Strong emphasis
Empahasis
Long quotation
Short quotation
Abrreviation
Acronym
Address
Pre-formatted text
Definition
Code
Citation
Deleted text
Inserted text
Subscript
Superscript
Text direction
<form>
<fieldset>
<legend>
<label>
<input/>
<select>
<optgroup>
<option>
<textarea>
<button>
Form
Collection of fields
Form legend
Input label
Form input
Drop-down box
Group of options
Drop-down options
Large text input
Button
FORMS
IMAGES AND IMAGE MAPS
<img/>
<map>
<area/>
Image
Image map
Area of image map
LISTS
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
Ordered list
Unordered list
List item
Definition list
Definition term
Term description
TABLES
<table>
<caption>
<thead>
<tbody>
<tfoot>
<colgroup>
<col/>
<tr>
<th>
<td>
Table
Caption
Table header
Table body
Table footer
Column group
Column
Table row
Header cell
Table cell
CORE ATTRIBUTES
class
id
style
title
*<br/> empty tags

EMPTY ELEMENTS
<br>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>
Break
Embed
thematic break
image
input
lnk
meta
parameter
source
thematic break

EXERCISE 1
Create a HTML document

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
1. Create a folder
1.1 Create a ﬁle called index.html
2. Make the ﬁle a html readable document:

3. Inside the <head> element, let’s add <meta> and <title> elements.
<head>
<title>Hello World</title>
</head>

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 ﬁle or dragging it into a web browser
will open it for us to review.

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;
}

Type Selectors
Type 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

In order to get our CSS talking to our HTML, we need to reference our
CSS ﬁle 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 ﬁle 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 ﬁle:
http://meyerweb.com/eric/tools/css/reset/

2. Let’s connect our stylesheet to our index.html ﬁle.
<head>
<title>Your title here</title>
<link rel="stylesheet" href="main.css">
</head>

color
background
background-color
background-attachment
background-repeat
background-image
background-position
CSS CHEAT SHEET
FONTS
font
font-family
font-style
font-variant
font-weight
font-stretch
font-size
font-size-adjust
TEXT
COLOR/BACKGROUND
BOX MODEL
TEXT MARKUP
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-top
border-bottom
border-right
border-left
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
:first-child
:first-line
:first-letter
:hover
:active
:focus
:link
:visited
:lang(var)
:before
:after
PSEUDO-SELECTORS /CLASSES
TABLES
caption-side
table-layout
border-collapse
border-spacing
empty-cells
speak-header
DIMENSIONS
POSITIONING
SELECTORS
*
div
div*
div span
div, span
div > span
div + span
.class
div.class
#itemid
div#itemid
a[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”
display
position
top
right
bottom
left
float
clear
z-index
direction +
unicode-bidi
overflow
clip
visibility
text-indent
text-align
text-decoration
text-shadow
letter-spacing
word-spacing
text-transform
white-space
line-height width
min-width
max-width
height
min-height
max-height
vertical-align
Content
Padding
Border
Margin

HTML and CSS crash course!

More Related Content

What's hot (20)

Similar to HTML and CSS crash course! (20)

Recently uploaded (20)

HTML and CSS crash course!