How to style text using CSS

problem

You wish to style text on your webpage and make it look as follows:

Bold

Italic

Underlined
strikethrough

SOLUTION

Using CSS rules; declarations with basic selectors. For example, we have a paragraph tag <p> (selector) with text and we want to style it (declaration). The paragraph is as follows:

style_text.html

				
					<p>
	This is a sample paragraph text. It will be styled according to CSS declarations
</p>

output

Making text bold with CSS

Now, let’s add some CSS declarations inside the <head> tag using the <style> tag. The CSS code will select the paragraph tag(s) and set its text to bold with the font-weight declaration.

For example:

style_text.html

				
					<head>
    <style>
        p{
              font-weight: bold;
        };
    </style>
</head>

output

Complete code:

style_text.html

				
					<html DOCTYPE!>
    <head>
        <style>
            p{
                  font-weight: bold;
            };
        </style>
    </head>

    <body>
        <p>
                This is a sample paragraph text. It will be styled according to CSS declarations
        </p>
    </body>
</html>

Making text italic

All we have to do is to use the CSS property font-style as follows:

style_text.html

				
					<style>
    p{
          font-style: italic;
    };
</style>

output

Making text underlined

For underlining text, we use the CSS property text-decoration as follows:

style_text.html

				
					<style>
    p{
          text-decoration: underline;
    };
</style>

output

Making text underlined

For making text strikethrough, we use the same CSS property as above:

style_text.html

				
					<style>
    p{
          text-decoration: line-through;
    };
</style>

output

conclusion

In this post we saw how to use CSS properties like the text-decoration, font-style and font-weight to format text in a paragraph to bold, italic, strikethrough or italic.

References:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-decoration

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-style

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-weight

Share it!

Picture of Ellion

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

Tagged formatting HTML, user-input