Lesson 12: Introduction to Text Formatting

	Introduction to Text Formating

Transforming Text

Text in a document displays in uppercase, lowercase, or a mix. Normally, you take care of the case of each letter or word when creating the contents of your webpage. If for some reason you need the browser to intervene in the case(s) of (a) letter(s) or (a) word(s) on your webpage, the CSS provides a style named text-transform. Its values are:

none: Nothing will be changed on the element
lowercase: All letters in the element will be converted to lowercase
uppercase: All letters in the element will be converted to uppercase
capitalize: The first letter of each word in the element will be converted to uppercase

<html>
<head>
<title>C# Programming</title>

<style>
.emphasis {
    text-transform: none;
    font-size:  13pt;
    color:      Purple;
}

.main         {
    text-transform: uppercase;
    color:       Red;
    font-size:   0.86cm;
}

.author-note {
    text-transform: lowercase;
    color:          purple;
    font-size:      small;
}

.key-word {
    text-transform: lowercase;
    color:          red;
    font-weight:    bold;
}

.paragraph-title {
    text-transform:  capitalize;
    color:           Blue;
    font-size:       0.62cm;
}

.main, .emphasis, .paragraph-title {
    font-family: Times New Roman, Garamond, Georgia, serif; }

.regular-paragraph {
    text-transform: none;
    color:          Black;
    font-family:    Georgia, Garamond, Times New Roman, serif;
}

</style>
</head>
<body>

<p class="main">c# programming</p>

<p class="paragraph-title">introducing object-oriented programming</p>

<cite class="author-note">THIS IS NOT A THOROUGH REVIEW OF COMPUTER PROGRAMMING.
</cite>

<p class="regular-paragraph"><abbr title="Pronounced C sharp">F#</abbr> is a computer 
programming language created and developed by <a href="https://msdn.microsoft.com/
en-us/library/dd233154.aspx" target="_new"</a>Microsoft</a>. The language adheres to 
the rules of <abbr title="Object-Oriented Programming">OOP</abbr> and <quote 
class="emphasis">procedural</quote> programming. C# supports various means of 
creating objects. These include classes and structures.</p>

<p class="paragraph-title">introducing class creation</p>

<p class="regular-paragraph">A class is created using the <quote class="key-word">
CLASS</quote> keyword. Depending on the situation, the <quote class="key-word">
STRUCT</quote> keyword may be used also.</p>

<p class="regular-paragraph">C# also supports records and unions.</p>

<p class="regular-paragraph">The member of a class can also be an enumeration. It 
should be noted that an enumeration is usually created in one line.</p>

<p class="regular-paragraph">c# supports various types of applications, such as 
<abbr title="Graphical User Interface">GUI</abbr> apps.</p>

</body>
</html>

This would produce:

Text Transformation

Aligning Text

Text displays in a block that behaves like a rectangle. In that block, text is positioned to the left, the center, or the right side. To let you specify this option, CSS provides a style named text-align. Based on our description, the values of this style are: left, center, and right. Of course, you can apply only one of these values. Here are examples:

File Name: definitions.css
-------------------------------
.main-title {
    text-align: center;
    color:      red;
    font:       bold 24pt Bodoni MT Black, Georgia, serif; }

.presentation {
    text-align:  left;
    font-family: 12pt Georgia, Times New Roman, serif;
    color:       black; }
=====================================================
File Name: chemistry.css
------------------------
.element-title
{
    text-align: center;
    font:       bold 0.42cm Bodoni MT Black, serif;
}

.number         { text-align:  right;  }
.element-name   { text-align:  left;   }
.element-symbol { text-align:  center; }

.number, .element-name, .element-symbol
{
    font: 14px Georgia, serif;
}
=====================================================
File Name: exercise.css
------------------------
<html>
<head>
<title>Chemistry: Periodic Table</title>

<link rel="stylesheet" href="chemistry.css">
<link rel="stylesheet" href="definitions.css">

<head>
<body>

<p class="main-title">Chemistry: Periodic Table</p>

<p class="presentation">In chemistry, the periodic table is used to organize the 
chemical elements based on their atomic numbers, their electron arrangement, and 
other properties.</p>

<p class="presentation">Based on their properties, the first 8 elements can be 
presented as follows:</p>

