CSS Text & Font Fundamentals

► One of the most common things you will do with CSS is work with text.

The CSS properties we use to style text fall into one of two categories. These are Font Styles and Text Layout Styles.

The Font style category concerns properties that affect a text's font. These include the font family that is applied, the font size and weight, and so on.

Text layout styles affect the layout features of the text. Including how the text aligns within the content box, the space between letters, and the height of each line of text.

In this video we’ll learn how to select font families, style text, align it on the page, and much more. We will cover:

Generic and web-safe fonts
Setting a font family
Adjusting font size, weight, and style. 
Text alignment
Text casing with the text-transform property
Underlines and overlines
Text shadows
Line-height
Letter and word spacing

► Timestamps:
0:00 Start
1:00 The two categories of text styles
1:38 Font families
2:20 Generic fonts & font stacks
7:32 Font size
10:22 Font weight
12:46 Font style
13:46 Text casing with the text-transform property
14:21 Underlines and overlines with the text-decoration property
16:19 Text shadows
18:28 Text alignment
19:24 Line height
20:15 Letter and word spacing
20:48 Summary

► Get the code:
CodePen Start: https://codepen.io/craigabourne/pen/y...
CodePen End: https://codepen.io/craigabourne/pen/a...

► Useful links:
CSS Font Module: https://www.w3.org/TR/2018/REC-css-fo...
CSS Text Module: https://www.w3.org/TR/css-text-3/
Font Family: https://developer.mozilla.org/en-US/d...
CSS Font Stack: https://www.cssfontstack.com/
MDN Font size : https://developer.mozilla.org/en-US/d...
Font Weight: https://developer.mozilla.org/en-US/d...
Font Style: https://developer.mozilla.org/en-US/d...
Text Transform: https://developer.mozilla.org/en-US/d...
Text Decoration: https://developer.mozilla.org/en-US/d...
Text Shadow: https://developer.mozilla.org/en-US/d...
Text-shadow generator: https://www.cssportal.com/css3-text-s...
Text Align: https://developer.mozilla.org/en-US/d...
Line Height: https://developer.mozilla.org/en-US/d...
Letter Spacing: https://developer.mozilla.org/en-US/d...
Word Spacing: https://developer.mozilla.org/en-US/d...

► This video is part of the CSS for Absolute Beginners playlist:    • CSS for Absolute Beginners  

► Social Media:
  / craigabourne  
  / craigabourne  

► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne