CSS Fonts
CSS provides several properties for styling fonts on web pages. Here are some common CSS font properties:
font-family
: This property is used to specify the font family for text on a web page. You can list multiple font families separated by commas, and the browser will use the first available font on the user’s system. For example:
body { font-family: Arial, Helvetica, sans-serif; }
In this example, we’re specifying Arial as the preferred font family, but if it’s not available, the browser will look for Helvetica, and then any sans-serif font.
font-size
: This property is used to specify the font size for text on a web page. You can use various units such as pixels, ems, and percentages. For example:
h1 { font-size: 32px; }
In this example, we’re setting the font size ofh1
elements to 32 pixels.
font-weight
: This property is used to specify the weight (or thickness) of the font. You can use values such asnormal
,bold
, andlighter
, or specify a numeric value such as400
or700
. For example:
h2 { font-weight: bold; }
In this example, we’re setting the font weight ofh2
elements to bold.
font-style
: This property is used to specify the style of the font. You can use values such asnormal
,italic
, andoblique
. For example:
p { font-style: italic; }
In this example, we’re setting the font style ofp
elements to italic.
text-transform
: This property is used to transform the case of text. You can use values such asuppercase
,lowercase
, andcapitalize
. For example:
button { text-transform: uppercase; }
In this example, we’re setting the text transform ofbutton
elements to uppercase.
These are just a few of the many CSS font properties available for styling fonts on web pages.