Beginner’s guide to styling text with CSS

Get my Essential Font Properties Cheat Sheet for a quick reference to the different properties and values I talk about in this video: kevin-powell.ck.page/d3dcf0ac84
When we first start learning about CSS, one of the first things we learn is that we can style our text with properties like font-family and color. Quickly, though, we’re bombarded with more and more text related properties, so in this video, I take a look at the essential ones that you need to know early on, as well as talk about some of the units and values related to them.
🔗 Links
✅ External style sheets and selector basics: • HTML & CSS for Beginne...
✅ google fonts: • Self-hosting fonts exp...
kevinpowell.co/courses?...
⌚ Timestamps
00:00 - Introduction
00:45 - What we’re starting with
01:15 - You don’t need to memorize these
01:35 - Inheritance
03:30 - font-family
06:12 - font-size
08:56 - font-weight
11:50 - font-style
13:25 - cheat sheet
13:40 - color
14:50 - getting more specific and using our dev tools
17:43 - line-height
20:10 - text-align
21:50 - text-transform
23:30 - text-decoration
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@KevinPowell]

You can get the cheat sheet with all of these properties, including some of the values and units you can use for them here: kevin-powell.ck.page/d3dcf0ac84

[@IrwineDuncan]

Even if you have been coding for a while, it is always good to brush up on the basics. Think of it like, putting oil in a car. Well done.

[@haythamkenway1561]

wow. it was like yesterday. I've been huge fan of your contents for 3 years. great as always. you helped me a lot, thanks ❤

[@NovaKirsch]

CONGRATS on the 800K subscribers. WELL DONE and WELL DESERVED!

[@sheilamote594]

I’m so glad I stumbled upon your videos! They are making my journey so much easier.

[@Tiger1AuasfE]

Although i have experience with CSS for 3 years now, always refreshing to see this again, thnx for the video.

[@user-rd3kj3ij7w]

That's a good idea bro.

[@andrewrea2799]

I dont know how I missed this video. Even though I knew 99% of these concepts your explanation of them was brilliant. You made it really easy to understand. 🎉

[@outpost31737]

Another excellent video! Thanks Kevin.

[@wranther]

Thank you for this enjoyable 25 part series Kevin! Very easy to follow. Topics clearly identified and easy to understand. Clean presentations. Not overly crowded workspaces. Will be looking towards your other video series and stand alone videos to learn and to improve my learning! -Bob...

[@kirsh0257]

Why couldn't I found this channel more earlier... thanks for all the advices and insights.

[@pasaulusvitautus9643]

Great video! If only I could have learned that easily over 25 years ago...

[@miguelbezerra5848]

Thank you for the video! I have been writing CSS for over 2 years and you were the one that finally explained why rem should be used for font-size! It's true I'll have to break the habit of writing it with px, but it makes so much sense that rem should be used instead and why! Great content and it does not matter how experienced you are because you can always learn something from a video that could be for a complete beginner

[@piltover5205]

Amazing videos, you are such a great creator. Very helpful to learn!

[@efremmallach6501]

Very clear; I'm going to recommend it to my students. I'd add that property names that start with "text" do not change the arrangement of pixels that represent a character, but augment them in some other way like moving them to the right margin or giving them an underline, while those that start with "font" all do. I find that to be helpful in organizing one's thoughts about all of these. (It doesn't help with properties that don't start with either of these, like "color," but there aren't a whole lot of those.)

[@KevinPowell]

Yeah, color would have been nice if it was font-color, just for clarity and avoiding when I use it instead of background-color in quick demos and wondering why its not working 😆. Like you said though, luckily it's not a range of different ones

[@lukas.webdev]

Great Video & congrats on 800K! 🥳

[@KevinPowell]

Thanks!

[@seyisonade1194]

Thanks a million sir for your help and value adding contents and tutorials, God bless you...

[@hikari1690]

I've been involved with css for 6 years now. I still feel overwhelemed tbh 🤣

[@iCeTainment]

Great video 🙌

[@tanws8]

can you do a video on how to make an image responsive or how to keep the image quality the same as some pictures on a bigger screen can cause the image to be pixelated

[@kizigamer6895]

Astro has a great solution tk this which is Image component

[@tanws8]

@@kizigamer6895 do you have a link to it?

[@KevinPowell]

Thank you so much!

[@KevinPowell]

If an image gets bigger than its actual dimensions, there is nothing much we can do to help with the quality of it. You need to start with a larger image. If you have an image and make it bigger, it has to fill in the empty parts and it gets blurry or pixelated. You can always downsize a big image, but not vice versa

[@tanws8]

@@KevinPowell is it possible for you to do a video on this?

[@re.liable]

Any opinions on letter spacing? Do you often use it?

[@ediciones.tedeboldo]

hi kevin, love your videos. could you make a video of styling text on a web, to look just like a word document? i want to make a web were i upload only long texts....

[@ElementoryMyDearWatson]

