css font and text

CSS Font and Text Properties

CSS Font and Text Properties

Today we will discuss CSS Font and Text Properties.The CSS font properties define the font family, boldness, size, and the style of a text.While CSS text properties define the text color, text alignment, text transformation and text decoration.

CSS Font Families:

In CSS, there are two types of font family names:

  • Generic Family – a group of font families with a similar look (like “Serif” or “Sans-Serif”)
  • Font Family – a specific font family (like “Times New Roman” or “Arial”)

Font Family:

The font family of a text is set with the font family property.

The font-family property should hold several font names. If the browser does not support the first font, it tries the next font, and so on.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like: “Times New Roman”.

More than one font family is specified in a comma-separated list:

Font Style:

The font-style property is mostly used to specify italic text.

This property has three values:

  • normal – The text is shown normally
  • italic – The text is shown in italics
  • oblique – The text is “leaning” (oblique is very similar to italic, but less supported)

Font Size:

The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.

Font Weight:

The font-weight property specifies the weight of a font:

Text Color:

The color property is used to set the color of the text.

With CSS, a color is most often specified by:

  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a color name – like “red”

The default text color for a page is defined in the body selector.

Text Alignment:

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

When the text-align property is set to “justify”, each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):

Text Decoration:

The text-decoration property is used to set or remove decorations from text.

The value text-decoration : noneis often used to remove underlines from links:

The other text-decoration values are used to decorate text:

Text Transformation:

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

Previous Lecture Next Lecture

Aizaz Ali


Tutoriallab.net offers tutorials to there visitors on most simple to advance topics to solve web related issue using videos and test posts.