Node Manual

User Manual:
Open the PDF directly: View PDF .
Page Count: 44
Download
Open PDF In Browser	View PDF
Web Technologies Manual (Frontend)
Dan Austin K. Higwit
dan@qwento.com
November 25, 2018

Contents
1 Basic Structure

2

1.1

HTML elements, tags, atttributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

1.2

HTML document template

3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2 CSS Terms

3

2.1

Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.2

Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.3

Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.4

Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.5

Referencing CSS

4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3 HTML in depth

4

3.1

Semantic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

3.2

HTML5 Structure

5

3.3

Relative and Absolute Paths

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4 CSS in depth

7

7

4.1

The Cascade

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

4.2

Calculating Specicity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

4.3

Combining Selectors

4.4

Layering Styles with Multiple Classes

4.5

Common CSS property values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

4.6

HSL HSLa Colors

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

4.7

Lengths

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5 Box Model

8
8

10

5.1

What is a box? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

5.2

Margin Padding Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

5.3

Borders

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

5.4

Box Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

6 Positioning

12

6.1

Floats

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6.2

Float Clearx . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

6.3

Inline-block

13

6.4

Relative Positioning

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

6.5

Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7 Working With Typography

12

16

7.1

Typeface vs Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

7.2

Font Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

7.3

Line Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

7.4

Use Web Safe Fonts

17

7.5

Embedding Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

7.6

Including Citations Quotes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8 Backgrounds Gradients

17

8.1

Gradient Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

8.2

Using Multiple Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

8.3

New Background Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

9 Lists

20

9.1

Unordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9.2

Ordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

9.3

Description Lists

21

9.4

Nesting Lists

9.5

List Item Styling

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9.6

List Type Values

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

9.7

Image Marker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

9.8

Shorthand List Style Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

9.9

Horizontal List

24

9.10 Floating List

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

21
22

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

9.11 Navigational List Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

9.12 Nav Element

25

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10 Adding Media

26

10.1 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

10.2 Audio

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

10.3 Video

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

10.5 Figure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

10.4 Iframes

11 Building Forms

27

11.1 Initializing a Form

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

11.2 Text Fields Textareas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

11.3 Text Area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

11.4 Form Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

11.5 Other Inputs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

11.6 Hidden Input

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

11.7 File Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

11.8 Form Elements

31

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12 Tables
12.1 Creating a Table

34
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

12.2 Table Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

Abstract
This is a compilation of notes and code snippets for html, css, sass and other related web technologies. html css sass Manual.

1

Basic Structure

HTML, HyperText Markup Language, gives content structure and meaning by dening that content as, for example, headings,
paragraphs, or images. CSS, or Cascading Style Sheets, is a presentation language created to style the appearance of contentusing,
for example, fonts or colors.

1.1 HTML elements, tags, atttributes
The parts of an html consists of the following parts:

1.2 HTML document template
All HTML documents have a required structure that includes the following declaration and elements: , ,
, and .
Subsequent paragraphs, however, are indented.

1
2
3
4
5
6
7
8
9
10
11


< html lang =" en ">
< head >
< meta charset =" utf -8 ">
< title > Hello World < / title >

< body >
 Hello World 
 This is a web page. 



Self-Closing Elements

Some elements simply receive their content or behavior from attributes within a single tag. The 

element is one of these elements. The content of the previous  element is assigned with the use of the charset attribute and
value. Other common selfclosing elements include

1
2

2

< br >, < img >, < meta >, < wbr >, < embed >, < input >, < param >
< hr >, < link >, < source >

CSS Terms

In addition to HTML terms, there are a few common CSS terms you will want to familiarize yourself with. These terms include
selectors, properties, and values. As with the HTML terminology, the more you work with CSS, the more these terms will become
second nature.

2.1 Selectors
A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position)
to. Selectors generally target an attribute value, such as an id or class value, or target the type of element, such as  or .

1

p { ... }

2.2 Properties
So far we've selected an element with a selector and determined what style we'd like to apply with a property. Now we can determine
the behavior of that property with a value. Values can be identied as the text between the colon, :, and semicolon, ;. Here we are
selecting all 
 elements and setting the value of the color property to be orange and the value of the font-size property to be 16
pixels.

p {
color : ...;
3
font - size : ...;
4 }

1

2

2.3 Values
Values can be identied as the text between the colon, :, and semicolon, ;. Here we are selecting all 
 elements and setting the
value of the color property to be orange and the value of the font-size property to be 16 pixels.

p {
color : orange ;
3
font - size : 1 6 px ;
4 }

1

2

2.4 Selectors
Values can be identied as the text between the colon, :, and semicolon, ;. Here we are selecting all 
 elements and setting the
value of the color property to be orange and the value of the font-size property to be 16 pixels.

Type Selectors

target elements by their element type. For example, should we wish to target all division elements, 
, we

would use a type selector of div.

1
2

div { ... }
< div >...< / div >

Class Selectors

allow us to select an element based on the element's class attribute value.

.awesome { ... }
< div class =" awesome ">...< / div >
3 ...< /p>

1

2

ID Selectors
1
2

are even more precise than class selectors, as they target only one unique element at a time.

# shayhowe { ... }
< div id = " shayhowe ">...< / div >

2.5 Referencing CSS
< head >
< link rel =" stylesheet " href = " main.css ">
3 

1

2

3

HTML in depth

3.1 Semantic Elements
Semantic code describes the value of content on a page, regardless of the style or appearance of that content.

There are several

benets to using semantic elements, including enabling computers, screen readers, search engines, and other devices to adequately
read and understand the content on a web page.

Identifying Divisions Spans

Divisions, or 
s, and s are HTML elements that act as containers solely for styling

purposes. As generic containers, they do not come with any overarching meaning or semantic value. Paragraphs are semantic in
that content wrapped within a  element is known and understood as a paragraph. 
s and s do not hold any such
meaning and are simply containers.

Block vs. Inline Elements

Most elements are either block- or inline-level elements. What's the dierence? Block-level elements

begin on a new line, stacking one on top of the other, and occupy any available width. Block-level elements may be nested inside one
another and may wrap inline-level elements. We'll most commonly see block-level elements used for larger pieces of content, such as
paragraphs. Inline-level elements do not begin on a new line. They fall into the normal ow of a document, lining up one after the
other, and only maintain the width of their content. Inline-level elements may be nested inside one another; however, they cannot
wrap block-level elements. We'll usually see inline-level elements with smaller pieces of content, such as a few words.

Divs and Spans
1
2

< div > ... < / div > // are default block elements
< span > ...  // are default inline elements

Headings
1
2
3
4
5
6

divs act as block elements spans act inline

Headings are block-level elements, and they come in six dierent rankings,  through 
.

 Heading
 Heading
 Heading
 Heading
 Heading
 Heading

Paragraphs

Level
Level
Level
Level
Level
Level

1
2
3
4
5
6

Paragraphs are dened using the  block-level element.

1

 Steve Jobs was a co - founder and longtime chief executive officer at Apple. On June 12 , 200 5, Steve gave the
commencement address at Stanford University. 

3

 In his address Steve urged graduates to follow their dreams and , despite any setbacks , to never give up
ndash ; advice which he sincerely took to heart. 

Bold, Strong
1
2
4
5

Here are the two HTML options for creating bold text in action:


 < strong > Caution :< / strong > Falling rocks. 

 This recipe calls for  bacon  .

Italics, Emphasis
1
2
4
5

Here are the two HTML options for creating bold text in action:


 I < em > love  Chicago !

 The name  Shay  means a gift. 

3.2 HTML5 Structure
For the longest time the structure of a web page was built using divisions.

The problem was that divisions provide no semantic

value, and it was fairly dicult to determine the intention of these divisions. Fortunately HTML5 introduced new structurally based
elements, including the , , , , , and  elements.



element, like it sounds, is used to identify the top of a page, article, section, or other segment of a page. In general, the

 element may include a heading, introductory text, and even navigation.

1

< header >...< / header >



element identies a section of major navigational links on a page.

The  element should be reserved for primary

navigation sections only, such as global navigation, a table of contents, previous/next links, or other noteworthy groups of navigational
links.

1

< nav >...< / nav >

The 

element is used to identify a section of independent, self-contained content that may be independently distributed

or reused. We'll often use the  element to mark up blog posts, newspaper articles, user-submitted content, and the like.

1

< article >...< / article >

The 

element is used to identify a thematic grouping of content, which generally, but not always, includes a heading.

The grouping of content within the  element may be generic in nature, but it's useful to identify all of the content as
related.

1

< section >...< / section >

The 

element holds content, such as sidebars, inserts, or brief explanations, that is tangentially related to the content

surrounding it. When used within an  element, for example, the  element may identify content related to the author
of the article.

1

< aside >...< / aside >

The 

The  element identies the closing or end of a page, article, section, or other segment of a page. Generally

the  element is found at the bottom of its parent. Content within the  element should be relative information and
should not diverge from the document or section it is included within.

1

< footer >...< / footer >

Creating Hyperlinks

