CSS Style Gallery — Activities 6

Activity 6 — CSS Margin

margin-left: 80px

Left margin of 80px.

div { margin-left: 80px; }

margin-right: 80px

Right margin of 80px.

div { margin-right: 80px; }

margin-top: 60px

Top margin of 60px.

div { margin-top: 60px; }

margin-bottom: 30px

First element (30px below)

Element below

div { margin-bottom: 30px; }

margin shorthand

top:10 · right:40 · bottom:20 · left:60

div { margin: 10px 40px 20px 60px; }

Activity 7 — CSS Padding

padding-left: 60px

Left padding of 60px.

div { padding-left: 60px; }

padding-right: 60px

Right padding of 60px.

div { padding-right: 60px; }

padding-top: 40px

Top padding of 40px.

div { padding-top: 40px; }

padding-bottom: 40px

Bottom padding of 40px.

div { padding-bottom: 40px; }

padding shorthand

top:8 · right:30 · bottom:20 · left:50

div { padding: 8px 30px 20px 50px; }

Activity 8 — CSS Outline

outline-style

dotted

dashed

solid

double

groove

p { outline-style: dotted; }
p { outline-style: dashed; }
p { outline-style: solid; }

outline-width

thin

medium

thick

6px

p { outline-width: thin; }
p { outline-width: thick; }
p { outline-width: 6px; }

outline-color

red

blue

purple

#ff6600

p { outline-color: red; }
p { outline-color: blue; }
p { outline-color: #9b5de5; }

border + outline

Blue border + Purple outline

div {
  border: 3px solid blue;
  outline: 3px dashed purple;
}

outline shorthand

outline shorthand applied

p { outline: dashed #9b5de5 4px; }

Activity 9 — CSS Table Styling

table border

Name	Course
Daisy	BSIT
Joy	BSCS

table, th, td {
  border: 1px solid #9b5de5;
}

border-spacing: 8px

Name	Grade
Daisy	A
Joy	B

table {
  border-collapse: separate;
  border-spacing: 8px;
}

caption-side: bottom

Table 1: Student Records
Name	Score
Daisy	95
Joy	90

table { caption-side: bottom; }

empty-cells: hide

Name	Score
Daisy	95
Joy

table { empty-cells: hide; }

table-layout: fixed

Name	Description
Daisy Joy	A very long description that gets clipped

table { table-layout: fixed; }

Activity 10 — CSS Dimensions

height: 100px

div { height: 100px; }

min-height: 80px

min-height: 80px — stays at least 80px tall.

div { min-height: 80px; }

max-height: 60px

max-height: 60px — content scrolls if it exceeds this. Extra line. More text here to show overflow behavior in action.

div {
  max-height: 60px;
  overflow: auto;
}

width: 250px

div { width: 250px; }

min-width: 200px

div { min-width: 200px; }

max-width: 260px

max-width: 260px — will not grow beyond 260px.

div { max-width: 260px; }

line-height values

line-height: 0.9
Tight spacing.

line-height: 2.2
Wide spacing.

line-height: 36px
Fixed px spacing.

p { line-height: 0.9; }
p { line-height: 2.2; }
p { line-height: 36px; }