CSS Text and Fonts Tutorial for Beginners - Typography

Опубликовано: 08 Март 2022
на канале: Dave Gray

28,273

971

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

In this CSS text and fonts tutorial for beginners, you will learn about typography for your web pages. We will cover the most common text and fonts settings in CSS and apply them to an HTML example.

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
   • CSS Tutorials for Beginners

🔗 All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course

📬 Course Updates ➜ https://courses.davegray.codes/

CSS Text and Fonts Tutorial for Beginners - Typography

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:47) font-size
(03:09) Typography inheritance
(03:58) Changing text color
(04:23) Commenting out code in HTML and CSS
(05:02) text-decoration
(06:34) text-transform
(07:13) text-align
(08:04) text-indent
(08:46) Other text properties to style
(09:14) line-height
(10:25) letter-spacing
(11:21) word-spacing
(12:10) font-weight
(13:47) font-style
(14:22) generic font families
(16:08) font stacks and fallbacks
(18:41) Websafe fonts
(19:05) External fonts

⚙ Web Dev Tools:
🔗 Chrome Browser: https://www.google.com/chrome/
🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/
🔗 Live Server VS Code Extension: https://marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: https://marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: https://marketplace.visualstudio.com/...
🔗 W3C CSS Validator: https://jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: https://specificity.keegan.st/

📚 References:
🔗 MDN CSS: https://developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: https://developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: https://developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: https://developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: https://developer.mozilla.org/en-US/d...

📚 Typography Resources:
🔗[MDN: Fundamental Text and Font Styling - https://developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - https://www.cssfontstack.com/

📚 Color Resources:
🔗 Coolors Contrast Checker: https://coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: https://webaim.org/resources/contrast...
🔗 Coolors Palette Generator: https://coolors.co/
🔗 HTML Color Codes: https://htmlcolorcodes.com/

✅ Follow Me:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray
LinkedIn:   / davidagray
Blog: https://yesdavidgray.com
Reddit:   / daveoneleven

Was this tutorial about the CSS Typography for beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #text #fonts