Text-related properties in CSS
This section is dedicated to discussing the properties that control the appearance of text on a webpage.
The following properties are to be covered in this section:
- Text-indent
length– e.g.20px,2empercentage– e.g.10%(relative to the containing element’s width)inherit– inherits from parent
- Text-align
leftrightcenterjustifystart(logical left in LTR and right in RTL)endinherit
- Text-Decoration
noneunderlineoverlineline-throughblink(deprecated in most browsers)inherit
- Wrod-spacing
normallength– e.g.5px,0.5eminherit
- Letter-spacing
normallength– e.g.2px,-1pxinherit
- Text-transform
nonecapitalize– first letter of each worduppercase– all letters uppercaselowercase– all letters lowercaseinherit
Example of HTML Program using the above text properties.
<HTML>
<HEAD>
<TITLE> 6.8.2 </TITLE>
<LINK REL=”STYLESHEET” TYPE=”TEXT/CSS” HREF=”SAMPLE5.CSS”>
</HEAD>
<BODY>
<h1> Quote of the day </h1>
<p> It’s never too late to start over. if you weren’t happy with yesterday, try something different today. don’t stay stuck. do better.
<ul>
<li> stay positive </li>
<li> Stay strong </li>
</ul>
</BODY>
</HTML>
CSS file that can be used with the above program to apply different text properties.
h1 {color:red; font-famliy: “time new roman”, serif; font-size: 30px; text-align: centre; text-decoration:underline; text-transform: uppercase;}
p{font-family: arial; font-style: oblique; font-size:1em; text-indent: 30px; word-spacing: 15px; color: Gray;}
li{font-variant: small-caps; color: Blue; text-transform:capitalize; letter-sapcing: 30px; font-family: sans-serif;}
OUTPUT of the program:
Instructions to run the program:
- Save the above HTML code in Notepad using the file name and .html extension
- . Save the sample5.css file in Notepad in the same folder where your HTML file is saved.
- See the output in the web browser.
This post is useful for text-related properties in CSS for grade 10 CBSE