Tutorial by Examples

HTML: <div id="element-one">Hello I am some text.</div> <div id="element-two">Hello I am some smaller text.</div> CSS: #element-one { font-size: 30px; } #element-two { font-size: 10px; } The text inside #element-one will be 30px ...

With the syntax: element { font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family]; } You can have all your font-related styles in one declaration with the font shorthand. Simply use the font property, and put your values in the correct order. For example, ...

font-family: 'Segoe UI', Tahoma, sans-serif; The browser will attempt to apply the font face "Segoe UI" to the characters within the elements targeted by the above property. If this font is not available, or the font does not contain a glyph for the required character, the browser wil...

h2 { /* adds a 1px space horizontally between each letter; also known as tracking */ letter-spacing: 1px; } The letter-spacing property is used to specify the space between the characters in a text. ! letter-spacing also supports negative values: p { letter-spacing: -1px; }...

The text-transform property allows you to change the capitalization of text. Valid values are: uppercase, capitalize, lowercase, initial, inherit, and none CSS: .example1 { text-transform: uppercase; } .example2 { text-transform: capitalize; } .example3 { text-transform: lowerc...

p { text-indent: 50px; } The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Resources: Indenting only the first line of text in a paragraph? https://www.w3.org/TR/CSS21/text.html#pr...

The text-decoration property is used to set or remove decorations from text. h1 { text-decoration: none; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; } h4 { text-decoration: underline; } text-decoration can be used in combination with text-decoration-style and text-...

The text-overflow property deals with how overflowed content should be signaled to users. In this example, the ellipsis represents clipped text. .text { overflow: hidden; text-overflow: ellipsis; } Unfortunately, text-overflow: ellipsis only works on a single line of text. There is no way...

The word-spacing property specifies the spacing behavior between tags and words. Possible values a positive or negative length (using em px vh cm etc.) or percentage (using %) the keyword normal uses the font's default word spacing the keyword inherit takes the value from the parent element ...

div { direction: ltr; /* Default, text read read from left-to-right */ } .ex { direction: rtl; /* text read from right-to-left */ } .horizontal-tb { writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */ } .vertical-rtl { writing-mode: v...

Attributes: normal Default attribute of fonts. small-caps Sets every letter to uppercase, but makes the lowercase letters(from original text) smaller in size than the letters that originally uppercase. CSS: .smallcaps{ font-variant: small-caps; } HTML: <p class="smallcaps&quot...

The quotes property is used to customize the opening and closing quotation marks of the <q> tag. q { quotes: "«" "»"; }

To add shadows to text, use the text-shadow property. The syntax is as follows: text-shadow: horizontal-offset vertical-offset blur color; Shadow without blur radius h1 { text-shadow: 2px 2px #0000FF; } This creates a blue shadow effect around a heading Shadow with blur radius To add a...