Most of the web-page content is text and therefore text styling is an important aspect.<\/p>\n
CSS styles the text with the following properties:<\/p>\n
The text color can be set using the color property using the following three permissible values:
\nColor-name
\nRGB Code
\nHex<\/p>\n
\r\n h1{\r\n color:blue;\r\n }\r\n .text{\r\n color:#CD975A;\r\n }\r\n .content{\r\n color:rgb(95, 149, 66);\r\n }\r\n<\/pre>\nRun<\/a><\/p>\ntext-align<\/h2>\n
The horizontal alignment of the text can be done using this property. We can align the text to the left, right or center.<\/p>\n
Apart from that, the text-align property can also be set to \u2018justify\u2019 wherein, every line will be stretched to maintain an equal width for all lines.
\nDifferent values for text align properties are
\nleft | right| center | justify | initial |inherit<\/strong><\/p>\n\r\n h1 {\r\n text-align:center;\r\n }\r\n .left {\r\n text-align:left;\r\n }\r\n .right {\r\n text-align:right\r\n }\r\n .justify{\r\n text-align:justify;\r\n }\r\n<\/pre>\nRun<\/a><\/p>\n\r\n h1 {\r\n text-align: center;\r\n }\r\n .right {\r\n text-align: right\r\n }\r\n .one {\r\n color: green;\r\n text-align: inherit\r\n }\r\n<\/pre>\nRun<\/a><\/p>\n\r\n h1 {\r\n text-align: center;\r\n }\r\n .one {\r\n text-align: initial;\r\n }\r\n<\/pre>\nRun<\/a>\n<\/p>\ntext-decoration<\/h2>\n
This is basically to add or remove decorations from the text. For no decoraction the value is set to \u2018none\u2019. <\/p>\n
Some other values for decoration are \u2018overline\u2019, \u2018line-throught\u2019, \u2018underline\u2019.<\/p>\n
Possible values for test-decoration properties are
\nnone |underline|line-through|overline|inherit<\/strong><\/p>\n\r\n h1 {\r\n text-align: center;\r\n text-decoration: underline;\r\n }\r\n\r\n .none {\r\n text-decoration: none;\r\n }\r\n\r\n .underline {\r\n text-decoration: underline;\r\n }\r\n\r\n .line-through {\r\n text-decoration: line-through;\r\n }\r\n\r\n .overline {\r\n text-decoration: overline;\r\n }\r\n<\/pre>\nRun<\/a><\/p>\ntext-transform<\/h2>\n
This property has to do with the cases of the letters in the text.<\/p>\n
You can transform the text to lowercase, uppercase or capitalize (make the first letter of every word as capital)<\/p>\n
different values for text-transform property are
\ncapitalize | uppercase | lowercase | none | inherit<\/strong><\/p>\n\r\nh1 {\r\n text-transform: uppercase;\r\n }\r\n\r\n p.lower {\r\n text-transform: lowercase;\r\n }\r\n\r\n p.capitalize {\r\n text-transform: capitalize;\r\n }\r\n\r\n p.none {\r\n text-transform: none;\r\n }\r\n<\/pre>\nRun<\/a><\/p>\n\r\n h1 {\r\n text-transform: uppercase;\r\n }\r\n\r\n div.upper {\r\n text-transform: uppercase;\r\n }\r\n p{\r\n text-transform: inherit;\r\n }\r\n<\/pre>\nRun<\/a><\/p>\ntext-indent<\/h2>\n
Text indent is the empty space from stating point in first line. The text indentation can be altered by providing appropriate length value to this property.
\nvalues for text-indent are
\npercentage | length | inherit<\/strong><\/p>\n\r\n p.one {\r\n text-indent: 100px;\r\n }\r\n\r\n p.two {\r\n text-indent: 20%;\r\n }\r\n\r\n p.three {\r\n text-indent: -3em;\r\n }\r\n<\/p>\r\n<\/pre>\nRun<\/a><\/p>\nletter-spacing<\/h2>\n
The space between individual characters can be defined with this property.<\/p>\n
A positive will mean a well-defined space while a negative value will mean overlapping of characters.<\/p>\n
values for letter spacing
\n normal | length| inherit <\/strong><\/p>\n\r\n h1 {\r\n letter-spacing: 5px;\r\n }\r\n\r\n p.normal {\r\n letter-spacing: normal;\r\n }\r\n\r\n p.normal {\r\n letter-spacing: normal;\r\n }\r\n\r\n p.one {\r\n letter-spacing: 0.5em;\r\n }\r\n\r\n div {\r\n letter-spacing: 0.2em;\r\n }\r\n<\/pre>\nRun<\/a><\/p>\nline-height<\/h2>\n
The individual vertical distance between two lines can be set with this property.<\/p>\n
\nvalues for line height are
\nnormal | number | length | percentage <\/strong><\/p>\n\r\n h1 {\r\n line-height: 50px;\r\n }\r\n\r\n p.normal {\r\n line-height: normal;\r\n }\r\n\r\n p.number {\r\n line-height: 2;\r\n }\r\n\r\n p.length {\r\n line-height: 3em;\r\n }\r\n\r\n p.percentage {\r\n line-height: 140%;\r\n }\r\n\r\n div#un {\r\n line-height: 3;\r\n }\r\n<\/pre>\nRun<\/a><\/p>\nDirection<\/h2>\n
The text direction is also an important factor in styling. Basically, your text will proceed in left to right (ltr) or right to left (rtl). <\/p>\n
The default value is ltr. Also, in case of ltr, the default text aligment is left and vice-versa.
\n values for text directions are<\/p>\n
ltr | rtl | inherit<\/strong><\/p>\n\r\n .ltr {\r\n direction: ltr;\r\n }\r\n\r\n .rtr {\r\n direction: rtl;\r\n }\r\n\r\n div {\r\n direction: rtl;\r\n }\r\n<\/pre>\nRun<\/a><\/p>\nword-spacing<\/h2>\n
This is for the horizontal spacing among the words. Just like letter-spacing property, the value here too can be positive or negative.<\/p>\n
\nvalues for word-spacing property is
\n normal |length | inherit <\/strong><\/p>\n\r\n h1 {\r\n word-spacing: 20px;\r\n }\r\n\r\n .one {\r\n word-spacing: 30px;\r\n }\r\n\r\n .two {\r\n word-spacing: normal;\r\n }\r\n\r\n .three {\r\n word-spacing: 10vw;\r\n div {\r\n word-spacing: 1rem;\r\n }\r\n<\/pre>\nRun<\/a><\/p>\ntext-shadow<\/h2>\n
It gives a shadow effect to the text.<\/p>\n
The value is given as
\n horizontal-shadow | vertical-shadow | blur-radious | shadow color<\/p>\n\r\n h1 {\r\n text-shadow: 0px 5px 10px #4fc957;\r\n }\r\n\r\n p {\r\n font-size: 50px;\r\n font-weight: bold;\r\n text-shadow: 0px 5px 10px #4fc957;\r\n }\r\n<\/pre>\n