<div align="center">
  <table border=5>
    <tr>
      <td class="ElementTitle">Atomic Number</td>
      <td class="ElementTitle">Element</td>
      <td class="ElementTitle">Symbol</td>
      <td class="ElementTitle">Atomic Mass</td>
    </tr>
    <tr>
      <td class="number">1</td>
      <td class="element-name">Hydrogen</td>
      <td class="element-symbol">H</td>
      <td class="number">1.0079</td>
    </tr>
    <tr>
      <td class="number">2</td>
      <td class="element-name">Helium</td>
      <td class="element-symbol">He</td>
      <td class="number">4.002682</td>
    </tr>
    <tr>
      <td class="number">3</td>
      <td class="element-name">Lithium</td>
      <td class="element-symbol">Li</td>
      <td class="number">6.941</td>
    </tr>
    <tr>
      <td class="number">4</td>
      <td class="element-name">Berylium</td>
      <td class="element-symbol">Be</td>
      <td class="number">9.0122</td>
    </tr>
    <tr>
      <td class="number">5</td>
      <td class="element-name">Boron</td>
      <td class="element-symbol">B</td>
      <td class="number">10.811</td>
    </tr>
    <tr>
      <td class="number">6</td>
      <td class="element-name">Carbon</td>
      <td class="element-symbol">C</td>
      <td class="number">12.011</td>
    </tr>
    <tr>
      <td class="number">7</td>
      <td class="element-name">Nitrogen</td>
      <td class="element-symbol">N</td>
      <td class="number">14.0067</td>
    </tr>
    <tr>
      <td class="number">8</td>
      <td class="element-name">Oxygen</td>
      <td class="element-symbol">O</td>
      <td class="number">15.9994</td>
    </tr>
  </table>
<div>

</body>
</html>

This would produce:

Text Alignment

Decorating Text

Decorating text consists of adding a line over it, through it, or under it. To support this operation, CSS provides the text-decoration style. Its self-explanatory values are none, underline, overline, and line-through. Here are examples:

<html>
<head>
<title>C# Programming</title>

<style>
.emphasis {
    text-transform: none;
    font-size:  13pt;
    color:      Purple;
}

.main-title {
    text-transform: uppercase;
    color:       Red;
    font-size:   0.86cm;
}

.author-note {
    text-transform: lowercase;
    color:          purple;
    font-size:      small;
}

.key-word {
    text-transform: lowercase;
    color:          red;
    font-weight:    bold;
}

.paragraph-title {
    text-transform: capitalize;
    color:          Blue;
    font-size:      0.62cm;   
}

.main, .emphasis, .paragraph-title {
    font-family: Times New Roman, Garamond, Georgia, serif; }

.regular-paragraph { text-decoration: none;         }
.paragraph-title   { text-decoration: underline;    }
.author-note       { text-decoration: overline;     }
.to-remove         { text-decoration: line-through; }

.regular-paragraph, .to-remove {
    text-transform: none;
    color:          Black;
    font-family:    Georgia, Garamond, Times New Roman, serif;
}

a:link {
    text-decoration: underline;
    color: DarkRed;
    font-size: 12pt;
    font-family: Courier New; }

a:active {
    text-decoration: underline;
    color: HotPink;
    font-size: 12pt;
    font-family: Courier New; }

a:visited {
    text-decoration: underline;
    color: DarkCyan;
    font-size: 12pt;
    font-family: Courier New; }

a:hover {
    text-decoration: underline;
    color: LimeGreen;
    font-size: 12pt;
    font-family: Courier New; }

a:link.references {
    text-decoration: none;
    color: Red;
    font-size: 12pt;
    font-family: Courier New; }

a:active.references {
    text-decoration: none;
    color: Bisque;
    font-size: 12pt;
    font-family: Courier New; }

a:visited.references {
    text-decoration: none;
    color: Blue;
    font-size: 12pt;
    font-family: Courier New; }

a:hover.references {
    text-decoration: none;
    color: Maroon;
    font-size: 12pt;
    font-family: Courier New; }
</style>
</head>
<body>

<p class="main-title">c# programming</p>

<p class="paragraph-title">introducing object-oriented programming</p>

