CSS Text – Tutorials Art

CSS Text and font properties serve to set the appearance of individual characters in a word or line of text. The main problems are unavailable fonts and mapping of (variant) glyphs to character positions.

text inside an element is laid out inside the element’s content box. It starts at the top left of the content area (or the top right, in the case of RTL language content), and flows towards the end of the line. Once it reaches the end, it goes down to the next line and continues, then the next line, until all the content has been placed in the box. Text content effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the <br> element.

CSS Text property

Font styles: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box.

CSS Font property

Font Properties

Property	Description	Values
font	Sets all the font properties in one declaration	font-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar, inherit
font-family	Specifies the font family for text	family-name, generic-family, inherit
font-size	Specifies the font size of text	xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %, inherit
font-style	Specifies the font style for text	normal, italic, oblique, inherit
font-variant	Specifies whether or not a text should be displayed in a small-caps font	normal, small-caps, inherit
font-weight	Specifies the weight of a font	normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit Careful, many of these are not supported!

CSS Text Color

The color property is used to set the color of the text. The color is specified by:

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

Look at CSS Color Values for a complete list of possible color values.

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

<html>
   <head>
   </head>

   <body>
      <p style = "color:yellow;">
        This text color is yellow.
      </p>
   </body>
</html>

CSS Text Alignment

When we have some text and other inline elements on a page, each line of content is treated as a line box. The property text-align will align that content on the page, for example, if you want your text centered, or justified. Sometimes, however, you may want to align things inside that line box against other things, for example, if you have an icon displayed alongside text, or text of different sizes.

These are the traditional values for text-align:

left – The default value. Content aligns along the left side.
right – Content aligns along the right side.
center – Content centers between the left and right edges. White space on the left and right sides of each line should be equal.
justify – Content spaces out such that as many blocks fit onto one line as possible and the first word on that line is along the left edge and the last word is along the right edge.
inherit – The value will be whatever the parent element’s is.

“Content” is used here as as term instead of “text”, because while text-align certainly affects text, it affects all inline or inline-block elements in that container.

There are two new values in CSS3 as well, start and end. These values make multiple language support easier For example, English is a left-to-right (ltr) language and Arabic is a right-to-left (rtl) language. Using “right” and “left” for values is too rigid and doesn’t adapt as the direction changes. These new values do adapt:

start – Same as “left” in ltr, same as “right” in rtl.
end – Same as “right” in ltr, same as “left” in rtl.

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

CSS Text decoration

The text-decoration property is used to set or remove decorations from text.

The value text-decoration: none; is often used to remove underlines from links:

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

CSS Text shadow

The following example demonstrates how to set the shadow around a text.

<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px red;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  red shadow.
      </p>
   </body>
</html>