Mastering Font Styling with CSS
Explore different font styling techniques in CSS, including color, font families, font sizes, font weights, and font styles. Learn to effectively use CSS properties to enhance the visual appeal and readability of your web content.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
FONTS Styling font with CSS
Font styling: color:font color You just put color, not font-color Example: p { font-family: changes font type Web-safe font families*: Arial Verdana Helvetica Tahoma Trebuchet ms Times new roman Georgia Garamond Courier new Brush script mt *Note: you can embed a font if you want a certain look! We re covering the basics here, not embedding, but I wanted you to know it s an option! color: orange; font-family: brush script mt; }
More font styling: font font- -size size font-size Either use % E.g., 625%; % is percent of the default size Or: xx-small x-small small medium large x-large xx-large smaller Larger h1 { } p { color: navy; font-family: trebuchet ms; font-size: 320%; color: orange; font-size: x-large; font-family: brush script mt; You can also set the px size, but This cannot be resized by user A problem for low vision people Could be an issue on different screen sizes Thus, best to use one of the first 2 methods. }
h1 { Font style style and weight weight color: navy; font-family: arial; font-style: italic; font-weight: 100; Font-style: Italic That s pretty much the only style we use } Also normal (the default) Font-weight: Normal, bold, bolder, Lighter h1 { color: navy; font-family: arial; font-style: normal; font-weight: 800; Also 100-900 (by 100s) 100 is really thin 900 is really thick 400 is normal 700 is bold }
Takeaways: Takeaways: Fonts Fonts Properties: font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet ms, Times new roman, Georgia, Garamond, Courier new,Brush script mt font-size % or xx-small to xx-large Can also do px, but that is absolute and thus the user cannot adjust the font size (so avoid using this!!) font-weight 100-900 or normal, bold, light, bolder font-style italic, normal color All those colors from the previous ppt/video
