Scribd
Upload
26 views

Chapter 12 - Formatting Text

This document provides an overview of formatting text using CSS, including specifying fonts, font sizes, colors, and other styles. It discusses setting font families, sizes, weights, and more. Lists various CSS units for font sizes and explains how to use generic fonts and custom web fonts. Also covers adjusting text alignment, indentation, decoration, and other properties.

Uploaded by

ryuu.ducat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Chapter 12 - Formatting Text

This document provides an overview of formatting text using CSS, including specifying fonts, font sizes, colors, and other styles. It discusses setting font families, sizes, weights, and more. Lists various CSS units for font sizes and explains how to use generic fonts and custom web fonts. Also covers adjusting text alignment, indentation, decoration, and other properties.

Uploaded by

ryuu.ducat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Formatting text

Web development I: Front-end engineering


Tips

Specifying fonts is more like merely suggesting them

We don’t really have full control over which font users will see

We should use generic fonts as a fallback


Font Properties

font-family Font name

font-size Font size

font-weight Font weight (boldness)

font-style Font style (italics)

font-variant Font variant (small caps)

font Shorthand declaration


Specifying the font name

● Font names must be capitalized: “Arial” instead of “arial”


○ Exception: generic font families: sans-serif, monospace, etc.

● Use commas to separate multiple font names as fallback cases:


○ p { font-family: Arial, sans-serif; }

● Font names with spaces (e.g. Duru Sans) must appear within quotes:
○ p { font-family: "Duru Sans", Arial, sans-serif; }
Generic font families

Serif (e.g. Times New Roman)

Sans-serif (e.g. Arial)

Monospace (e.g. Courier New)

Cursive (e.g. Comic Sans)

Fantasy (e.g. Impact)


Custom web fonts

@font-face { Many fonts aren't free to use: check license!

font-family: "myFont"; All browsers understand the WOFF format

src: url("myFont.woff2"); WOFF2 supports TrueType and OpenType


fonts
}

html {

font-family: "myFont", serif; Font declaration order is important

}
Specifying the font size

h1 { font-size: 1.5em; } Specific CSS units: em, rem, px, vh, etc.

h1 { font-size: 150%; } Percentages

h1 { font-size: x-large; } Absolute keywords


h1 { font-size: larger; } Relative keywords

Default font size is 16px


CSS units

Absolute: Relative:

px pixels em computed font-size value

pt points ex x-height of the font

pc picas rem root em, set in html element

mm millimeters ch width of the zero (0) letter

cm centimeters vw viewport width, 1% default

in inches vh viewport height, 1% default

vmin viewport min(width,height) size

(only good for print materials) vmax viewport max(width,height) size


Specifying other font styles

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700
| 800 | 900 | inherit

font-style: normal | italic | oblique | inherit

font-variant: normal | small-caps | inherit

Shorthand declaration: style + weight + variant + size/line-height + family


h3 { font: oblique bold small-caps 1.5em/1.8em Verdana, sans-serif; }
Changing text color

p { color: gray; } Color names

p { color: #665544; } Hexadecimal notation (RRGGBB)

p { color: #654; } Shorthand hex notation

p { color: rgb(10,12,56); } RGB decimal notation

p { color: rgba(10,12,56, 0.5); } RGBA decimal notation with transparency

p { color: hsl(265, 23%, 90%); } HSL notation


Text adjustments

line-height: number | length measurement | percentage | normal | inherit

text-indent: length measurement | percentage | inherit

text-align: left | right | center | justify | inherit

text-decoration: none | underline | overline | line-through | blink

text-transform: none | capitalize | lowercase | uppercase | inherit

letter-spacing: length measurement | normal | inherit

word-spacing: length measurement | normal | inherit


Text adjustments

vertical-align: baseline | sub | super | top | text-top | middle |

textbottom | bottom | percentage | length | inherit

white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit

text-direction: ltr | rtl | inherit

text-shadow: ‘horizontal offset’ ‘vertical offset’ ‘blur radius’ ‘color’ | none


List bullets and numbers

list-style-type: none | disc | circle | square | decimal | decimal-leading-zero |


lower-alpha | upper-alpha | lower-latin | upper-latin | lower-roman | upper-roman |
lower-greek | inherit

list-style-position: inside | outside | inherit

list-style-image: url | none | inherit

You might also like