CSS Text and Fonts Tutorial for Beginners - Typography
ฝัง
- เผยแพร่เมื่อ 30 มิ.ย. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this CSS text and fonts tutorial for beginners, you will learn about typography for your web pages. We will cover the most common text and fonts settings in CSS and apply them to an HTML example.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Text and Fonts Tutorial for Beginners - Typography
(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:47) font-size
(03:09) Typography inheritance
(03:58) Changing text color
(04:23) Commenting out code in HTML and CSS
(05:02) text-decoration
(06:34) text-transform
(07:13) text-align
(08:04) text-indent
(08:46) Other text properties to style
(09:14) line-height
(10:25) letter-spacing
(11:21) word-spacing
(12:10) font-weight
(13:47) font-style
(14:22) generic font families
(16:08) font stacks and fallbacks
(18:41) Websafe fonts
(19:05) External fonts
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
📚 Typography Resources:
🔗[MDN: Fundamental Text and Font Styling - developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - www.cssfontstack.com/
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about the CSS Typography for beginners helpful? If so, please share. Let me know your thoughts in the comments.
#css #text #fonts
![[HIGHLIGHT] หมีLIVEปะ? | EP.171 เห็นแต่ในจอ วันนี้มาต้องขอคารวะ](http://i.ytimg.com/vi/gPWLxa0e_Z8/mqdefault.jpg)
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: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
Thanks a lot David, very well-paced and informative.
Excellent video. Easy to comprehend.
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......
Glad I could help!
Hi Dave, Thanks for the Clear and Simple example, some of then are new to me~
You're welcome! 🙏
Thank you, Dave
That's very good content, as always. Thank you!
You're welcome!
Thank you so much professor
Fantastic Dave thank you!
You're welcome, Kevin!
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,
Awesome input here, Ahmad! 💯 Thank you for this valuable info. 🙏🙏
@@DaveGrayTeachesCode Trying to be helpful whenever I can, so thanks for giving me the opportunity 👍
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.
Thank you 👍🏾
Great explanation.
Thank you
Glad it was helpful!
Thanks Dave
You're welcome! 🙏
Thanks a lot sir
You're welcome!
you are awesome my friend;) keep going
Thank you! 💯
Done! :)
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
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 ?
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: th-cam.com/video/xQcpQfEumQw/w-d-xo.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 💖!
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.
@@DaveGrayTeachesCode I do too
The CSS import code looks cleaner, and it's less code so even if it's a miniscule difference it's preferable :)
im waiting for CSS full tutorial🔥
It is in the works 🚀🚀
For comment. we can also use the select the code part we want comment then Press the ctrl +/ .
Yes, that works well.
hey sir inside github typography css code is not visible
could you please check once lesson_6
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?
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
@@DaveGrayTeachesCode Thanks for helping me understand, I greatly appreciate it! :)
On google fonts, why am I not seeing the option to select multiple styles ?
Please David make videos about reactJS real small projects
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.
Good suggestions! I do have a React Login series that starts with creating an accessible React form and uses no additional libraries: th-cam.com/video/brcHK3P6ChQ/w-d-xo.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: th-cam.com/video/f2EqECiTBL8/w-d-xo.html
@@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.
Dave ,we are(our students) eagerly waiting for this video series pls consider
Yeah, I found my new virtual friend
this is my first time learning CSS and it seems to be too overwhelming to remember everything. does anyone else feel this way?
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.
Thank you, Matin! 🙏