Chapter 11. CSS: Styling Text and Images

h1 Font Size

h2 Font Size

h3 Font Size

h4 Font Size

h5 Font Size

h6 Font Size

Paragraph Font Size

Font Size: Parent Font Size 10px (Child Font Size Original)

h1 Font Size

h2 Font Size

h3 Font Size

h4 Font Size

h5 Font Size

h6 Font Size

Paragraph Font Size

Font Size: Parent Font Size 10px (Child Font Size with Different Unit)

h1 Font Size: No Setting

h1 Font Size: 2em

h1 Font Size: 200%

h1 Font Size: 20px

h1 Font Size: 2 rem

Font Color

No color settings

1st layer

2nd layer

3rd layer

4th layer

Change at 1st layer

1st layer

2nd layer

3rd layer

4th layer

Change at 2nd layer

1st layer

2nd layer

3rd layer

4th layer

Change at 3rd layer

1st layer

2nd layer

3rd layer

4th layer

Change at 4th layer

1st layer

2nd layer

3rd layer

4th layer

Font Family

1. Font Family: Original

2. Font Family: Serif

3. Font Family: Roboto

4. Font Family: Roboto, Sans-Serif

5. Font Family: monospace

Font Weight

Font Weight: Original

Font Weight: 100

Font Weight: 200

Font Weight: 300

Font Weight: 400

Font Weight: 500

Font Weight: 600

Font Weight: 700

Font Weight: 800

Font Weight: 900

Font Weight: lighter

Font Weight: bolder

Font Weight: bold

Font Style

Font Weight & Style: 400 Italic (CSS)

Font Weight & Style: 400 Italic (HTML i tag)

Font Weight & Style: 400 Italic (HTML em tag)

Text Decoration

Add standard decoration lines

Text Decoration: Original

Text Decoration: None

Text Decoration: Underliine

Text Decoration: Overline

Text Decoration: Line Through (Strikethrough)

Text Decoration: Underline and Overline

Add design to the decoration line

Text Decoration: Underline

Text Decoration: Underline Wavy

Text Decoration: Underline Wavy Blue

Text Decoration: Underline Wavy Blue 2px

Line Height

Line Height: Original

Line Height: 1 – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Line Height: 1.5 – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Line Height: 2 – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Line Height: 20px – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Line Height: 30px – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Letter Spacing

Line Spacing: Original

Line Spacing: 0rem – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Line Spacing: 0.05rem – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Line Spacing: 0.1rem – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Line Spacing: 0.15rem – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Text Align

Text Align within the Element

Text Align: Original

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

Text Align: Left

Text Align: Right

Text Align: Center

Text Align: Justify

Text Align Relative to the Parent Element

original position

text-align:left

text-align:center

text-align:right

Text Align Inheritance

ABC

Vertical Align

Vertical Align (Small Text)

Vertical Align: Original Original

Vertical Align: Baseline Baseline

Vertical Align: Top Top

Vertical Align: Bottom Bottom

Vertical Align: Middle Middle

Vertical Align: Super Super

Vertical Align: Sub Sub

Vertical Align: 10px 10px

Vertical Align: -10px -10px

Vertical Align (Icons)

Vertical Align: Original

Vertical Align: Baseline

Vertical Align: Top

Vertical Align: Bottom

Vertical Align: Middle

Vertical Align: Super

Vertical Align: Sub

Vertical Align: 10px

Vertical Align: -10px

Vertical Align in Table Cells

header	header	header

vertical-align: top	vertical-align: middle	vertical-align: bottom

Styling Images

Images as an Inline Element

Block Element Example

Inline Element Example Inline Element Example Inline Element Example Inline Element Example Inline Element Example Inline Element Example

Text Align for Image Element

Adding Paddings and Margins to Image

Inline Element

Multiple Images with Paddings and Margins

Inline Element Inline Element Inline Element Inline Element Inline Element Inline Element Inline Element Inline Element

float: left or right

float: left "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

float: right "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Back