Margins & Padding

heading 1 has a border with padding (area between the border and the text)

this paragraph has a margin (area outside the paragraph)

IDs & Classes

this paragraph uses an id tag to call to a dif style. it uses all the styles from the main "p" except for the one that is changed by the id

this paragraph uses a class called "gold" to call to a dif style. it uses all the styles from the main "p" except for the one that is changed by the id

All HTML elements can have classes & javascript can call those classes. Elements can have more than one class. Classes can be used on multiple elements. ID's can only be used on single elements. Javascript can call elements be ID

SAMPLE

Click the button, to hide all elements with the class name "Name", with JavaScript:

Washu

Labrador Retriever

Kelvin

German Shepherd

Rin-Tin-Tin

German Shepherd


Window frames

_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame


Links

Page 1 Page 1

Bookmark to middle of Page 1

Images

Washu The image will float to the right of the text (way on the right).

Washu The image will float to the left of the text.

Background images can be added to paragraphs too

HTML5 introduced the <picture> element. The <picture> element contains a number of <source elements, each referring to different image sources. This way the browser can choose the image that best fits the current view and/or device.

SAMPLE:
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Responsive

If the CSS width property is set to 100%, the image will be responsive and scale up and down.

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size

<img src="image.jpg" style="max-width:100%;height:auto;">

Bookmark to top of THIS page

Tables

heading 1 heading 2 heading 3
1-1 1-2 1-3
2-1 2-2 2-3

table {
border-spacing: 5px;
}
.....can be used to add space between the borders if they are not collasped

Use colspan to span columns

normal colspan 2
column 1 column 2 column 3

Rowspan

Heading (normal) column 1
Heading (rowspan 2) column 2
column 3

Table with caption

Caption
heading 1 heading 2
1-1 2-1
1-2 2-2

Block and inline elements

Block

blockquote, canvas, dd, div, d, dt, form, headings, hr, li, ol, p, pre, table, ul, MORE.....

In line

a, b, big, br, button, code, em, i, img, object, script, span, strong, MORE.....

SAMPLE

This is a div with heading 2 here

And here is a paragraph. The background color of the div is white.

This is a heading with a black span in it

MiSC

An iframe is used to display a web page within a web page. Can set frame height & width and broder attributes. Can use an iframe along with target (click on a links to load pages into an iframe

no border.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
use for better smart phone & tablet display

Layout Methods

CSS Frameworks

CSS on other peoples' servers

CSS Floats

Not as felxible?

CSS Flexbox

Does not work in IE10 and earlier

Responsive

If the CSS width property is set to 100%, the image will be responsive and scale up and down.

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size

<img src="image.jpg" style="max-width:100%;height:auto;">

vw sets text size based on window size. 1vw = 1% of viewport width.

<h1 style="font-size:10vw">Hello World</h1>

Canvas Examples

Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag.