CSS Text Manipulation
The text manipulation properties of CSS allow you to manipulate text in your HTML document the same way as you use a word processing application. You can manipulate text in a variety of ways, from making the text bold, italic, underline, space between letters in words of text, making text capital etc...
- color - Sets the color of text
- direction - Specifies the text direction / writing direction
- letter-spacing - Increases or decreases the space between characters in a text
- line-height - Sets the line height
- text-align - Specifies the horizontal alignment of text
- text-decoration - Specifies the decoration added to text
- text-indent - Specifies the indentation of the first line in a text-block
- text-transform - Controls the capitalization of text
- vertical-align - Sets the vertical alignment of an element
- white-space - Specifies how white-space inside an element is handled
- word-spacing - Increases or decreases the space between words in a text
- hanging-punctuation (CSS 3) - Specifies whether a punctuation character may be placed outside the line box
- punctuation-trim (CSS 3) - Specifies whether a punctuation character should be trimmed
- text-align-last ( CSS 3) - Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"
- text-justify (CSS 3) - Specifies the justification method used when text-align is "justify"
- text-outline (CSS 3) - Specifies a text outline
- text-overflow (CSS 3) - Specifies what should happen when text overflows the containing element
- text-shadow (CSS 3) - Adds shadow to text
- text-wrap (CSS 3) - Specifies line breaking rules for text
- word-break (CSS 3) - Specifies line breaking rules for non-CJK scripts
- word-wrap (CSS 3) - Allows long, unbreakable words to be broken and wrap to the next line
I do not use all of these text properties in my desings. The most text properties that I use in my designs are:
The colour property is used to set the colour of the text. The colour can be specified by: name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000".
The text-align Property
The text-align property is used to set the horizontal alignment of a text. Text can be centred, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight.
The text-decoration Property
The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes. The following outlines the text-decoration property and its values:
Text-decoration – none | underline | overline | line-through | blink.
Examples: in my HTML I have given an ID to each paragraph as described below.
The above CSS codes produce the following results:
I am underline text
I am overline text
I am line-through text
Note: It is not recommended to underline text that is not a link, as this often confuses users.
Please note that Safari and IE do not support the blink keyword.
By default, HTML hypertexlinks are underline in blue colour. If you do not want your HTML hypertextlinks to be underlined, you can use CSS property text-decoration to remove the underline.
The text-transform Property
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. The following outlines the text-decoration property and its values:
Text-transform – none | capitalize | uppercase | lowercase
You can experiment some of the above CSS text properties in your design.
CSS includes a variety of properties that change the face, size, and style of a font.
font - Sets all the font properties in one declaration.
font-family - Specifies the font family for text.
font-size - Specifies the font size of text (12px, 50px etc..).
font-style - Specifies the font style for text (italic or normal.
font-variant - Specifies whether or not a text should be displayed in a small-caps font.
font-weight - Specifies the weight of a font (bold, bolder, normal).
The above codes produce the following text.
I am a paragraph, font size 16px, font style italic and font weight bold.
In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial").