CODESCRACKER

CSS Style Text

This article is created to cover one of the important topic of CSS, that is, styling the text. To provide good user or reading experience, style and/or decorate the text that suits best for your website or web application.

There are a lot of ways, that we can choose to style the text. Some of them are necessary, whereas others are depending on the website UI/UX (User Interface/User Experience) requirement. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p{text-align: center; letter-spacing: 2px; word-spacing: 4px;}
      .del{text-decoration: line-through red;}
      .true{text-decoration: underline green;}
      .green{color: rgb(0, 255, 0);}
   </style>
</head>
<body>
   
   <p>CSS was first released in <span class="true">1996</span>, not in <span class="del">1994</span>.</p>
   <p>The date when CSS was released: <span class="green">17<sup>th</sup> of December</span>.</p>
   
</body>
</html>
Output

CSS was first released in 1996, not in 1994.

The date when CSS was released: 17th of December.

In above example, I've created a line through the text 1994 with red color, to make sure, user who are in hurry, doesn't remember this date as the release date of CSS. Because, sometime due to lack of text decoration, users are not able pay attention to the important information available on the website. Let me create another example.

CSS Style Texts on Web Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{background: chocolate; color: white; padding: 18px 12px;}
      h2{text-align: center; text-shadow: 2px 8px 8px wheat; margin-bottom: 32px;}
      p{line-height: 1.6; font-family: "Lucida Console", "Courier New", monospace;}
   </style>
</head>
<body>
   
   <div>
      <h2>CSS Text Styling</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur
         ratione consectetur, accusamus, nam repellat adipisci amet iste fugit
         officiis sequi unde eius eum nulla magni itaque voluptatem, ullam dolores
         reprehenderit tempore eligendi laudantium molestias voluptates dolorum.</p>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure enim
         autem hic omnis ab! Nisi in impedit cumque!</p>
   </div>
   
</body>
</html>
Output

CSS Text Styling

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur ratione consectetur, accusamus, nam repellat adipisci amet iste fugit officiis sequi unde eius eum nulla magni itaque voluptatem, ullam dolores reprehenderit tempore eligendi laudantium molestias voluptates dolorum.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure enim autem hic omnis ab! Nisi in impedit cumque!

Even you can improve the style used in above example. I don't know about your requirement and like. Therefore, using above example, my purpose is to only show the demo about, how the text can be styled.

One more thing, since there are multiple properties that can be used to style the text, and it will of course becomes a weird idea, if I cover all those properties in single article. Therefore I've created equal number of articles, as of total number of properties, used to style the text, using CSS. List are given below.

List of CSS Properties Used to Style Texts

Note - Some other properties, that can also be used to style the text, are, but not limited to:

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!