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

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

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