CSS Text

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Text

CSS offers many properties for formatting text.

HTML
				
					<div>
  <h1>text formatting</h1>
  <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
  The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
  <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>
CSS
				
					div {
  border: 1px solid gray;
  padding: 8px;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
}

p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 3px;
}

a {
  text-decoration: none;
  color: #008CBA;
}

Output

text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.

Text Color & Background Color

The color property set the color of the text. The color is defined by:

  • a color name – like “red”
  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”

The default text color for a page is specifieds in the body selector.

HTML
				
					<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>
<p>Another tag.</p>
CSS
				
					body {
  color: black;
  background:pink;
}

h1 {
  color: #03989E;
}

Output