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: 17^th 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 »