DevBytes

CSS Text and Font

Devyansh's photo
Devyansh
·

2 min read

CSS Text and Font

Text and its font in CSS is one of the important aspects for developers. There are various styles that can be used in the text as well as fonts.

CSS text: Browser does not define the alignment, transformation and other styles of the text by itself. It has to be defined by the developer to make it appropriate in all browsers.

The list of Style for text available in CSS is as follows:

  1. Text color: It is denoted as (color). This simply changes the color of the text from the default color of black.

  2. Text Alignment: It is denoted as (text-align), This align the text in centre, left or right as well as to justify the text( equal width of all sentences).

  3. Text decoration: It is denoted as (text-decoration). It is used to add some additional patterns to the text such as underline, overline, line-through and overline underline(both). Also, we can add some properties to text decoration such as color, style( dotted, double, wavy and dashed ), and text decoration thickness ( in px).

  4. Test transformation: It is denoted a (text-transform). It is used to make all letters in uppercase, lowercase and normal(default form).

  5. Text spacing: It is used to add spacing between the letters, words, lines and more. Denoted as letter-spacing, word-spacing, line-height( spacing between the lines ), text-indent( left spacing in the first line in terms of px).

CSS Font: CSS also has power to change the font of a text from boring default font in CSS. The Style available in CSS regarding font are as follows:

  1. Font family: To change the font, font-family is used. It consist with generic font family in enclosed double quotation marks such as font-family: Arial, Helvetica, sans-serif;. Here Serif belongs to generic font family.

  2. Font weight: It is used to increase the boldness of the weight from lighter to thiker even in px. Denoted as (font-weight).

Here is the example of Html which includes all the above text and font styles.

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1{
                /* text color */
                color:Green;
                /* text decoration */
                text-decoration-line:underline overline;
                text-decoration-style:dotted;
                text-decoration-thickness:3px;
                /* text alignment */
                text-align:center;
                /* text transformation */
                text-transform:uppercase;
                /* text spacing */
                word-spacing:20px;

                /* fonts */
                font-family: Arial, Helvetica, sans-serif;
                font-weight:lighter;

            }
        </style>
        <title>Font|Text</title>
    </head>
    <body>
        <h1>Devbytes is Here</h1>
    </body>
</html>

formsfontstextHTML5Web Development