In-text link

CSS selector:

.in-text-link

Sample code:

<a href="#" class="in-text-link">In-text link</a>

Rendered element:

In-text link

Navigation Button

CSS selector:

.button-nav

Sample code:


                    <nav> 

                     <ul> 

                      <li> 

                       <a href="#" class="button-nav">Default Button</a>

                      </li>

                     </ul> 

                    </nav>

Rendered element:

Submit/Reset Buttons

CSS selector:

.submit-reset-button

Sample code:

<a href="#" class="submit-reset-button">Submit/Reset Button</a>

Rendered element:

Submit/Reset Button

Text Input Field

CSS selector:

#text-input-field, .input-field-label

Sample code:


                    <form>

                     <label for="text-input-field" class="input-field-label">Subject:</label>

                     <input type="text" id="text-input-field" placeholder="i.e. Text Sample">

                    </form>

Rendered element:

Headings

CSS selector for Heading 1:

Sample code:

<h1>Heading 1</h1>

Rendered element:

Heading 1

CSS selector for Heading 2:

Sample code:

<h2>Heading 2</h2>

Rendered element:

Heading 2

CSS selector for Heading 3:

Sample code:

<h3>Heading 3</h3>

Rendered element:

Heading 3

Paragraphs

CSS selector:

Sample code:

<p>Paragraph</p>

Rendered element:

Paragraph

Bulleted Lists

CSS selector:

Sample code:


                    <ul>

                     <li>Bullet list 1</li>

                     <li>Bullet list 2</li>

                     <li>Bullet list 3</li>

                    </ul>

Rendered element:

Bullet list 1
Bullet list 2
Bullet list 3

Numbered Lists

CSS selector:

Sample code:


                    <ol>

                     <li>Bullet list 1</li>

                     <li>Bullet list 2</li>

                     <li>Bullet list 3</li>

                    </ol>

Rendered element:

Numbered list 1
Numbered list 2
Numbered list 3

IAT 339: P01

Style Guide

In-text link

CSS selector:

Sample code:

Rendered element:

Navigation Button

CSS selector:

Sample code:

Rendered element:

Submit/Reset Buttons

CSS selector:

Sample code:

Rendered element:

Text Input Field

CSS selector:

Sample code:

Rendered element:

Headings

CSS selector for Heading 1:

Sample code:

Rendered element:

Heading 1

CSS selector for Heading 2:

Sample code:

Rendered element:

Heading 2

CSS selector for Heading 3:

Sample code:

Rendered element:

Heading 3

Paragraphs

CSS selector:

Sample code:

Rendered element:

Bulleted Lists

CSS selector:

Sample code:

Rendered element:

Numbered Lists

CSS selector:

Sample code:

Rendered element:

Main Navigation

Product Listing

Rendered element:

Luggage Tag 1

$20.00

Website Grid Structure

Luggage Tag 1

$20.00

Luggage Tag 1

$20.00

Luggage Tag 1

$20.00

Website Colour Swatches