CSS Text and Fonts Tutorial for Beginners - Typography

[@DaveGrayTeachesCode]

Text makes up a huge amount of the content on the web, and the presentation of text and fonts is what Typography is all about. In this tutorial, we'll cover the most common text and font settings in CSS and apply them to an HTML example so you can see the changes. If you are just starting with CSS, I recommend going to the beginning of this CSS for Beginners playlist: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

[@vijaybalaji7403]

hi there Dave, 6 Months back i spent some around 500$ on web dev course and I felt worse of being not satisfied with them, It seems they want to complete the course without our concern whether we understand these concepts or not, I felt took wrong decision, wasted Time and money on them But here You are A Life saver......

[@DaveGrayTeachesCode]

Glad I could help!

[@webb-developer]

text decoration and transform, decoration , align : done! font all done remaining : a lot ☑ important : font in button and form aren't inhereted at 3:09

[@ahmad-murery]

One more thing about fonts is that some fonts may support multiple character-sets (English, Arabic, symbols... for example) while some others don't, so, for multi-lingual dynamic websites it becomes hard to distinguish where a specific language is used so we can set the proper font properties, the good thing is that we can use the @font-face css rule to create custom fonts by merging unicode ranges from multiple font files, Thanks Dave,

[@DaveGrayTeachesCode]

Awesome input here, Ahmad! 💯 Thank you for this valuable info. 🙏🙏

[@ahmad-murery]

@@DaveGrayTeachesCode Trying to be helpful whenever I can, so thanks for giving me the opportunity 👍

[@pooyannajafi]

Thanks a lot David, very well-paced and informative.

[@phionaaladina]

Excellent video. Easy to comprehend.

[@shawnlee5956]

Hi Dave, Thanks for the Clear and Simple example, some of then are new to me~

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@prathaps1]

Hi Grey, am from INDIA Heartful thanks for this session and all videos. I am learning every sessions. Bigg salute to you my best teacher.

[@napoleon3242]

Hi Dave, can you give the list of extenstions you are using? What is the specific extension that allows for yellow dashed lines to show matching comment tags on 4:36 ?

[@DaveGrayTeachesCode]

I think the specific extension you are asking about is Bracket Pair Colorizer 2. I am currently using the Github theme also. I made one video for recommended extensions but I should do another one this year: kzbin.info/www/bejne/roLGoYScetqgh9k

[@letuslearnmore]

Great explanation. Thank you

[@DaveGrayTeachesCode]

Glad it was helpful!

[@TravinskiyVladislav]

Thank you, Dave

[@GabrielSouza-yy2rq]

That's very good content, as always. Thank you!

[@DaveGrayTeachesCode]

You're welcome!

[@SarrahRoseMikhailLeung]

Great video!

[@yavuzselimoksuz6795]

Thank you so much professor

[@mytechnotalent]

Fantastic Dave thank you!

[@DaveGrayTeachesCode]

You're welcome, Kevin!

[@Adnan-h7t6y]

For comment. we can also use the select the code part we want comment then Press the ctrl +/ .

[@DaveGrayTeachesCode]

Yes, that works well.

[@hiwayshoes]

Hi Dave, great tutorial as usual! Just a question about Google Fonts, is it preferable to link the font in the HTML or import the font through CSS? I’ve looked through Google Font docs and I can’t seem to find any reason from them one way or the other. Is there some kind of performance value involved? It’s always seemed strange to me, but I’m still learning -ha! Anyhow, thanks for all you do, and you have a great day, too… Cheers 💖!

[@DaveGrayTeachesCode]

You can do either. I think any performance impact is so small that I've never seen it discussed. I prefer adding it with the CSS import.

[@Knards]

@@DaveGrayTeachesCode I do too

[@IG7799-c4u]

The CSS import code looks cleaner, and it's less code so even if it's a miniscule difference it's preferable :)

[@omkar1307]

hey sir inside github typography css code is not visible could you please check once lesson_6

[@mehdizarei6305]

im waiting for CSS full tutorial🔥

[@DaveGrayTeachesCode]

It is in the works 🚀🚀

[@NathanMoses99]

Thank you 👍🏾

[@sushantkunkekar2155]

Thanks Dave

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@mehdizarei6305]

you are awesome my friend;) keep going

[@DaveGrayTeachesCode]

Thank you! 💯

[@khoka22]

Thanks a lot sir

[@DaveGrayTeachesCode]

You're welcome!

[@kaberanshutisamuel1856]

On google fonts, why am I not seeing the option to select multiple styles ?

[@louiidelosreyes742]

Done! :)

[@IG7799-c4u]

This isn't really referencing the topic of this video, but at the start when you used padding on the body with percentages, where is it getting that padding size from? Since the body is the parent element of everything else. Is it just the percentage of the size of the body itself?

[@DaveGrayTeachesCode]

Good thoughtful question IG. Yes, the body element is a block element and has no container parent limiting its size. Therefore, it has 100% width of the page. The 10% references the width of the body. More specifically, MDN helps with this definition: "The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode) of the containing block." developer.mozilla.org/en-US/docs/Web/CSS/padding

[@IG7799-c4u]

@@DaveGrayTeachesCode Thanks for helping me understand, I greatly appreciate it! :)

[@ecomadvisor.]

How about custom fonts

[@biggybig358]

Yeah, I found my new virtual friend

[@regilearn2138]

Hi , thanks for all the support for react /javascript developers, my request is please do a react video how to use* All the FORM components like radio btn, select box,Checkbox,input, ,calendar etc,and group of those elements* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***,bcz it will give the clear idea before moving in to formik or any other libruary,i would appreciate if u can use Mongodb for this.I know u will help on this.

[@DaveGrayTeachesCode]

Good suggestions! I do have a React Login series that starts with creating an accessible React form and uses no additional libraries: kzbin.info/www/bejne/mKPGeX5phZt2nrM This same series connects to the backend REST API built in my Node JS for Beginners course and that REST API is connected to MongoDB. All of the details on using MongoDB are in the Node JS course: kzbin.info/www/bejne/nGOoonh5nrl1gpo

[@regilearn2138]

@@DaveGrayTeachesCode yes i agree Dave, actually my requirement is how to use react with hooks for radio btn,select box and calendar components(biggest problems with date and time) and how group of them work and file upload kind of **advanced form control **,which we use in actual real world project,so if you an please do a video how these advanced form controls use(other than input text email password) how to enter those values and how to retrieve those values using react and hooks without any 3rt party library(without formik/react hook form etc).its basically master every FORM controls with pure react and hooks(bcz i beleve someone/developer know how those form control work you know how to debug your code when its comes to critical situation). So pls do a series for these, currently there are no proper series for this in you tube. appreciate your support on these,so it will bring catered knowledge in to on series.

[@regilearn2138]

Dave ,we are(our students) eagerly waiting for this video series pls consider

[@younow3353]

Please David make videos about reactJS real small projects

[@DaveGrayTeachesCode]

I will continue to make React tutorials 💯 Thanks for the request!

[@DevikaM28]

this is my first time learning CSS and it seems to be too overwhelming to remember everything. does anyone else feel this way?

[@andromilk2634]

I don't think you're supposed to remember everything...You can always just look up stuff online.

[@matinsasan]

Congratulations on posting a video on freeCodeCamp. I hope that attracts you a lot of viewers to your channel.

[@DaveGrayTeachesCode]

Thank you, Matin! 🙏