CDEV

DBAV

Web UI/UX
Week 02.

SOFTWARE CLUSTER
[ CDEV • Coding and Development Project] [ DBAV • Database Applicati on Development ]
Objectives

• Describe how fonts are set in web pages using CSS;

• Describe how to set margins and paddings in web pages using CSS;
• Demonstrate how to create responsive web design by using HTML
and CSS.

TEMASEK POLYTECHNIC I School of Informati cs & IT 2

Tools Required

• Visual Studio Code

• Node.js
• Browser
• Google Chrome (recommended)
• Mozilla Firefox

TEMASEK POLYTECHNIC I School of Informati cs & IT 3

CSS: WORKING WITH FONTS

4
Types of Fonts

System Fonts
• Pre-installed fonts found in many Operating Systems.
• Use by browsers by default.

Web Fonts
• Non-system fonts that can be downloaded from the
web.
TEMASEK POLYTECHNIC I School of Informati cs & IT 5
System Fonts

Serif Sans-serif Monospace Cursive

Comic
Times Arial Courier
Sans

Times New Courier

Helvetica
Roman New

Georgia Verdana Monaco

Geneva

TEMASEK POLYTECHNIC I School of Informati cs & IT 6

Requesting System Fonts

h1 {
font-family: Arial, Helvetica, Verdana, sans-serif;
}

First choice. Second choice. Third choice. Fourth choice.

TEMASEK POLYTECHNIC I School of Informati cs & IT 7

Web Fonts

Web fonts refer to the technique of having browser

download and install fonts requested in the page’s styles,
using the @font-face syntax.

TEMASEK POLYTECHNIC I School of Informati cs & IT 8

Requesting Web Fonts

Font name.

@font-face {
font-family: ’DeliciousRoman’;
src: url(’http://www.fontface.com/fonts/delicious/Delicious-Roman.otf’);
font-weight: 400;
}
Font path/URL.

h1 {
font-family: DeliciousRoman, Helvetica, Verdana, sans-serif;
}

TEMASEK POLYTECHNIC I School of Informati cs & IT 9

CSS Font Families

Generic Family Font Family Description

Serif Times New Roman Serif fonts have small lines at the ends on some
Georgia characters

Sans-serif Arial "Sans" means without - these fonts do not have the
Verdana lines at the ends of characters

Monospace Courier New All monospace characters have the same width
Lucida Console

TEMASEK POLYTECHNIC I School of Informati cs & IT 10

Font Family

TEMASEK POLYTECHNIC I School of Informati cs & IT 11

Font Style

Source Output

oblique is less supported.

TEMASEK POLYTECHNIC I School of Informati cs & IT 12

Font Size with Pixels

Source Output

TEMASEK POLYTECHNIC I School of Informati cs & IT 13

Font Size with Em
Assuming browser default font size
is set to 16.
Source Output

TEMASEK POLYTECHNIC I School of Informati cs & IT 14

Font Size with Percent and Em

Source Output

15
TEMASEK POLYTECHNIC I School of Informati cs & IT
Fixed Units vs. Relative Units

• Fixed units are displayed at the requested size, regardless of device or context.
• E.g. px
• Relative units are displayed relative to the environment in which they are found.
• E.g. em

TEMASEK POLYTECHNIC I School of Informati cs & IT 16

Font-Weight

Source Output

17
TEMASEK POLYTECHNIC I School of Informati cs & IT
Font-Variant

Source Output

18
TEMASEK POLYTECHNIC I School of Informati cs & IT
Text Formatting

• To learn more about CSS font and text formatting, check out the link
below:
• http://www.w3schools.com/css/css_text.asp

TEMASEK POLYTECHNIC I School of Informati cs & IT 19

CSS: MARGINS AND PADDING

20
The Box Model

TEMASEK POLYTECHNIC I School of Informati cs & IT 21

Margins

• The CSS margin properties are used to generate space around

elements.
• The margin properties set the size of the white space OUTSIDE the
border.
• The margins are completely transparent - and cannot have a
background color!

TEMASEK POLYTECHNIC I School of Informati cs & IT 22

Margins: Individual Properties

Source Output

23
TEMASEK POLYTECHNIC I School of Informati cs & IT
Margins: Inherit

Source Output

TEMASEK POLYTECHNIC I School of Informati cs & IT 24

Margins: Auto

Source Output

25
TEMASEK POLYTECHNIC I School of Informati cs & IT
Padding

• The CSS padding properties are used to generate space around

content.
• The padding properties set the size of the white space between the
element content and the element border.
• The padding is affected by the background color of the element!

TEMASEK POLYTECHNIC I School of Informati cs & IT 26

Padding: Individual Sides

Source Output

TEMASEK POLYTECHNIC I School of Informati cs & IT 27

Width and Height

TEMASEK POLYTECHNIC I School of Informati cs & IT 28

Setting Height and Width

Source Output

TEMASEK POLYTECHNIC I School of Informati cs & IT 29

BASIC CSS LAYOUT CONCEPTS

30
Content Regions

TEMASEK POLYTECHNIC I School of Informati cs & IT 31

Content Regions: Before HTML5

TEMASEK POLYTECHNIC I School of Informati cs & IT 32

Content Regions: Using HTML5

TEMASEK POLYTECHNIC I School of Informati cs & IT 33

Creating Initial Page Elements

TEMASEK POLYTECHNIC I School of Informati cs & IT 34

Adding Header

TEMASEK POLYTECHNIC I School of Informati cs & IT 35

Adding Navigation

TEMASEK POLYTECHNIC I School of Informati cs & IT 36

Adding Sidebar and Content

TEMASEK POLYTECHNIC I School of Informati cs & IT 37

Adding Footer

TEMASEK POLYTECHNIC I School of Informati cs & IT 38

Example

TEMASEK POLYTECHNIC I School of Informati cs & IT 39

Example: Navigation

TEMASEK POLYTECHNIC I School of Informati cs & IT 40

Example: Header Images

TEMASEK POLYTECHNIC I School of Informati cs & IT 41

The End