The following are demonstrations of the main tags for layout design.

This is a level 3 heading - 'h3'

This is a paragraph - 'p'

This is a paragraph ...
with an example of a line break - 'br'

This an image reated with image source tag - 'img src="" '

The previous was a spacer paragraph using the 'escape' non-breaking space command - ' '

This paragraph uses 'strong' to create bold text.

The navigation is created using 'nav' and unordered list - 'ul' items - 'li'.

The divider tag - 'div' - is used to create blocks within a page.
Combined with the 'class="" ' and 'id="" ' tags, different blocks can be created and styled.

There are a multitude of tutorials on YouTube - so you really can't go wrong
unless you try to be too fancy at the start - be simple at first and understand each element.

This section demonstrates the use of columns, cards and lists

Cards are created with user-defined classes for 'row', 'column' and 'card'.

Unordered List - 'ul' tag

List items are displayed in 'li' tags. The symbols can be hidden or shown

• Item 1
• Item 2
• Item 3

Ordered List - 'ol' tag

List items are displayed in 'li' tags. The numbers can be hidden or shown

1. Item 1
2. Item 2
3. Item 3

Info Box EG

These are Ibanez 'bird' acoustic guitars from 1972. My first 12-string was one of these. I now have a Yamaha 12-string guitar.

Show more

The following are demonstrations of some the main CSS for layout formatting elements.

CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
Using the tag names and class/id names, add attributes for each.

Check out and watch the video @ CSS Introduction

Check out the style.css for this page.

Follow the guides - use this as a reference.

• CSS Syntax (how it is written)
• CSS Selectors (tags, id, class)
• CSS How To Insert
• CSS Comments
• CSS Colors (notice: spelling!)
• CSS Backgrounds
• CSS Borders
• CSS Margins
• CSS Padding
• CSS Height/Width
• CSS Box Model
• Also check out the others too!