Mastering Font Styling with CSS

undefined
FONTS
Styling font with CSS
Font styling:
color
:font color
You just put color, not font-color
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!
Example:
p { 
 
 
color: orange;
 
font-family: brush script mt;
}
More font styling:
font-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
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 {
 
color: navy;
 
font-family: trebuchet ms;
 
font-size: 320%;
}
p { 
 
 
color: orange;
 
font-size: x-large;
 
font-family: brush script mt;
}
Font 
style
 and 
weight
Font-style:
Italic
That’s pretty much the only style we use
Also normal (the default)
Font-weight:
Normal,
 bold,
bolder,
Lighter
Also 100-900 (by 100s)
100 is really thin
900 is really thick
400 is normal
700 is bold
h1 { 
 
 
color: navy;
 
font-family: arial;
 
font-style: italic;
 
font-weight: 100;
}
h1 { 
 
 
color: navy;
 
font-family: arial;
 
font-style: normal;
 
font-weight: 800;
}
Takeaways:
 
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
Slide Note
Embed
Share

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.


Uploaded on Nov 18, 2024 | 0 Views


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


  1. FONTS Styling font with CSS

  2. 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; }

  3. 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. }

  4. 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 }

  5. 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

More Related Content

giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#