CSS Typography

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Syntax

  • font: [font-style] [font-variant] [font-weight] font-size [/line-height] font-family;
  • font-style: font-style
  • font-variant: font-variant
  • font-weight: font-weight;
  • font-size: font-size;
  • line-height: line-height;
  • font-family: font-family;
  • color: color;
  • quotes: none|string|initial|inherit;
  • font-stretch: font-stretch;
  • text-align: text-align;
  • text-indent: length|initial|inherit;
  • text-overflow: clip|ellipsis|string|initial|inherit;
  • text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
  • text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
  • font-size-adjust: number|none|initial|inherit;
  • font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;
  • hyphens: none | manual | auto;
  • tab-size: number|length|initial|inherit;
  • letter-spacing: normal|length|initial|inherit;
  • word-spacing: normal|length|initial|inherit;

Parameters

ParameterDetails
font-styleitalics or oblique
font-variantnormal or small-caps
font-weightnormal, bold or numeric from 100 to 900.
font-sizeThe font size given in %, px, em, or any other valid CSS measurement
line-heightThe line height given in %, px, em, or any other valid CSS measurement
font-familyThis is for defining the family's name.
colorAny valid CSS color representation, like red, #00FF00, hsl(240, 100%, 50%) etc.
font-stretchWhether or not to use a confenced or expanded face from font. Valid values are normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded or ultra-expanded
text-alignstart, end, left, right, center, justify, match-parent
text-decorationnone, underline, overline, line-through, initial, inherit;

Remarks

  • The text-shadow property is not supported by versions of Internet Explorer less than 10.


Got any CSS Question?