Along with text, one of the core components of the Internet is the hyperlink, which provides the ability

to link from one web page or resource to another. Hyperlinks are established using the anchor, , inline-level element. In order
to create a link from one page (or resource) to another, the href attribute, known as a hyperlink reference, is required. The href
attribute value identies the destination of the link.

1

 Shay < /a>

Wrapping Block-level elements with anchors

By nature the anchor element, , is an inline element, and, according to

web standards, inline-level elements may not wrap block-level elements. With the introduction of HTML5, however, anchor elements
specically have permission to wrap either block-, inline-, or any other level elements. This is a break from the standard convention,
but it's permissible in order to enable entire blocks of content on a page to become links.

3.3 Relative and Absolute Paths
The two most common types of links are links to other pages of the same website and links to other websites. These links are identied
by their href attribute values, also known as their paths.
Should the page being linked to reside within a dierent directory, or folder, the href attribute value needs to reect this as well.
Say the about.html page resides within the pages directory; the relative path would then be pages/about.html.
Linking to other websites outside of the current one requires an absolute path, where the href attribute value must include the
full domain. A link to Google would need the href attribute value of http://google.com, starting with http and including the domain,
.com in this case.

1
2
4
5


 About 

 Google 

Linking to an Email Address

To create an email link, the href attribute value needs to start with mailto: followed by the email

address to which the email should be sent. To create an email link to shay@awesome.com, for example, the href attribute value would
be mailto:shay@awesome.com.

1

 Email Me 

Opening Links in a New Window

To trigger the action of opening a link in a new window. The target attribute determines

exactly where the link will be displayed,

Linking to Parts of the Same Page

Periodically we'll see hyperlinks that link to part of the same page the link appears on. A

common example of these same-page links are Back to top links that return a user to the top of a page.

< body id =" top ">
...
3
 Back to top < /a>
4
...
5 

1

2

4

CSS in depth

4.1 The Cascade
CSS is read from top to bottom, styles declared at a later section usually override pre-existing styles of the same importance

1
2
3
4
5
6
7
8

\\ background ends up as green
p {
background : orange ;
font - size : 2 4 px ;
}
p {
background : green ;
}

4.2 Calculating Specicity
The type selector has the lowest specicity weight and holds a point value of 0-0-1. The class selector has a medium specicity weight
and holds a point value of 0-1-0. Lastly, the ID selector has a high specicity weight and holds a point value of 1-0-0.

id > class > type

This is the heirarchy of priority, with ID being the most specic

4.3 Combining Selectors
When selectors are combined they should be read from right to left. The selector farthest to the right, directly before the opening
curly bracket, is known as the key selector.

The key selector identies exactly which element the styles will be applied to.

Any

selector to the left of the key selector will serve as a prequalier.

1
2
3
4
5
6
8
9
10
11
12
13
14

// HTML
< div class =" hotdog ">
...< /p>
...< /p>
...

// CSS
.hotdog p {
background : brown ;
}
.hotdog p.mustard {
background : yellow ;
}

Because the new class selector, mustard, falls all the way to the right of the combined selector, it is the key selector, and all of the
individual selectors coming before it are now prequaliers.

Specicity Within Combined Selectors

Looking at our combined selectors from before, the rst selector, .hotdog p, had both

a class selector and a type selector. Knowing that the point value of a class selector is 0-1-0 and the point value of a type selector
is 0-0-1, the total combined point value would be 0-1-1, found by adding up each kind of selector.

The second selector, .hotdog

p.mustard, had two class selectors and one type selector. Combined, the selector has a specicity point value of 0-2-1. The 0 in the
rst column is for zero ID selectors, the 2 in the second column is for two class selectors, and the 1 in the last column is for one type
selector.Comparing the two selectors, the second selector, with its two classes, has a noticeably higher specicity weight and point
value. As such it will take precedence within the cascade. If we were to ip the order of these selectors within our style sheet, placing
the higher-weighted selector above the lower-weighted selector as shown here, the appearance of their styles would not be aected
due to each selector's specicity weight.

4.4 Layering Styles with Multiple Classes
One way to keep the specicity weights of our selectors low is to be as modular as possible, sharing similar styles from element to
element. And one way to be as modular as possible is to layer on dierent styles by using multiple classes.

1
2
3
5
6
7
8
9
10
11
12
13
14

// html
...< /a >
...< / a>
// css
.btn {
font - size : 16 px ;
}
.btn - danger {
background : red ;
}
.btn - success {
background : green ;
}

4.5 Common CSS property values
Colors

All color values within CSS are dened on an sRGB (or standard red, green, and blue) color space. Colors within this space

are formed by mixing red, green, and blue color channels together.

1
2
3
4
5
6

.testColors {
// range is from (0 ,255) for rgb
// alpha is from (0 ,1)
// complete black rgba (r ,g ,b ,a)
background : rgba (0,0, 0,0)
}

Hex Colors

0 equals black and f equals white. Six-character hexadecimal values may be written as three-character hexadecimal

values when the red, green, and blue color channels each contain a repeating character

1
2
3
4
5
6

.task {
background : #800 000;
}
.count {
background : # ff 0;
}

4.6 HSL HSLa Colors
HSL color values are stated using the hsl() function, which stands for hue, saturation, and lightness. Within the parentheses, the
function accepts three comma-separated values, much like rgb().

The second and third values, the saturation and lightness, are

percentage values from 0 to 100%. The saturation value identies how saturated with color the hue is, with 0 being grayscale and
100% being fully saturated. The lightness identies how dark or light the hue value is, with 0 being completely black and 100% being
completely white. Returning to our shade of orange, as an HSL color value it would be written as hsl(24, 100%, 50%).

1
2
3
4
5
6
8
9
10
11
12
13

.task {
background : hsl ( 0, 1 00%, 25%);
}
.count {
background : hsl ( 60, 100%, 50%) ;
}
.task {
background : hsla (0, 100%, 25%, .2 5) ;
}
.count {
background : hsla (60, 100%, 50% , 1);
}

4.7 Lengths
Pixels

The pixel is equal to 1/96th of an inch; thus there are 96 pixels in an inch. The exact measurement of a pixel, however, may

vary slightly between high-density and low-density viewing devices.

1
2
3

p {
font - size : 1 4 px ;
}

Percentages

Percentages, represented by the % unit notation, are one of the most popular relative values. Percentage lengths are

dened in relation to the length of another object. For example, to set the width of an element to 50%, we have to know the width
of its parent element, the element it is nested within, and then identify 50% of the parent element's width.

.col {
width : 50% ;
}

1
2
3

Em

A single em unit is equivalent to an element's font size. So, for example, if an element has a font size of 14 pixels and a width

set to 5em, the width would equal 70 pixels (14 pixels multiplied by 5).

.banner {
font - size : 1 4 px ;
width : 5 em ;
}

1
2
3
4

5

Box Model

Exactly how elements are displayedas block-level elements, inline elements, or something elseis determined by the display property.
Every element has a default display property value; however, as with all other property values, that value may be overwritten. There
are quite a few values for the display property, but the most common are block, inline, inline-block, and none.

1
2
3
5
6
7

p {
display : block ;
}
p {
display : inline ;
}

inline-block,
1
2
3

Using this value will allow an element to behave as a block-level element, accepting all box model properties

p {
display : inline - block ;
}

5.1 What is a box?
According to the box model concept, every element on a page is a rectangular box and may have width, height, padding, borders,
and margins.

Properties
1
2
3
4
5
6
7

Each part of the box model corresponds to a CSS property: width, height, padding, border, and margin.

div {
border : 6 px solid #949 599;
height : 100 px ;
margin : 20 px ;
padding : 20 px ;
width : 400 px ;
}

Total Width/Height

can be calculted through the following formula

1

margin - right + border - right + padding - right + width + padding - left + border - left + margin - left

3

margin - top + border - top + padding - top + height + padding - bottom + border - bottom + margin - bottom

5.2 Margin Padding Declarations
To set one value for the top and bottom and another value for the left and right sides of an element, specify two values: top and
bottom rst, then left and right. Here we are placing margins of 10 pixels on the top and bottom of a  and margins of 20
pixels on the left and right:

\\ if 2 values top - bottom , left - right
div {
margin : 10 px 20 px ;
}

1
2
3
4

4-values

specify those values in the order of top, right, bottom, and left, moving clockwise

div {
margin : 10 px 20 px 0 1 5 px ;
}

1
2
3

5.3 Borders
Here is the code for a 6-pixel-wide, solid, gray border that wraps around all four sides of a :

1
2
3

div {
border : 6 px solid #949 599;
}

Individual Border Sides

As with the margin and padding properties, borders can be placed on one side of an element at a time

if we'd like. Doing so requires new properties: border-top, border-right, border-bottom, and border-left.

1
2
3
5
6
7
9
10
11

div {
border - bottom : 6 px solid #94 9599;
}
div {
border - bottom - width : 12 px ;
}
div {
border - bottom - width : 12 px ;
}

5.4 Box Sizing
Content Box

