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:

► Useful links:

► Social Media:

► Code & Projects:

[Jeevanmn]

Your channel is my go to place for anything CSS. Your clarity is unmatched, please keep posting videos. Thanks.

[fintanpate]

I really mean this when i say that your channel is the best source on the web to learn web development in detail. Your videos have honestly been invaluable in my learning

[Dhinesh_d]

Hi Craig sir, ,,looking eagerly for next lessons in css playlist

[felix_christopher]

Can't press the Like-Button hard enough to express my approval for your content. Well explained and thorough, you're really providing a great resource for learning and brushing up on skills. Thanks, mate, keep it up!

[thirty]

Great format ...wonderful and very understandable presentation.... thank you sir

[danielmadison]

Just found your website. Fantastic. You should have lots more likes. I subscribed and hope you keep doing more.

[TheChiaralyn]

Wonderful! Thank you, beautiful explanation!

[kishore]

Would love to see more on text shadows. Any chance of a longer video on just those with some examples of the kind of shadows you can create?

[marayagaming]

producer's version? I just want to make sure I get the right one for .

[maddiecurry]

Looking forward to the Google Fonts video

[webb-developer]

☑
remaining : line height and letter and word spacing

[mehboobstudiophotography]

Surya Maurya WNice tutorialch is best depends but the easiest to learn is soft in my opinion. Ableton is also easy to learn though and also very

[computermobile]

better place, I want to take tNice tutorials seriously and tryhard my way into tNice tutorials industry. The people who put in the most work are the most