Beginner’s guide to styling text with CSS

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

[@Tiger1AuasfE]

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

[@Math_Hoffa-m5l]

That's a good idea bro.

[@NovaKirsch]

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

[@AndyMorrisArt]

941k now

[@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 ❤

[@sheilamote594]

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

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

[@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!

[@kirsh0257]

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

[@Adeyeye_seyison]

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

[@AndyMorrisArt]

Thanks to your help I finally finished the two websites I'd been working on forever.

[@patriotkz2308]

Short and informative. Thanks!

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

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

[@Ryder_TechSpot]

I just finished this course, the best I've ever seen. Very practical. Thank you so much ❤️

[@KevinPowell]

I'm glad you enjoyed it!

[@Ryder_TechSpot]

@KevinPowell Where do i go from here. I want to get my hands busy. So what's the next video please. I'm confused of what to watch next.

[@pasaulusvitautus9643]

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

[@piltover5205]

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

[@Ryder_TechSpot]

Youret The best web developer out there I ever saw. I give you credit for that. Thanks😊

[@johnleask7755]

Welcome advice Kevin = and many thanks for the cheat sheet

[@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?

[@hikari1690]

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

[@iCeTainment]

Great video 🙌

[@re.liable]

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

[@JaGaNezhil]

frontend master 🙏🏼

[@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?

[@LauriePoulter]

@kevinPowell Have you done a video on antialiased fonts?

[@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 🤷

[@unus55]

Thanks :)

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

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

[@mukarukundodenyse9119]

❤

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

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

[@tijnjh]

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

[@kizigamer6895]

Yes I think both are interchangeable

[@Nala-Potter]

🎉🎉🎉🎉

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

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

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

[@RayAndrewsDev]

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

[@tryoxiss]

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

[@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❤❤❤

[@rhyanvking4877]

EYYYY HELLOO

[@supersmart671]

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

[@gortarex6137]

FIRST

[@johnd942]

With respect, Kevin, but this presentation is beyond verbose, it is extremely long-winded. You hardly took a ‘breath’. I waited and waited for you to bring the ‘font’ conditions to an end and move on, but you just continued interminably, certainly beyond my patience level. What is the point of telling viewers; “You don’t have to memorised everything, you can Google it!” Then you proceed to options after option with Font attributes with multiple instances of variations!? And you labelled this for 'beginner'!??? On a positive note, I did enjoyed your HTML lessons a lot and subscribed, but with this CSS presentation I had to quit and unsubscribe at the 26 minute mark. Have you hear of K.I.S.S? Research it if ‘no’. It’s great advice for all instructor and teachers.