The content-box value is the default value, leaving the box model as an additive design. If we don't use the box-sizing

property, this will be the default value for all elements.

div {
- webkit - box - sizing : content - box ;
- moz - box - sizing : content - box ;
box - sizing : content - box ;
}

1
2
3
4
5

Padding Box

When using the padding-box value, if an element has a width of 400 pixels and a padding of 20 pixels around every

side, the actual width will remain 400 pixels.

div {
box - sizing : padding - box ;
}

1
2
3

Border Box

Lastly, the border-box value alters the box model so that any border or padding property values are included within

the width and height of an element.

div {
box - sizing : border - box ;
}

1
2
3

6

Positioning

There are a few dierent types of positioning within CSS, and each has its own application.

6.1 Floats
the oat property allows us to take an element, remove it from the normal ow of a page, and position it to the left or right of its
parent element. All other elements on the page will then ow around the oated element. An  element oated to the side of
a few paragraphs of text, for example, will allow the paragraphs to wrap around the image as necessary.

img {
float : left ;
3 }
1

2

1
2
3
4
5
6
7
8
9
10

section {
float : left ;
margin : 0 1 .5 %;
width : 63% ;
}
aside {
float : right ;
margin : 0 1 .5 %;
width : 30% ;
}

Header, Footer

Act as block elements by setting section to oat left, and aside to oat right, with enough total width to t into

the page, they appear side by side

6.2 Float Clearx

7

\\ HTML
< header >...< / header >
< div class =" group ">
< section >...
< aside >...< / aside >

< footer >...< / footer >

9

\\ CSS

1
2
3
4
5
6

10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.group : before ,
.group : after {
content : "";
display : table ;
}
.group : after {
clear : both ;
}
.group {
clear : both ;
* zoom : 1;
}
section {
float : left ;
margin : 0 1 .5 %;
width : 63% ;
}
aside {
float : right ;
margin : 0 1 .5 %;
width : 30% ;
}

the CSS is clearing any oated elements within the element with the class of group and returning the ow of the document back to
normal. More specically, the :before and :after pseudo-elements, as mentioned in the Lesson 4 exercise, are dynamically generated
elements above and below the element with the class of group.

Those elements do not include any content and are displayed as

table-level elements, much like block-level elements. The dynamically generated element after the element with the class of group is
clearing the oats within the element with the class of group, much like the clear from before. And lastly, the element with the class
of group itself also clears any oats that may appear above it, in case a left or right oat may exist. It also includes a little trickery to
get older browsers to play nicely. It is more code than the clear: both; declaration alone, but it can prove to be quite useful. Looking
at our two-column page layout from before, we could wrap the  and  elements with a parent element. That parent
element then needs to contain the oats within itself. The code would look like this:

6.3 Inline-block
Inline-block elements are displayed on the same line as one another, they include a single space between them. When the size of each
single space is added to the width and horizontal margin values of all the elements in the row, the total width becomes too great,
pushing the last  element to a new row. In order to display all of the  elements on the same row, the white space
between each  element must be removed.

Easiest

way to remove the white space is to put the closing tags and opening tags on the same line

// 1 st way
< header >...< / header >
3 < section >
4 ...
5 < section >
6 ...
1

2

7

< section >

9


< footer >...< / footer >

8 ...

10
12
13
14
15
16
17
18
19
20
21
22
23

// 2 nd way
< header >...< / header >
< section >
...
< section >
...
< section >
...

< footer >...< / footer >

6.4 Relative Positioning
The relative value for the position property allows elements to appear within the normal ow a page, leaving space for an element
as intended while not allowing other elements to ow around it; however, it also allows an element's display position to be modied
with the box oset properties. For example, consider the following HTML and CSS:

\\ html
< div >...< / div >
3 < div class =" offset " >...< / div >
4 < div >...< / div >
1

2

6
7

\\ css
div {

8
9
10
11
12
13
14
15

height : 100 px ;
width : 100 px ;

}
.offset {
left : 2 0 px ;
position : relative ;
top : 20 px ;
}

6.5 Absolute Positioning
The absolute value for the position property is dierent from the relative value in that an element with a position value of absolute
will not appear within the normal ow of a document, and the original space and position of the absolutely positioned element will
not be preserved.

Additionally, absolutely positioned elements are moved in relation to their closest relatively positioned parent

element. Should a relatively positioned parent element not exist, the absolutely positioned element will be positioned in relation to
the  element. That's quite a bit of information; let's take a look at how this works inside some

// HTML
< section >
3
< div class =" offset ">...< / div >
4 
1

2

7
8
9
10
11
12
13
14
15

// css
section {
position : relative ;
}
div {
position : absolute ;
right : 20 px ;
top : 20 px ;
}

With relatively

positioned elements, the box oset properties identify in which direction an element would be moved in relation to

itself. With absolutely positioned elements, the box oset properties identify in which direction an element will be moved in relation

to its closest relatively positioned parent element.

7

Working With Typography

7.1 Typeface vs Font
A typeface is what we see. It is the artistic impression of how text looks, feels, and reads. A font is a le that contains a typeface.
Using a font on a computer allows the computer to access the typeface.

7.2 Font Properties
The rst declared font, starting from the left, is the primary font choice. Should the rst font be unavailable, alternative fonts are
declared after it in order of preference from left to right. All properties have inherit.

1
2
3
4
5
6
7
8
9

body {
font - style : italic ; // normal , italic , oblique ;
font - size : 1 4 px ; // in pixels ;
color : #555; // abbreviated hex ;
font - weight : bold ; // normal , bold , bolder , lighter ;
// 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , and 900
font - variant : small - caps ; // normal , small - caps ;
font - family : " Helvetica Neue ", Helvetica , Arial , sans - serif ;
}

In this case, Helvetica Neue is the preferred font to display. If this font is unavailable or not installed on a given device, the next font
in the listHelveticawill be used, and so on.

7.3 Line Height
The best practice for legibility is to set the line-height to around one and a half times our font-size property value. This could be
quickly accomplished by setting the line-height to 150%, or just 1.5.

body {
line - height :2 2 px ;
3 }
1
2

16

// can also be used to center text
body {
line - height :2 2 px ;
height :2 2 px ;
text - align : center ; // left , right , cetner , justify
text - decoration : underline ; // none , underline , overline , line - through
text - indent : 20 px ;
text - shadow : 3 px 6 px 2 px rgba (0 , 0, 0, .3 ); // hoffset , voffset , blur radius , color
text - transform : uppercase ;
letter - spacing : - .5 em ;
word - spacing : .2 5 em ;
}

18

// hover example

5
6
7
8
9
10
11
12
13
14
15

a: hover {
color : #a9 b2b9;
21 }
19

20

7.4 Use Web Safe Fonts
By default there are a few fonts that are pre-installed on every computer, tablet, smart-phone, or other web-browsing-capable device.

1

ArialCourier New , CourierGaramondGeorgiaLucida Sans , Lucida Grande , LucidaPalatino LinotypeTahomaTimes
New Roman , TimesTrebuchetVerdana

7.5 Embedding Web Fonts
We also have the ability to upload fonts to a server and include them on a website via the CSS @font-face at-rule. This capability
has done wonders for online typography. Now, more than ever, typography is coming to life online.

1
2
3
4
5
6
7

@font - face {
font - family : " Lobster ";
src : local ( " Lobster "), url (" lobster.woff ") format (" woff ");
}
body {
font - family : " Lobster ", " Comic Sans ", cursive ;
}

7.6 Including Citations Quotes
Writing online sometimes involves citing dierent sources or quotations.

All of the dierent citation and quotation cases can be

covered semantically in HTML using the , , and  elements.

1

 The book < cite >  Steve Jobs  is truly inspirational. 


3

 Steve Jobs once said ,  One home run is much better than two doubles. < /q>

5

  Steve Jobs  once said ,  One home run is much better than two
doubles. 


< blockquote >
 #822 0; In most people #8 217;s vocabularies , design is a veneer. It #8217 ;s interior decorating. It #8 217;
s the fabric of the curtains , of the sofa. But to me , nothing could be further from the meaning of
design. Design is the fundamental soul of a human - made creation that ends up expressing itself in
successive outer layers of the product. #822 1;
9 
7

8

< blockquote cite =" http :// money.cnn.com / magazines / fortune / fortune_archive /2000/01/24/272277/ index.htm ">
 #82 20; In most people # 8217;s vocabularies , design is a veneer. It #821 7;s interior decorating. It # 8217;
s the fabric of the curtains , of the sofa. But to me , nothing could be further from the meaning of
design. Design is the fundamental soul of a human - made creation that ends up expressing itself in
successive outer layers of the product. #822 1;
15
 < cite > #82 12; Steve Jobs in  Fortune Magazine 
16 
13
14

8

Backgrounds Gradients

Within CSS, element backgrounds can be a solid color, an image, a gradient, or a combination of these.

As we decide how to

implement these backgrounds, we should keep in mind that every background contributes to the overall appearance of our website.

Background Color