<p class="regular-paragraph"><abbr title="Pronounced C sharp">F#</abbr> is a 
<a href="languages.htm">computer programming language</a> created and developed by 
<a href="https://msdn.microsoft.com/en-us/library/dd233154.aspx" 
target="_new"</a>Microsoft</a>. The language adheres to the rules of 
<abbr title="Object-Oriented Programming">OOP</abbr> and <quote 
class="emphasis">procedural</quote> programming. C# supports various means of 
creating objects. These include classes and structures.</p>

<p class="paragraph-title">introducing class creation</p>

<p class="regular-paragraph">A class is created using the <quote class="key-word">
CLASS</quote> keyword. Depending on the situation, the <quote class="key-word">
STRUCT</quote> keyword may be used also.</p>

<p class="to-remove">C# also supports records and unions.</p>

<p class="regular-paragraph">The member of a class can also be an enumeration. It 
should be noted that an enumeration is usually created in one line.</p>

<p class="regular-paragraph">c# supports various types of applications, such as 
<abbr title="Graphical User Interface">GUI</abbr> apps.</p>

<cite class="author-note">THIS IS NOT A THOROUGH REVIEW OF COMPUTER PROGRAMMING.
</cite>

<p><a class="references"
      href="https://msdn.microsoft.com/en-us/library/kx37x362.aspx"
      target="_new">MSDN Visual C#</a> |
   <a href="http://www.functionx.com/csharp/index.htm"
      class="references">C# Tutorials</a> | 
   <a href="examples.htm" class="references">C# Examples</a></p>
</body>
</html>

This would produce:

Text Decoration

Justifying Text Alignment

Sometimes in word processing, we want all lines of a paragraph to appear as if they have the same length. That is, we may want each line of text to cover the whole horizontal part available. To let you take care of this, CSS provides an option in the text-align style with a value as justify. Here is an example of applying it:

<html>
<head>
<title>Social Science Studies</title>

