CSS Text Styling

CSS (Cascading Style Sheets) is a text styling utility that is an important aspect of styling your content on your webpage. It is quite common to use CSS to style collectively as text because CSS allows designers to manipulate text attributes including the font, color, text size, alignment, spacing and more. In this essay, I will reveal how you can effectively utilize CSS to style yourtext.

font-family: Choosing the Right Font

The font-family are not just words, but a critical part of your design.The font-family property specifies the font type for the text on the webpage. The font-family property can be assigned a typeface font, or a font stack of types with a back-up font in case the first font you included is not available.


          h1 {
               font-family: Arial, sans-serif ;
          }

This example also states the font-family that will applied to render the text for an h1 element, which is the font-family Arial.

font-size :Making Text Larger

The font-size property sets the size of the text. It can be specified in various measurement units px, em, rem, and %. 


           p {
               font-size: 16px ;
           }

This makes the letter size for any text inside the p element 16 pixels tall. For relative size you could use em or rem instead of fixed pixel values.

font-weight: Making Text Bold

The font-weightproperty adjusts the thickness of the text. You can choose for the text to bold, light, or anywhere in between using keyword values or numeric (100-900) values.


          strong {
                    font-weight: bold ;
          }

This example also shows that in the strong element, the text will be rendered in a bold type. You can also use numeric amounts get another weight in a bold type, for example, font-weight: 700; in order to achieve a heavy value font-weight.

font-style: Italicizing Text

If you want to give text an italic style, you can use the font-style property. 


          em {
                font-style: italic ;
          }

The em element, which is commonly used for an indication of emphasis on the text as well, will be rendered in italics, due to the CSS property.

line-height: Adjusting Line Spacing

The line-height property specifies the amount of space between text lines.


          p {
              line-height: 1.5 ;
          }

In this usage, we are adding more lines to a paragraph, which increases line-height so the text is more legible. You can specify the amount of line-height using a number, like: em, or px.

letter-spacing:setting letter-spacing distance

The letter-spacing property to add space between letters in a word. Letter-spacing effect the legibility of text, and letter-spacing use simply for decoration.


          h2 {
               letter-spacing: 2px ;
          }

In this illustration, the space between characters in h2 headings will be increased by 2 pixels.

text-transform: Changing Case

The text-transform property allows you to change the case of text. You can change all letters to upper-case, lower-case or capitalize the first letter of each word.


          h1 {
               text-transform: uppercase ;
          }

Here, all text in the h1 element will be converted to uppercase.

text-align: Aligning Text

The text-align property defines the horizontal alignment of text inside an element. Text can be aligned to the left, centered, right, or justified it.


          p {
               text-align: center ;
          }

This will center the text alignment of the text inside the p element. To justify all text use text-align: justify;.

color: Changing Text Color

The color color property will change the colors of text. Colors can be specified using names, hex values, RGB, RGBA, HSL, or HSLA.


          p {
                color: #3498db ;
          }

For the colored text, the paragraph will be colored in a shade of blue. The hex value is #3498db.

text-shadow: Adding Shadow to Text

The text-shadow will place a shadow effect on your text separating it from the background.


          h1 {
               text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
          }

The first example has a shadow which is offset both 2px horizontally and vertically, with a blur radius of 5px.

Conclusion: Perfect Your Text Styling with CSS

There are many properties in CSS that enable you to change or style text in whatever manner that you wish. CSS text modifications allow you to do everything from selecting the font, size, and alignment of text, to changing the color of text. You should try and learn all of the CSS font properties to help improve the visual appearance and readability of your website for your users.

As a web developer, learning how to modify the text with CSS will help you create better looking, more professional, design!

Try it Yourself