When using an RGBa or HSLa value as a transparent background color, it's a good idea to provide a fallback

color, too, because not all browsers recognize RGBa or HSLa values.

div {
background - color : #b2 b2b2; // fallback color
3
background - color : rgba (0, 0, 0 , .3 ) ;
4 }
1

2

Background Image

The url() function value will be the background image's path, and the familiar rules for creating hyperlink

paths apply here. Keep an eye out for dierent directories, and be sure to show exactly where the image resides. The path will be
placed inside parentheses and quoted.

div {
background - image : url (" alert.png ");
3
background - repeat : no - repeat ; // by default bg image repeats
4
// repeat also accepts repeat , repeat -x , repeat y
5 }
1

2

Position

By default, background images are positioned at the left top corner of an element. However, by using the background-

position property, we can control exactly where the background image is placed relative to that corner. The background-position
property requires two values: a horizontal oset (the rst value) and a vertical oset (the second value).

1
2
3
4
5
6

div {
background - image : url (" alert.png ");
background - position : 20 px 10 px ;
// keywords are also useful left , top ; right , top ; left ,
background - repeat : no - repeat ;
}

Shorthand for backgroudn and image values

The background-color, background-image, background-position, and background-

repeat properties may be rolled up into a shorthand value for the background property alone.

div {
background : #b2b 2b2 url (" alert.png ") 20 px 10 px no - repeat ;
3 }
1

2

8.1 Gradient Backgrounds
Within CSS, gradient backgrounds are treated as background images. We can create a gradient using the background or backgroundimage properties, just like a regular background image. The property value for a gradient background varies depending on what type
of gradient we'd like, linear or radial.

Linear Gradients

are identied by using the linear-gradient() function within the background or background-image property. The

linear-gradient() function must include two color values, the rst of which will be the beginning color value and the second of which
will be the ending color value. The browser will then handle the transition between the two colors.

1
2
3
4
5
6
7
9
10
11
12
13
14