<style>
.main-title         {
    text-align:  center;
    font-weight: bold;
    color:       Red;
    font-size:   0.86cm;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
.sub-title         {
    text-align:  left;
    color:       Blue;
    font-size:   0.64cm;
    font-family: Georgia, Times New Roman, serif;
}

.introduction {
    text-align:  justify;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

.contribution {
    text-align:  left;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

.paragraph {
    text-align:  justify;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

</style>
</head>
<body>

<p class="main-title">Social Science Studies</p>

<p class="sub-title">Introduction</p>

<p class="introduction">Social sciences cover a wide range of studies that address all 
types of topics about human beings, their behaviors, their history, their societies, 
and their environments. Regular social science areas include sociology, psychology, 
philosoply, linguistics, communication, history, geography, demography, ethnicity, 
anthropology, archaeology, political science, law, education, criminology, and 
economy, just to name a few. Some social science topics are grouped in categories, 
such as individual or crowd, where studies tend to address the same categorical 
isssues. Still, social sciences are highly interchangeable. Sometimes, differences 
are a matter of interpretations based on the particular area(s) being considered.</p>

<p class="sub-title">Social Science Contributions</p>

<p class="contribution">Social sciences are not strictly confined to the above list. 
Studies in chemistry borrow concepts from sociology, anthropology, and economy. 
Mathematics and medicine, that are sometimes said not to be a science, 
regularly share theories with philosophy, psychology, or criminology. In the same 
way, it is practically impossible to study computer science, which includes computer 
languages and application programming, without referring to linguistics. As a 
conclusion, social sciences are not restricted to one area of study but 
contribute to various types of sciences, studies, and disciplines.</p>

<p class="sub-title">Recommendations</p>

<p class="paragraph">If you are planning to study any of the scocial science topics, 
find a good school.</p>

<p>Schools | Majors | Minors</p>
<p>Copyright &copy; 2015</p>

</body>
</html>

This would produce:

Text Decoration

Controlling Text Alignment

To let you control text justification with more options, CSS supports an additional style named text-justify. This style is used as a complement to text-align. This means that the text-justify style by itself does nothing. It must be accompanied by a text-align whose value is set to justify.

The values of the text-justify style are auto, newspaper, distribute, distribute-all-lines, inter- cluster, inter-ideograph, inter-word, and kashida. Here is an example:

<html>
<head>
<title>Social Science Studies</title>

<style>
.main-title         {
    text-align:  center;
    font-weight: bold;
    color:       Red;
    font-size:   0.86cm;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
.sub-title         {
    text-align:  left;
    color:       Blue;
    font-size:   0.64cm;
    font-family: Georgia, Times New Roman, serif;
}

.introduction {
    text-align:  justify;
    text-justify: newspaper;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

.contribution {
    text-align:  left;
    text-justify: newspaper;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

.paragraph {
    text-align:  left;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

</style>
</head>
<body>

<p class="main-title">Social Science Studies</p>

<p class="sub-title">Introduction</p>

<p class="introduction">Social sciences cover a wide range of studies that address all 
types of topics about human beings, their behaviors, their history, their societies, 
and their environments. Regular social science areas include sociology, psychology, 
philosoply, linguistics, communication, history, geography, demography, ethnicity, 
anthropology, archaeology, political science, law, education, criminology, and 
economy, just to name a few. Some social science topics are grouped in categories, 
such as individual or crowd, where studies tend to address the same categorical 
isssues. Still, social sciences are highly interchangeable. Sometimes, differences 
are a matter of interpretations based on the particular area(s) being considered.</p>

<p class="sub-title">Social Science Contributions</p>

<p class="contribution">Social sciences are not strictly confined to the above list. 
Studies in chemistry borrow concepts from sociology, anthropology, and economy. 
Mathematics and medicine, that are sometimes said not to be a science, 
regularly share theories with philosophy, psychology, or criminology. In the same 
way, it is practically impossible to study computer science, which includes computer 
languages and application programming, without referring to linguistics. As a 
conclusion, social sciences are not restricted to one area of study but 
contribute to various types of sciences, studies, and disciplines.</p>

<p class="sub-title">Recommendations</p>

<p class="paragraph">If you are planning to study any of the scocial science topics, 
find a good school.</p>

<p>Schools | Majors | Minors</p>
<p>Copyright &copy; 2015</p>

</body>
</html>

This would produce:

Text Justification

Wrapping Text

Wrapping text consists of deciding whether to break or not break words that would exceed the boundaries of the area where their line displays. To support this operation, CSS provides the word-wrap style. The two possible values of this style are normal and break-word.

Indenting a Paragraph

A regular characteristic of text formatting in word processing is to indent the first line of a paragraph. To support this operation, CSS has a style named text-indent. The indentation is specified by an HTML-based constant number or a relative value expressed as a percentage. Here is an example:

<html>
<head>

<title>Social Science Studies</title>

<style>

.main-title         {
    text-align:  center;
    font-weight: bold;
    color:       Red;
    font-size:   0.86cm;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}

.sub-title         {
    text-align:  left;
    color:       Blue;
    font-size:   0.64cm;
    font-family: Georgia, Times New Roman, serif;
}

.introduction {
    text-indent:  24pt;
    text-align:  justify;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

.contribution {
    text-indent:  24pt;
    text-align:  left;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

.paragraph {
    text-align:  left;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif;
}

</style>

</head>
<body>

<p class="main-title">Social Science Studies</p>

<p class="sub-title">Introduction</p>

<p class="introduction">Social sciences cover a wide range of studies that address all 
types of topics about human beings, their behaviors, their history, their societies, 
and their environments. Regular social science areas include sociology, psychology, 
philosophy, linguistics, communication, history, geography, demography, ethnicity, 
anthropology, archaeology, political science, law, education, criminology, and 
economy, just to name a few. Some social science topics are grouped in categories, 
such as individual or crowd, where studies tend to address the same categorical 
isssues. Still, social sciences are highly interchangeable. Sometimes, differences 
are a matter of interpretations based on the particular area(s) being considered.</p>

<p class="sub-title">Social Science Contributions</p>

<p class="contribution">Social sciences are not strictly confined to the above list. 
Studies in chemistry borrow concepts from sociology, anthropology, and economy. 
Mathematics and medicine, that are sometimes said not to be a science, 
regularly share theories with philosophy, psychology, or criminology. In the same 
way, it is practically impossible to study computer science, which includes computer 
languages and application programming, without referring to linguistics. As a 
conclusion, social sciences are not restricted to one area of study but 
contribute to various types of sciences, studies, and disciplines.</p>

<p class="sub-title">Recommendations</p>

<p class="paragraph">If you are planning to study any of the scocial science topics, 
find a good school.</p>

<p>Schools | Majors | Minors</p>
<p>Copyright &copy; 2015</p>

</body>
</html>

This would produce:

Text Indentation