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: kzread.info/head/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

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!

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

Excellent video. Easy to comprehend.

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

2 жыл бұрын

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

@ahmad-murery

2 жыл бұрын

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

Thank you, Dave

Great video!

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

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 🙏

Thank you so much professor

Fantastic Dave thank you!

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome, Kevin!

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

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Thank you 👍🏾

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.

Great explanation. Thank you

@DaveGrayTeachesCode

Жыл бұрын

Glad it was helpful!

Thanks Dave

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 🙏

Thanks a lot sir

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Done! :)

you are awesome my friend;) keep going

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! 💯

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

im waiting for CSS full tutorial🔥

@DaveGrayTeachesCode

2 жыл бұрын

It is in the works 🚀🚀

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

2 жыл бұрын

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: kzread.info/dash/bejne/qoWX0rOfddjTgdo.html

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

2 жыл бұрын

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

2 жыл бұрын

@@DaveGrayTeachesCode I do too

@Valdaur

2 жыл бұрын

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

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

@DaveGrayTeachesCode

Жыл бұрын

Yes, that works well.

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

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

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

2 жыл бұрын

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

@Valdaur

2 жыл бұрын

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

Yeah, I found my new virtual friend

Please David make videos about reactJS real small projects

@DaveGrayTeachesCode

2 жыл бұрын

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

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

2 жыл бұрын

Good suggestions! I do have a React Login series that starts with creating an accessible React form and uses no additional libraries: kzread.info/dash/bejne/lKaXqq1sgJmpmLQ.html 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: kzread.info/dash/bejne/mGZ506d8mbeofJs.html

@regilearn2138

2 жыл бұрын

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

2 жыл бұрын

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

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.

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

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Matin! 🙏