Beginner’s guide to styling text with CSS

Рет қаралды 35,268

Күн бұрын

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 KZfaq 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!

Пікірлер: 64

@KevinPowell 10 ай бұрын

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 10 ай бұрын

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.

@NovaKirsch 10 ай бұрын

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

@haythamkenway1561 10 ай бұрын

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 ❤

@Tiger1AuasfE 10 ай бұрын

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

@user-rd3kj3ij7w 10 ай бұрын

That's a good idea bro.

@sheilamote594 9 ай бұрын

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

@efremmallach6501 10 ай бұрын

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 10 ай бұрын

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

@outpost31737 10 ай бұрын

Another excellent video! Thanks Kevin.

@wranther 7 ай бұрын

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...

@andrewrea2799 5 ай бұрын

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. 🎉

@piltover5205 8 ай бұрын

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

@miguelbezerra5848 4 ай бұрын

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

@kirsh0257 6 ай бұрын

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

@pasaulusvitautus9643 10 ай бұрын

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

@lukas.webdev 10 ай бұрын

Great Video & congrats on 800K! 🥳

@KevinPowell 10 ай бұрын

Thanks!

@seyisonade1194 7 ай бұрын

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

@iCeTainment 10 ай бұрын

Great video 🙌

@tanws8 10 ай бұрын

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 10 ай бұрын

Astro has a great solution tk this which is Image component

@tanws8 10 ай бұрын

@@kizigamer6895 do you have a link to it?

@KevinPowell 10 ай бұрын

Thank you so much!

@KevinPowell 10 ай бұрын

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 10 ай бұрын

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

@hikari1690 10 ай бұрын

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

@re.liable 10 ай бұрын

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

@younaspa1058 10 ай бұрын

Thanks :)

@JaGaNezhil 10 ай бұрын

frontend master 🙏🏼

@ediciones.tedeboldo 4 ай бұрын

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....

@LauriePoulter 7 ай бұрын

@kevinPowell Have you done a video on antialiased fonts?

@ElementoryMyDearWatson 10 ай бұрын

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 10 ай бұрын

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 🤷

@RawkHawkRockin 2 ай бұрын

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?

@CRBarchager 9 ай бұрын

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?

@proudyy 10 ай бұрын

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 🙏😊

@benw9949 9 ай бұрын

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 9 ай бұрын

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.

@necmettinb 10 ай бұрын

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

@Nala-Potter 10 ай бұрын

🎉🎉🎉🎉

@bronzekoala9141 10 ай бұрын

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 10 ай бұрын

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

@sharkinahat 10 ай бұрын

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.

@jnsdotgg 10 ай бұрын

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

@kizigamer6895 10 ай бұрын

Yes I think both are interchangeable

@RayAndrewsDev 9 ай бұрын

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

@rhyanvking4877 10 ай бұрын

EYYYY HELLOO

@tryoxiss 10 ай бұрын

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

@DmitriiBaranov-ib3kf 10 ай бұрын

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

@KevinPowell 10 ай бұрын

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 10 ай бұрын

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 10 ай бұрын

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 9 ай бұрын

@@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.

@harikrishnanpandyan5684 10 ай бұрын

Please make a video about animation ...

@KevinPowell 10 ай бұрын

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 10 ай бұрын

@@KevinPowell❤❤❤