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

  • color - color the text
  • text-decoration - decorate the text
  • text-decoration-line - decorate the text using some kind of lines
  • text-decoration-color - color the text-decoration-line
  • text-decoration-style - style the text-decoration-line
  • text-underline-position - define the position of text-decoration-line
  • text-align - align the text horizontally
  • text-align-last - align only the last line of text horizontally
  • text-justify - justify the text whose text-align property is set to justify
  • letter-spacing - define the length of white space between letters/characters
  • word-spacing - define the length of white space between words
  • text-shadow - define/add shadow behind the text
  • text-transform - transform the text to uppercase, lowercase, or capitalize the first letter of each word
  • white-space - handle white space inside an element
  • text-indent - define the indentation (basically the starting position) of first line of text
  • word-wrap - wrap the long word(s) to the new line
  • overflow-wrap - define whether to wrap the overflowed long word to the new line or not
  • word-break - define whether the word should break or not, and in what way the word should break, when overflow the container
  • text-overflow - define how the hidden overflowed content should appear to the user
  • hyphens - create a hyphen before the wrap of a word to the new line
  • direction - define the direction of text
  • unicode-bidi - set whether the text should be overridden or not
  • writing-mode - lay the text horizontally or vertically, along with the direction

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

  • background-color - used to change the background color of specified element
  • font - used to define custom/required font to provide excellent reading experience for the website

CSS Online Test


« Previous Tutorial Next Tutorial »

Follow/Like Us on Facebook




Subscribe Us on YouTube