div {
background : #466 368;
// this is for different browsers
background : - webkit - linear - gradient (#6 48880 , #29 3f50) ;
background :
- moz - linear - gradient (#648 880, #293f 50);
background :
linear - gradient ( #6488 80, # 293f5 0);
}
// usable directions are left , right bottom , top
// example witch changing the direction to right bottom
div {
background : #466 368;
background : linear - gradient ( to right bottom , # 64888 0, #2 93f50 );
}

Radial Gradients

Radial background gradients work just like linear gradients and share many of the same values.

For radial

gradients, instead of using the linear-gradient() function within the background or background-image property, we'll use the radialgradient() function.
Radial gradients work from the inside to the outside of an element. Thus, the rst color identied within the radial-gradient()
function will sit in the absolute center of the element, and the second color will sit on the outside of an element.

1
2
3
4

div {
background : #466 368;
background : radial - gradient (#648 880, #293f 50);
}

Gradient Color Stops

At a minimum, gradient backgrounds will transition from one color to another; however, we may add

multiple colors to a gradient and have the browser transition between all of them.

div {
background : #648 880;
3
background : linear - gradient ( to right , #f6 f1d3, #648 880, #293f 50);
4 }
1

2

8.2 Using Multiple Background Images
we can now use more than one background image on an element by comma-separating multiple background values within a background
or background-image property.

The background image value that comes rst will be the foremost background image, and the

background image that's listed last will be the rearmost background image. Any value between the rst and the last will reside within
the middle ground accordingly.

div {
background : url (" foreground.png ") 0 0 no - repeat , url (" middle - ground.png ") 0 0 no - repeat , url ("
background.png ") 0 0 no - repeat ;
3 }
1

2

8.3 New Background Properties
The background-size property allows us to change the size of a background image, while the background-clip and background-origin
properties allow us to control where a background image is cropped and where a background image is contained within the element
(inside the border or inside the padding, for example).

Background Size

When using length values, we can specify a width and a height value by using two space-separated values. The

rst value will set the width of the background image, while the second value will set the height of the background image.

It's

important to note that percentage values are in relation to the element's size, not the background image's original size.

1
2
3
4
5
6
7
8

div {
background : url ( " shay.jpg ") 0 0 no - repeat ;
// this sets it auto width and 75% height
background - size : auto 75%;
border : 2 px dashed #97 99a7;
height : 240 px ;
width : 200 px ;
}

Cover Contain

The cover keyword value species that the background image will be resized to completely cover an element's

width and height. The contain keyword value, on the other hand, species that the background image will be resized to reside entirely
contained within an element's width and height.

1
2
3
4
5
6
7
8

div {
background : url ( " shay.jpg ") 0 0 no - repeat ;
// this sets it auto width and 75% height
background - size : cover ; // contain cover expands h and w to parent element , contain dosent ;
border : 2 px dashed #97 99a7;
height : 240 px ;
width : 200 px ;
}

CSS3 Background Clip Background Origin

The background-clip property species the surface area a background image will

cover, and the background-origin property species where the background-position should originate. The introduction of these two
new properties corresponds with the introduction of three new keyword values: border-box, padding-box, and content-box. Each of
these three values may be used for the background-clip and background-origin properties.

div {
background : url ( " shay.jpg ") 0 0 no - repeat ;
3
background - clip : padding - box ;
4
background - origin : border - box ;
5 }
1

2

9

Lists

When we want to use a list on a website, HTML provides three dierent types to choose from: unordered, ordered, and description
lists.

Choosing which type of list to useor whether to use a list at allcomes down to the content and the most semantically

appropriate option for displaying that content.

9.1 Unordered Lists
An unordered list is simply a list of related items whose order does not matter. Creating an unordered list in HTML is accomplished
using the unordered list block-level element, . Each item within an unordered list is individually marked up using the list item
element, .

< ul >
< li > Orange 
3
< li > Green 
4
< li > Blue 
5 

1

2

9.2 Ordered Lists
The ordered list element, , works very much like the unordered list element; individual list items are created in the same manner.
The main dierence between an ordered list and an unordered list is that with an ordered list, the order in which items are presented
is important.

< ol >
< li > Head north on N Halsted St < / li >
3
< li > Turn right on W Diversey Pkwy 
4
< li > Turn left on N Orchard St 
5 

1

2

Start/Reverse Attribute

denes the number from which an ordered list should start. By default, ordered lists start at 1

< ol start =" 30 ">
< li > Head north on N Halsted St < / li >
3
< li > Turn right on W Diversey Pkwy 
4
< li > Turn left on N Orchard St 
5 

1

2

7
8
9
10
11
12

// reversed list displays number in reverse
< ol reversed >
< li > Head north on N Halsted St < / li > // 3
< li > Turn right on W Diversey Pkwy  // 2
< li > Turn left on N Orchard St  // 1


Value attribute

may be used on an individual  within an ordered list, this changes the number to whatever value you assign

< ol >
< li > Head north on N Halsted St < / li >
3
< li value ="9" > Turn right on W Diversey Pkwy 
4
< li > Turn left on N Orchard St 
5 

1

2

9.3 Description Lists
Creating a description list in HTML is accomplished using the description list block-level element, . Instead of using a 
element to mark up list items, the description list requires two block-level elements: the description term element, , and the
description element, .

1
2
3
4
5
6
7
8
9
10

< dl >
< dt > study 
< dd > The devotion of time and attention to acquiring knowledge on an academic subject , especially by means
of books 
< dt > design 
< dd >A plan or drawing produced to show the look and function or workings of a building , garment , or other
object before it is built or made 
< dd > Purpose , planning , or intention that exists or is thought to exist behind an action , fact , or material
object 
< dt > business 
< dt > work 
< dd >A persons regular occupation , profession , or trade 


9.4 Nesting Lists
One feature that makes lists extremely powerful is their ability to be nested. Every list may be placed within another list; they can
be nested continually. But the potential to nest lists indenitely doesn't provide free rein to do so. Lists should still be reserved
specically for where they hold the most semantic value.

1
2
3
4
5
6
7
8

< ol >
< li > Walk the dog < / li >
< li > Fold laundry 
< li >
Go to the grocery and buy :
< ul >
< li > Milk 
< li > Bread 

9
10
11
12
13
14

< li > Cheese 


< li > Mow the lawn 
< li > Make dinner 


9.5 List Item Styling
The list-style-type property is used to set the content of a list item marker. The available values range from squares and decimal
numbers all the way to Armenian numbering, and the style may be placed on either the , , or  elements within CSS.
Any list-style-type property value can be added to either unordered or ordered lists. With this in mind, it is possible to use a numeric
list item marker on an unordered list and a nonnumeric marker on an ordered list.

1
2
3
4
5
6

// html
< ul >
< li > Orange 
< li > Green 
< li > Blue 


// css
ul {
10
list - style - type : square ;
11 }
8
9

9.6 List Type Values

9.7 Image Marker
The process includes removing any default list-style-type property value and adding a background image and padding to the 

element.

1
2
3
4
5
6
7
8
9
10
11
12

// html
< ul >
< li > Orange 
< li > Green 
< li > Blue 

// css
li {
background : url ( " arrow.png " ) 0 50% no - repeat ;
list - style - type : none ;
padding - left : 12 px ;
}

9.8 Shorthand List Style Property
The order of these shorthand values should be list-style-type followed by list-style-position.

1
2
3
4
5
6

ul {
list - style : circle inside ;
}
ol {
list - style : lower - roman ;
}

9.9 Horizontal List
The quickest way to display a list on a single line is to give the 
 elements a display property value of inline or inline-block. Doing
so places all the 
 elements within a single line, with a single space between each list item.

1
2
3
4
5
6
7
8
9
10
11

// html
< ul >
< li > Orange 
< li > Green 
< li > Blue 

// css
li {
display : inline - block ;
margin : 0 10 px ;
}

9.10 Floating List
Changing the display property value to inline or inline-block is quick; however, it removes the list item marker. If the list item marker
is needed, oating each 
 element is a better option than changing the display property.

1
2
3
4
5
6

// html
< ul >
< li > Orange 
< li > Green 
< li > Blue 


// css
li {
10
float : left ;
11
margin : 0 20 px ;
12 }
8
9

9.11 Navigational List Example
We'll often develop, and nd, navigation menus using unordered lists. These lists are commonly laid out as horizontal lists, using
either of the two techniques previously mentioned. Here is an example of a horizontal navigation menu marked up using an unordered
list with  elements displayed as inline-block elements.

1
2
3
4
5
6
7

// html
< nav class =" navigation ">
< ul >
< li > Profile < /a>< li > Settings   < li > Notifications   < li > Logout 

8
9
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39



// css
.navigation ul {
font : bold 11 px " Helvetica Neue ", Helvetica , Arial , sans - serif ;
margin : 0;
padding : 0;
text - transform : uppercase ;
}
.navigation li {
display : inline - block ;
}
.navigation a {
background : #395 870;
background : linear - gradient (#497 08f, #293f 50);
border - right : 1 px solid rgba (0, 0, 0 , .3 ) ;
color : # fff ;
padding : 12 px 20 px ;
text - decoration : none ;
}
.navigation a: hover {
background : #314 b60;
box - shadow : inset 0 0 10 px 1 px rgba (0, 0, 0, .3 );
}
.navigation li : first - child a {
border - radius : 4 px 0 0 4 px ;
}
.navigation li : last - child a {
border - right : 0;
border - radius : 0 4 px 4 px 0;
}

9.12 Nav Element
We're going to want to change the display value of our 
 elements to inline-block to get all of them to align in a horizontal row.
When we do that, though, we'll also need to account for the blank space left between each 
 element. We'll begin by setting all
of the 
 elements within any element with the class attribute value of nav to be displayed inline-block, to include some horizontal
margins, and to be vertically aligned to the top of the element. Additionally, we'll use the :last-child pseudo-class selector to identify
the last 
 element and reset its right margin to 0. Doing so ensures that any horizontal space between the 
 element and the
edge of its parent element is removed. Within our main.css le, below our existing navigation styles, let's add the following CSS:

1
2
3
4
5
6
7
8
9
10
12
13
14
15
16
17
18
19
20

// header
< nav class =" nav primary - nav ">
< ul >
< li > Home < /a>< li > Speakers < li > Schedule < li > Venue < li > Register 


// css
.nav li {
display : inline - block ;
margin : 0 10 px ;
vertical - align : top ;
}
.nav li : last - child {
margin - right : 0;
}

10

Adding Media

HTML provides ways to embed rich media in the form of images, audio tracks, and videos, as well as to embed content from another
web page in the form of an inline frame.

10.1 Images
To add images to a page, we use the  inline element. The  element is a self-containing, or empty, element, which means
that it doesn't wrap any other content and it exists as a single tag. For the  element to work, a src attribute and value must
be included to specify the source of the image. The src attribute value is a URL, typically relative to the server where a website is
hosted.

1

< img src =" dog.jpg " alt = "A black , brown , and white dog wearing a kerchief ">

Sizing

One option is to use the width and height attributes directly within the  tag in HTML.Additionally, images may be

sized using the width and height properties in CSS. When both the HTML attributes and CSS properties are used, the CSS attributes
will take precedence over the HTML attributes.

img {
height : 200 px ;
3
width : 200 px ;
4
display : block ; // by default images are inline
5 }
1

2

Float left or right
1
2
3
4
5
6
7

To do this we use the oat property with a value of either left or right.

img {
background : # eaeaed ;
border : 1 px solid #979 9a7;
float : right ;
margin : 8 px 0 0 20 px ;
padding : 4 px ;
}

10.2 Audio
HTML5 provides a quick and easy way to add audio les to a website by way of the  download < /a> the audio file.


10.3 Video
Adding video in HTML5 is very similar to adding audio. We use the  the video.
5 

1

2

Embedded Videos

One additional fallback option that could be used in place of a plain text fallback is to use a YouTube or

Vimeo embedded video. These video hosting websites allow us to upload our videos, provide a standard video player, and enable us
to embed our videos onto a page using an inline frame.

10.4 Iframes
Another way to add content to a page is to embed another HTML page within the current page. This is done using an inline frame,
or  element. The <iframe> element accepts the URL of another HTML page within the src attribute value; this causes the
content from the embedded HTML page to be displayed on the current page.

1

< iframe src =" https :// www.google.com / maps / embed ? ... " ></ iframe >

10.5 Figure
The <gure> block-level element is used to identify and wrap self-contained content, often in the form of media. It may surround
images, audio clips, videos, blocks of code, diagrams, illustrations, or other self-contained media.

< figure >
< img src =" dog.jpg " alt = "A black , brown , and white dog wearing a kerchief ">
3 </ figure >

1

2

< figure >
< img src =" dog.jpg " >
7
< figcaption >A beautiful black , brown , and white hound dog wearing kerchief. < / figcaption >
8 </ figure
5
6

11

Building Forms

Forms are an essential part of the Internet, as they provide a way for websites to capture information from users and to process
requests, and they oer controls for nearly every imaginable use of an application. Through controls or elds, forms can request a
small amount of informationoften a search query or a username and passwordor a large amount of informationperhaps shipping
and billing information or an entire job application.

11.1 Initializing a Form
To add a form to a page, we'll use the <form> element. The <form> element identies where on the page control elements will
appear. Additionally, the <form> element will wrap all of the elements included within the form, much like a <div> element.

< form action = "/ login " method = " post ">
...
3 </ form >

1

2

A handful of dierent attributes can be applied to the <form> element, the most common of which are action and method. The
action attribute contains the URL to which information included within the form will be sent for processing by the server.

The

method attribute is the HTTP method browsers should use to submit the form data. Both of these <form> attributes pertain to
submitting and processing data.

11.2 Text Fields Textareas
When it comes to gathering text input from users, there are a few dierent elements available for obtaining data within forms.
Specically, text elds and textareas are used for collecting text- or string-based data.

This data may include passages of text

content, passwords, telephone numbers, and other information.

Text Fields

One of the primary elements used to obtain text from users is the <input> element. The <input> element uses the

type attribute to dene what type of information is to be captured within the control. The most popular type attribute value is text,
which denotes a single line of text input.Along with setting a type attribute, it is best practice to give an <input> element a name
attribute as well. The name attribute value is used as the name of the control and is submitted along with the input data to the
server.

1

< input type =" text " name =" username " >

Dierent types

These values were added to provide clearer semantic meaning for inputs as well as to provide better controls for

users. Should a browser not understand one of these HTML5 type attribute values, it will automatically fall back to the text attribute
value. Below is a list of the new HTML5 input types.

1
2
3
4
5
6

< input
< input
< input
< input
< input
< input

type =" date " name =" birthday " >
type =" time " name =" game - time ">
type =" email " name =" email - address " >
type =" url " name = " website ">
type =" number " name =" cost ">
type =" tel " name = " phone - number ">

11.3 Text Area
Another element that's used to capture text-based data is the <textarea> element. The <textarea> element diers from the <input>
element in that it can accept larger passages of text spanning multiple lines. The <textarea> element also has start and end tags
that can wrap plain text.

1

< textarea name =" comment " > Add your comment here </ textarea >

Multiple Choice

Apart from text-based input controls, HTML also allows users to select data using multiple choice and

drop-down lists. There are a few dierent options and elements for these form controls, each of which has distinctive benets.

Radio Buttons

Radio buttons are an easy way to allow users to make a quick choice from a small list of options. Radio buttons

permit users to select one option only, as opposed to multiple options.

< input type =" radio " name =" day " value =" Friday " checked > Friday
< input type =" radio " name =" day " value =" Saturday "> Saturday
3 < input type =" radio " name =" day " value =" Sunday "> Sunday

1

2

Check Boxes

Check boxes are very similar to radio buttons. They use the same attributes and patterns, with the exception of

checkbox as their type attribute value. The dierence between the two is that check boxes allow users to select multiple values and
tie them all to one control name, while radio buttons limit users to one value.

< input type =" checkbox " name =" day " value =" Friday " checked > Friday
< input type =" checkbox " name =" day " value =" Saturday " > Saturday
3 < input type =" checkbox " name =" day " value =" Sunday "> Sunday

1

2

Drop Down lists

To create a drop-down list we'll use the <select> and <option> elements. The <select> element wraps all of

the menu options, and each menu option is marked up using the <option> element. The name attribute resides on the <select>
element, and the value attribute resides on the <option> elements that are nested within the <select> element. The value attribute
on each <option> element then corresponds to the name attribute on the <select> element.

< select name = " day ">
< option value =" Friday " selected > Friday < / option >
3
< option value =" Saturday " > Saturday </ option >
4
< option value =" Sunday "> Sunday </ option >
5 </ select >

1

2

Multiple Selections

The Boolean attribute multiple, when added to the <select> element for a standard drop-down list, allows

a user to choose more than one option from the list at a time. Additionally, using the selected Boolean attribute on more than one
<option> element within the menu will preselect multiple options.

< select name = " day " multiple >
< option value =" Friday " selected > Friday < / option >
3
< option value =" Saturday " > Saturday </ option >
4
< option value =" Sunday "> Sunday </ option >
5 </ select >

1

2

11.4 Form Buttons
After a user inputs the requested information, buttons allow the user to put that infor- mation into action. Most commonly, a submit
input or submit button is used to process the data.

Submit Input

Users click the submit button to process data after lling out a form.

<input> element with a type attribute value of submit.

The submit button is created using the

The value attribute is used to specify the text that appears within the

button.

1

< input type =" submit " name =" submit " value =" Send ">

Submit Button

The <button> element performs the same way as the <input> element with the type attribute value of submit;

however, it includes opening and closing tags, which may wrap other elements. By default, the <button> element acts as if it has a
type attribute value of submit, so the type attribute and value may be omitted from the <button> element if you wish.

< button name = " submit ">
< strong > Send Us </ strong > a Message
3 </ button >

1

2

11.5 Other Inputs
Besides the applications we've just discussed, the <input> element has a few other use cases. These include passing hidden data and
attaching les during form processing.

< button name = " submit ">
< strong > Send Us </ strong > a Message
3 </ button >

1

2

11.6 Hidden Input
Hidden inputs provide a way to pass data to the server without displaying it to users. Hidden inputs are typically used for tracking
codes, keys, or other information that is not pertinent to the user but is helpful when processing the form. This information is not
displayed on the page; however, it can be found by viewing the source code of a page. It should therefore not be used for sensitive
or secure information.

1

< input type =" hidden " name =" tracking - code " value =" abc -123 ">

11.7 File Input
To allow users to add a le to a form, much like attaching a le to an email, use the le value for the type attribute.

1

< input type =" file " name =" file ">

11.8 Form Elements
By using labels, eldsets, and legends, we can better organize forms and guide users to properly complete them.

1
2

< label for =" username "> Username </ label >
< input type =" text " name =" username " id =" username ">

<label>

If desired, the <label> element may wrap form controls, such as radio buttons or check boxes. Doing so allows omission

of the for and id attributes.

1
2
3
4
5
6
7
8
9

< label >
< input type =" radio " name =" day " value =" Friday " checked > Friday
</ label >
< label >
< input type =" radio " name =" day " value =" Saturday "> Saturday
</ label >
< label >
< input type =" radio " name =" day " value =" Sunday "> Sunday
</ label >

<eldset>

group form controls and labels into organized sections.

Much like a <section> or other structural element, the

<eldset> is a block-level element that wraps related elements, specically within a <form> element, for better organization.
Fieldsets, by default, also include a border outline, which can be modied using CSS.

1
2
3
4
5
6
7
8
9
10

< fieldset >
< label >
Username
< input type =" text " name =" username " >
</ label >
< label >
Password
< input type =" text " name =" password " >
</ label >
</ fieldset >

Legend

provides a caption, or heading, for the <eldset> element. The <legend> element wraps text describing the form controls

that fall within the eldset. The markup should include the <legend> element directly after the opening <eldset> tag. On the
page, the legend will appear within the top left part of the eldset border.

1
2
3
4
5
6
7
8
9
10
11

< fieldset >
< legend > Login < / legend >
< label >
Username
< input type =" text " name =" username " >
</ label >
< label >
Password
< input type =" text " name =" password " >
</ label >
</ fieldset >

Disabled

The disabled Boolean attribute turns o an element or control so that it is not available for interaction or input. Elements

that are disabled will not send any value to the server for form processing.

< label >
Username
3
< input type =" text " name =" username " disabled >
4 </ label >

1

2

Placeholder

The placeholder HTML5 attribute provides a hint or tip within the form control of an <input> or <textarea> element

that disappears once the control is clicked in or gains focus. This is used to give users further information on how the form input
should be lled in, for example, the email address format to use.

// value pre - populates the data for the field , while placeholder is a hint
< label >
3
Email Address
4
< input type =" email " name =" email - address " placeholder =" name@domain.com ">
5 </ label >
1

2

Required

The required HTML5 Boolean attribute enforces that an element or form control must contain a value upon being

submitted to the server. Should an element or form control not have a value, an error message will be displayed requesting that the
user complete the required eld. Currently, error message styles are controlled by the browser and cannot be styled with CSS. Invalid
elements and form controls, on the other hand, can be styled using the :optional and :required CSS pseudo-classes.Validation also
occurs specic to a control's type. For example, an <input> element with a type attribute value of email will require not only that
a value exist within the control, but also that it is a valid email address.

< label >
Email Address
3
< input type =" email " name =" email - address " required >
4 </ label >

1

2

Additional Attributes

Other form and form control attributes include, but are not limited to, the following. Please feel free to

research these attributes as necessary.

Login Example

The following is an example of a complete login form that includes several dierent elements and attributes to

illustrate what we've covered so far. These elements are then styled using CSS.

1
2
3
4
5
6
7
8
9
10

// html
< form >
< fieldset class =" account - info ">
< label >
Username
< input type =" text " name =" username " >
</ label >
< label >
Password
< input type =" password " name = " password ">

11
12
13
14
15
16
17
18
19
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

</ label >
</ fieldset >
< fieldset class =" account - action ">
< input class = " btn " type =" submit " name =" submit " value =" Login ">
< label >
< input type =" checkbox " name = " remember "> Stay signed in
</ label >
</ fieldset >
</ form >
// css
*,
*: before ,
*: after {
box - sizing : border - box ;
}
form {
border : 1 px solid #c6c 7 cc ;
border - radius : 5 px ;
font : 1 4 px /1 .4 " Helvetica Neue ", Helvetica , Arial , sans - serif ;
overflow : hidden ;
width : 240 px ;
}
fieldset {
border : 0;
margin : 0;
padding : 0;
}
input {
border - radius : 5 px ;
font : 1 4 px /1 .4 " Helvetica Neue ", Helvetica , Arial , sans - serif ;
margin : 0;
}
.account - info {
padding : 20 px 20 px 0 20 px ;
}
.account - info label {
color : #39 5870;
display : block ;
font - weight : bold ;
margin - bottom : 20 px ;
}
.account - info input {
background : # fff ;
border : 1 px solid #c6c 7 cc ;
box - shadow : inset 0 1 px 1 px rgba (0 , 0, 0, .1 );
color : #63 6466;
padding : 6 px ;
margin - top : 6 px ;
width : 100 %;
}
.account - action {
background : #f0f 0f2;
border - top : 1 px solid #c6c7 cc ;
padding : 20 px ;
}
.account - action .btn {
background : linear - gradient (#497 08f, #293f 50);
border : 0;
color : # fff ;
cursor : pointer ;
font - weight : bold ;
float : left ;
padding : 8 px 16 px ;
}
.account - action label {
color : #7c 7c80;
font - size : 12 px ;
float : left ;
margin : 10 px 0 0 20 px ;
}

12

Tables

HTML tables were created to provide a straightforward way to mark up structured tabular data and to display that data in a form
that is easy for users to read and digest.

12.1 Creating a Table
Tables are made up of data that is contained within columns and rows, and HTML supplies several dierent elements for dening
and structuring these items. At a minimum a table must consist of <table>, <tr> (table row), and <td> (table data) elements. For
greater structure and additional semantic value, tables may include the <th> (table header)

Table

We use the <table> element to initialize a table on a page. Using the <table> element signies that the information within

this element will be tabular data displayed in the necessary columns and rows.

< table >
...
3 </ table >

1

2

Table Row

Once a table has been dened in HTML, table rows may be added using the <tr> element. A table can have numerous

table rows, or <tr> elements.

Depending on the amount of information there is to display, the number of table rows may be

substantial.

1
2
3
4
5
6
7
8

< table >
< tr >
...
</ tr >
< tr >
...
</ tr >
</ table >

Table Data

Once a table is dened and rows within that table have been set up, data cells may be added to the table via the table

data, or <td>, element. Listing multiple <td> elements one after the other will create columns within a table row.

1
2

< table >
< tr >

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

< td > Don #8217 ;t Make Me Think by Steve Krug </ td >
< td > In Stock < / td >
< td >1</ td >
< td >$30 .0 2</ td >
</ tr >
< tr >
< td >A Project Guide to UX Design by Russ Unger # 38; Carolyn Chandler </ td >
< td > In Stock < / td >
< td >2</ td >
< td >$52 .9 4 ($ 26 .4 7 #2 15; 2 )</ td >
</ tr >
< tr >
< td > Introducing HTML 5 by Bruce Lawson #3 8; Remy Sharp </ td >
< td > Out of Stock </ td >
< td >1</ td >
< td >$22 .2 3</ td >
</ tr >
< tr >
< td > Bulletproof Web Design by Dan Cederholm </ td >
< td > In Stock < / td >
< td >1</ td >
< td >$30 .1 7</ td >
</ tr >
</ table >

Table Header
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

To designate a heading for a column or row of cells, the table header element, <th>, should be used.

< table >
< tr >
< th scope =" col "> Item </ th >
< th scope =" col "> Availability </ th >
< th scope =" col "> Qty </ th >
< th scope =" col "> Price </ th >
</ tr >
< tr >
< td > Don #8217 ;t Make Me Think by Steve Krug </ td >
< td > In Stock < / td >
< td >1</ td >
< td >$30 .0 2</ td >
</ tr >
< tr >
< td >A Project Guide to UX Design by Russ Unger #38; Carolyn Chandler </ td >
< td > In Stock < / td >
< td >2</ td >
< td >$52 .9 4 ($ 26 .4 7 #2 15; 2 )</ td >
</ tr >
< tr >
< td > Introducing HTML 5 by Bruce Lawson #3 8; Remy Sharp </ td >
< td > Out of Stock </ td >
< td >1</ td >
< td >$22 .2 3</ td >
</ tr >
< tr >
< td > Bulletproof Web Design by Dan Cederholm </ td >
< td > In Stock < / td >
< td >1</ td >
< td >$30 .1 7</ td >
</ tr >
</ table >

12.2 Table Structure
Additional elements include these elements include <caption>, <thead>, <tbody>, and <tfoot>

Table Caption

The <caption> element provides a caption or title for a table. A caption will help users identify what the table

pertains to and what data they can expect to nd within it.

The <caption> element must come immediately after the opening

<table> tag, and it is positioned at the top of a table by default.

< table >
< caption > Design and Front - End Development Books < / caption >
3
...
4 </ table >

1

2

Table Head, Body Foot

The table head element, <thead>, wraps the heading row or rows of a table to denote the head.

The table head should be placed at the top of a table, after any <caption> element and before any <tbody> element. After the
table head may come either the <tbody> or <tfoot> elements. Originally the <tfoot> element had to come immediately after the
<thead> element, but HTML5 has provided leeway here. These elements may now occur in any order so long as they are never
parent elements of one another. The <tbody> element should contain the primary data within a table, while the <tfoot> element
contains data that outlines the contents of a table.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

< table >
< caption > Design and Front - End Development Books < / caption >
< thead >
< tr >
< th scope =" col "> Item </ th >
< th scope =" col "> Availability < / th >
< th scope =" col "> Qty </ th >
< th scope =" col "> Price </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Don #8217 ;t Make Me Think by Steve Krug </ td >
< td > In Stock < / td >
< td >1</ td >

16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

< td >$30 .0 2</ td >
</ tr >
...
</ tbody >
< tfoot >
< tr >
< td > Subtotal </ td >
< td ></ td >
< td ></ td >
< td >$135 .3 6</ td >
</ tr >
< tr >
< td > Tax < / td >
< td ></ td >
< td ></ td >
< td >$13 .5 4</ td >
</ tr >
< tr >
< td > Total </ td >
< td ></ td >
< td ></ td >
< td >$148 .9 0</ td >
</ tr >
</ tfoot >
</ table >

Combining Cells

In these cases we can use the colspan and rowspan attributes. These two attributes work on either the <td>

or <th> elements.

The colspan attribute is used to span a single cell across multiple columns within a table, while the rowspan

attribute is used to span a single cell across multiple rows. Each attribute accepts an integer value that indicates the number of cells
to span across, with 1 being the default value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

< table >
< caption > Design and Front - End Development Books < / caption >
< thead >
< tr >
< th scope =" col " colspan ="2"> Item </ th >
< th scope =" col "> Qty </ th >
< th scope =" col "> Price </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Don #8217 ;t Make Me Think by Steve Krug </ td >
< td > In Stock < / td >
< td >1</ td >
< td >$30 .0 2</ td >
</ tr >
...
</ tbody >
< tfoot >
< tr >
< td colspan =" 3"> Subtotal </ td >
< td >$135 .3 6</ td >
</ tr >
< tr >
< td colspan =" 3"> Tax </ td >
< td >$13 .5 4</ td >

27
28
29
30
31
32
33

</ tr >
< tr >
< td colspan =" 3"> Total </ td >
< td >$148 .9 0</ td >
</ tr >
</ tfoot >
</ table >

Borders

Eective use of borders can help make tables more comprehensible. Borders around a table or individual cells can make

a large impact when a user is trying to interpret data and quickly scan for information. When styling table borders with CSS there
are two properties that will quickly come in handy: border-collapse and border-spacing. The border-collapse property determines
a table's border model.

There are three values for the border-collapse property: collapse, separate, and inherit.

By default, the

border-collapse property value is separate, meaning that all of the dierent borders will stack up next to one another, as described
above. The collapse value, on the other hand, condenses the borders into one, choosing the table cell as the primary border.

1
2
3
4
5
6
7
8

table {
border - collapse : collapse ;
}
th ,
td {
border : 1 px solid # cecfd 5;
padding : 10 px 15 px ;
}

Border Spacing

a table with a 1-pixel border around the entire table and a 1-pixel border around each cell will have a 2-pixel

border all around every cell because the borders stack up next to one another. Adding in a border-spacing value of 4 pixels separates
the borders by 4 pixels. The border-spacing property works only when the border-collapse property value is separate, its default value.
If the border-collapse property hasn't been previously used, we can use the border-spacing property without worry. Additionally, the
border-spacing property may accept two length values: the rst value for horizontal spacing and the second value for vertical spacing.
The declaration border-spacing: 5px 10px;,

1
2
3
4
5
6
7
8
9
10
11

table {
border - collapse : separate ;
border - spacing : 4 px ;

}
table ,
th ,
td {
border : 1 px solid # cecfd 5;
}
th ,
td {

12
13

}

padding : 10 px 15 px ;

Adding Borders to Rows

We'll begin by making sure the table's border-collapse property value is set to collapse, and then we'll

add a bottom border to each table cell, regardless of whether it's a <th> or <td> element. If we wish, we can remove the bottom
border from the cells within the last row of the table by using the :last-child pseudo-class selector to select the last <tr> element
within the table and target the <td> elements within that row. Additionally, if a table is using the structural elements, we'll want
to make sure to prequalify the last row of the table as being within the <tfoot> element.

1
2
3
4
5
6
7

table {
border - collapse : collapse ;
}
th ,
td {
border - bottom : 1 px solid # cecfd 5;
padding : 10 px 15 px ;

}
tfoot tr : last - child td {
10
border - bottom : 0;
11 }
8

9

Table Striping

In the eort to make tables more legible, one common design practice is to stripe table rows with alternating

background colors. This makes the rows clearer and provides a visual cue for scanning information. One way to do this is to place a
class on every other <tr> element and set a background color to that class. Another, easier way is to use the :nth-child pseudo-class
selector with an even or odd argument to select every other <tr> element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

table {
border - collapse : separate ;
border - spacing : 0;
}
th ,
td {
padding : 10 px 15 px ;
}
thead {
background : #395 870;
color : # fff ;
}
tbody tr : nth - child ( even ) {
background : #f0f 0f2;
}
td {
border - bottom : 1 px solid # cecfd 5;
border - right : 1 px solid # cecfd 5;
}
td : first - child {
border - left : 1 px solid # cecfd 5;
}

Aligning Text

To align text vertically, however, the vertical-align property is used. The vertical-align property works only with

inline and table-cell elementsit won't work for block, inline-block, or any other element levels. The vertical-align property accepts
a handful of dierent values; the most popular values are top, middle, and bottom. These values vertically position text in relation
to the table cell, for table-cell elements, or to the closest parent element, for inline-level elements. By revising the HTML and CSS
to include the text-align and vertical-align properties, we can clean up the layout of our table of books. Note that the data within
the table becomes much clearer and more digestible.

1
2

// html
< table >

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

< thead >
< tr >
< th scope =" col " colspan ="2"> Item </ th >
< th scope =" col "> Qty </ th >
< th scope =" col "> Price </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >
< strong class =" book - title "> Don #82 17;t Make Me Think < / strong > by Steve Krug
</ td >
< td class =" item - stock "> In Stock </ td >
< td class =" item - qty ">1</ td >
< td class =" item - price ">$ 30 .0 2 </ td >
</ tr >
< tr >
< td >
< strong class =" book - title ">A Project Guide to UX Design </ strong > by Russ Unger #38; Carolyn Chandler
</ td >
< td class =" item - stock "> In Stock </ td >
< td class =" item - qty ">2</ td >
< td class =" item - price ">$ 52 .9 4 < span class =" item - multiple ">$2 6 .4 7 #21 5; 2< / span ></ td >
</ tr >
< tr >
< td >
< strong class =" book - title "> Introducing HTML 5< / strong > by Bruce Lawson #3 8; Remy Sharp
</ td >
< td class =" item - stock "> Out of Stock </ td >
< td class =" item - qty ">1</ td >
< td class =" item - price ">$ 22 .2 3 </ td >
</ tr >
< tr >
< td >
< strong class =" book - title "> Bulletproof Web Design </ strong > by Dan Cederholm
</ td >
< td class =" item - stock "> In Stock </ td >
< td class =" item - qty ">1</ td >
< td class =" item - price ">$ 30 .1 7< / td >
</ tr >
</ tbody >
< tfoot >
< tr >
< td colspan =" 3"> Subtotal </ td >
< td >$135 .3 6</ td >

48
49
50
51
52
53
54
55
56
57
58
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

</ tr >
< tr >
< td colspan =" 3"> Tax </ td >
< td >$13 .5 4</ td >
</ tr >
< tr >
< td colspan =" 3"> Total </ td >
< td >$148 .9 0</ td >
</ tr >
</ tfoot >
</ table >
// css
table {
border - collapse : separate ;
border - spacing : 0;
color : #4a 4a4d;
font : 1 4 px /1 .4 " Helvetica Neue ", Helvetica , Arial , sans - serif ;
}
th ,
td {
padding : 10 px 15 px ;
vertical - align : middle ;
}
thead {
background : #395 870;
color : # fff ;
}
th : first - child {
text - align : left ;
}
tbody tr : nth - child ( even ) {
background : #f0f 0f2;
}
td {
border - bottom : 1 px solid # cecfd 5;
border - right : 1 px solid # cecfd 5;
}
td : first - child {
border - left : 1 px solid # cecfd 5;
}
.book - title {
color : #39 5870;
display : block ;
}
.item - stock ,
.item - qty {
text - align : center ;
}
.item - price {
text - align : right ;
}
.item - multiple {
display : block ;
}
tfoot {
text - align : right ;
}
tfoot tr : last - child {
background : #f0f 0f2;
}

Rounded Corners
1
2
3
4
5
6
7
8

table {
border - collapse : separate ;
border - spacing : 0;
color : #4a 4a4d;
font : 1 4 px /1 .4 " Helvetica Neue ", Helvetica , Arial , sans - serif ;
}
th ,
td {

9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

padding : 10 px 15 px ;
vertical - align : middle ;

}
thead {
background : #395 870;
background : linear - gradient (#497 08f, #293f 50);
color : # fff ;
font - size : 1 1 px ;
text - transform : uppercase ;
}
th : first - child {
border - top - left - radius : 5 px ;
text - align : left ;
}
th : last - child {
border - top - right - radius : 5 px ;
}
tbody tr : nth - child ( even ) {
background : #f0f 0f2;
}
td {
border - bottom : 1 px solid # cecfd 5;
border - right : 1 px solid # cecfd 5;
}
td : first - child {
border - left : 1 px solid # cecfd 5;
}
.book - title {
color : #39 5870;
display : block ;
}
.text - offset {
color : #7c 7c80;
font - size : 12 px ;
}
.item - stock ,
.item - qty {
text - align : center ;
}
.item - price {
text - align : right ;
}
.item - multiple {
display : block ;
}
tfoot {
text - align : right ;
}
tfoot tr : last - child {
background : #f0f 0f2;
color : #39 5870;
font - weight : bold ;
}
tfoot tr : last - child td : first - child {
border - bottom - left - radius : 5 px ;
}
tfoot tr : last - child td : last - child {
border - bottom - right - radius : 5 px ;
}

</pre><hr>Source Exif Data: <br /><pre>File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.5
Linearized                      : No
Page Count                      : 44
Page Mode                       : UseOutlines
Author                          : 
Title                           : 
Subject                         : 
Creator                         : LaTeX with hyperref package
Producer                        : pdfTeX-1.40.18
Create Date                     : 2018:11:25 07:38:26-08:00
Modify Date                     : 2018:11:25 07:38:26-08:00
Trapped                         : False
PTEX Fullbanner                 : This is pdfTeX, Version 3.14159265-2.6-1.40.18 (TeX Live 2017/Debian) kpathsea version 6.2.3
</pre>
<small>EXIF Metadata provided by <a href="https://exif.tools/">EXIF.tools</a></small>

<div id="ezoic-pub-ad-placeholder-110">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- usermanual link ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0545639743190253"
     data-ad-slot="6172135303"
     data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
				<div id="catlinks" class="catlinks catlinks-allhidden" data-mw="interface"></div>				<div class="visualClear"></div>
							</div>
		</div>
		<div id="mw-navigation">
			<h2>Navigation menu</h2>

			<div id="mw-head">
									<div id="p-personal" role="navigation" class="" aria-labelledby="p-personal-label">
                                                 <!--                              <div id="p-search" role="search">

                                                <form action="https://usermanual.wiki/search.php" id="searchform">
                                                        <div id="simpleSearch">
                                                        <input type="search" name="search" placeholder="Search UserManual.wiki" title="Search UserManual.wiki [ctrl-option-f]" accesskey="f" id="searchInput" tabindex="1" autocomplete="off"><input type="hidden" value="Special:Search" name="title"><input type="submit" name="go" value="Go" title="Find a User Manual" id="searchButton" class="searchButton">                                                 </div>
                                                </form>
                                        </div>-->
                                                <ul>
<li id="pt-mycontris"><a href="https://usermanual.wiki/upload" title="Upload User Manual" accesskey="y">Upload a User Manual</a></li>
</ul>
					</div>
									<div id="left-navigation">
										<div id="p-namespaces" role="navigation" class="vectorTabs" aria-labelledby="p-namespaces-label">
						<h3 id="p-namespaces-label">Versions of this User Manual:</h3>
						<ul>
 <li id="ca-nstab-main"><span><a href="https://usermanual.wiki/Document/nodemanualtemplate.1609703361" title="User Manual Wiki" accesskey="c">Wiki Guide</a></span></li> <li id="ca-nstab-main"><span><a href="https://usermanual.wiki/Document/nodemanualtemplate.1609703361/html" title="HTML" accesskey="c">HTML</a></span></li> <li id="ca-nstab-main"><span><a href="https://usermanual.wiki/Document/nodemanualtemplate.1609703361/amp" title="Mobile AMP" accesskey="c">Mobile</a></span></li> <li id="ca-nstab-main" class="selected" ><span><a href="https://usermanual.wiki/Document/nodemanualtemplate.1609703361/help" title="Discussion / FAQ / Help" accesskey="c">Download & Help</a></span></li>
													</ul>
					</div>
									</div>
				<div id="right-navigation">
										<div id="p-views" role="navigation" class="vectorTabs" aria-labelledby="p-views-label">
						<h3 id="p-views-label">Views</h3>
						<ul>
													
		<li id="ca-view"><span><a href="#">User Manual</a></span></li>

                                                                                                                        <li  class="selected"  id="ca-edit"><span><a href="https://usermanual.wiki/Document/nodemanualtemplate.1609703361/help" title="Ask a question" accesskey="e">Discussion / Help</a></span></li>

													</ul>
					</div>
									</div>
			</div>
			<div id="mw-panel">
				<div id="p-logo" role="banner"><a class="mw-wiki-logo" href="https://usermanual.wiki/Main_Page" title="Visit the main page"></a></div>
						<div class="portal" role="navigation" id="p-navigation" aria-labelledby="p-navigation-label">
			<h3 id="p-navigation-label">Navigation</h3>

		</div>
			<div class="portal" role="navigation" id="p-tb" aria-labelledby="p-tb-label">


		</div>
				</div>
		</div>
		<div id="footer" role="contentinfo">
							<ul id="footer-info">
											<li id="footer-info-lastmod">© 2024 UserManual.wiki</li>
									</ul>
							<ul id="footer-places">
											<li id="footer-places-privacy"><a href="https://usermanual.wiki/ContactUs" title="UserManual.wiki:Contact Us">Contact Us</a></li>
											<li id="footer-places-about"><a href="https://usermanual.wiki/DMCA" title="UserManual.wiki:DMCA">DMCA</a></li>
									</ul>
										<ul id="footer-icons" class="noprint">
											<li id="footer-poweredbyico">

</li>
									</ul>

		</div>

</div></body></html>
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="89e28610f1bc151c38635d7f-|49" defer></script>
Node Manual

Hello World

through

.

Heading

Heading

Heading

Heading

Heading

Heading Paragraphs Level Level Level Level Level Level 1