Really helpful kevin many thanks as always. What are your thoughts on changing the root font size to from 16px to 62.5% thus making 1 rem = 10 px? I find it a lot easier to calculate font sizes eg 24px = 2.4 rem etc

[@KevinPowell]

There are a few edge cases that it can cause problems for, including some 3rd party stuff. It isn't that hard to work in base 16 once you get used to it 🤷

[@proudyy]

Hey Kevin, first of all: great guideline for beginners! Which are the best fonts to use as a front end dev? Can you do a separate video for it? Thanks in advance 🙏😊

[@JaGaNezhil]

frontend master 🙏🏼

[@LauriePoulter]

@kevinPowell Have you done a video on antialiased fonts?

[@younaspa1058]

Thanks :)

[@CRBarchager]

20:25 Never seen that before. The dots didn't move to the right with the text. I guess that's the list-style property but that doesn't have a right. How would to accomblish this?

[@RawkHawkRockin]

So given that the designers want specific font sizes (that are documented in px and not rem), we should just calculate the rem equivalents for each desired font size and code those instead, right?

[@necmettinb]

After everything I've learned from him, I still do not know if he says "my friend and friends" or "my frontend friends".

[@bronzekoala9141]

If you use google-fonts in europe, be sure to read up on the legal requirements set by the DSGVO to do so. Linking external resources without the users consent is legally problematic.

[@KevinPowell]

Yeah, I have a video that looks at hosting Google fonts locally, which isn't hard, and there are options that are gdpr compliant as well

[@benw9949]

I have found almost no browser supports real small caps from within a font (font-variant: small-caps; ) And if there is any way to decimal-justify text in CSS that works I haven't found that either. Decent hyphenation and justification of text just still does not happen on web pages, despite how long we've had browsers. I greatly miss several things I could do in older page layout programs but which are now hard to do in newer ones, and hard or not readily doable in web pages. And several graphics things too. I miss logarithmic gradients, for one, or the old but kludgy way Macromedia Freehand had of faking a blend or gradient of a freeform object for some very cool-looking effects.

[@benw9949]

I have come across a couple of times where something sent by a friend, copied from email and which they had copied from the web and pasted into their email, then copied by me and pasted into a word processor (NeoOffice Writer, a Mac Office suite) -- then had some odd background or page property on either a paragraph or word/char spans or maybe a div-like background, but this then was not something I could change or clear or undo from within the word processor. Not by electing the paragraphs, not by selecting words or character spans. No divs were evident. So I wonder where and how and what was set either on the HTML pasted in, or how it was transformed into the word processor's internal format, that was not getting picked up so I could then change it. Current modern word processors, including the Libre/OpenOffice and NeoOffice suites (based off of Libre or Open) and Microsoft, seem to use something similar to CSS now as a model, yet there are differences that crop up occasionally.

[@Nala-Potter]

🎉🎉🎉🎉

[@rhyanvking4877]

EYYYY HELLOO

[@jnsdotgg]

Isn't the font-weight: 400 value called 'normal' not 'regular'?

[@kizigamer6895]

Yes I think both are interchangeable

[@sharkinahat]

I don't know if it makes senses, but I love type and I hate fonts. Change one thing and suddenly everything is the wrong size.

[@tryoxiss]

Very much not a beginer but I didn't realise that em/rem would actually change, I thought it was always 16px :facepalm:

[@RayAndrewsDev]

I so wish they would add font-color as an alias for color

[@harikrishnanpandyan5684]

Please make a video about animation ...

[@KevinPowell]

I have a few already. Some are on the more basic things, but if you look for videos where I had Amit Sheen join me, we go into pretty advanced stuff :)

[@harikrishnanpandyan5684]

​@@KevinPowell❤❤❤

[@DmitriiBaranov-ib3kf]

I alway was curious why not specify html { font-size: 1px; } body { font-size: 16rem; }

[@KevinPowell]

What's that accomplishing? The main reason we don't change the font-size of html to px is because itll override system settings. If someone wants a bigger font size, let them have it

[@DmitriiBaranov-ib3kf]

This way, we have rems bound to pixels 1:1 instead of 1:16, while respecting user preferences scaling and using rems in a simpler way. Thank you for your great work, I learn a ton from you!

[@DmitriiBaranov-ib3kf]

Or is there a way to change default 16px within the system? I thought default font is always 16px (coming from user agent), and then only user's in-browser scaling kicks in

[@alba4179]

​@@DmitriiBaranov-ib3kfIf you declare `:root{ font-size: 0.5rem;}`, the `1` rem value will be equal to `16px/0.5=8px` on your page. That is, if you use p {font-size: 1rem;}, it'll render as 8px. If you want to make 1rem is equal to 1px on the whole page, you can declare `:root { font-size:0.0625rem; }` (1/16), and it'll be 1rem = 1px on your whole page. However, I don't think it's necessary, you don't need to use it that way.

[@supersmart671]

CSS probably one of the most confusing thing invented in web technologies

[@gortarex6137]

FIRST