Lecture 14: Classes, IDs, and Additional Text-Related Properties

Overview:

Classes
IDs
Pseudo-Classes
font-weight Property
font-style Property
font-variant Property
line-height Property
font Shorthand Property
letter-spacing Property
word-spacing Property
text-align Property
vertical-align Property
text-decoration Property
text-indent Property
text-transform Property

Classes

A class is a type of CSS selector that can be applied to any tag valid inside <body> (including <body> itself).
A class can be specified as many times as you would like in a document.
In your CSS the class begins with a period; the word after that is up to you but be sure to start it with a letter and spaces are not allowed. An example is:
```
.example {font-size: 14px;}
```
In your (X)HTML code you call this using the class attribute, which is one of the standard attributes covered previously. If you wanted to apply this to a paragraph, the code would be:
```
<p class="example">Some text here</p>
```
Note that in your (X)HTML there is no period; what is given is just the text after the period.
Classes can be contextualized to a specific tag, although I prefer to leave them open so that they can be applied wherever necessary.
If we wanted to restrict our 'example' class so that it would only be effective when applied to divisions, the code would be:
```
div.example {font-size: 14px;}
```
The above code means that the class needs to be called from a division in order to work.
I seldom restrict classes so much, but another approach to contextualizing classes is one that I use fairly often:
```
.example2 p {font-size: 14px;}
```

This code affects every paragraph inside of a tag with class="example" specified. For example, it would come into play in this situation:

<div class="example2">
  <p>This text uses the class because it is in a paragraph</p>
  This text does not use the example2 class; it is not in a paragraph.
  <p>More text using the class styling</p>
</div>

It is also possible to call multiple classes at the same time (for the same element) by specifying the class names separated by spaces. Given the following CSS:
```
.example3 {color: green;}
.example4 {font-size: 13px;}
```
The classes could be called as:
```
<p class="example3 example4">Text 13 pixels tall and green</p>
```
Why use classes? Classes offer a great deal of flexibility and reusability. The only drawback is that they are intended to be used just with CSS.

IDs

An id is a unique identifier that is specified using the id attribute, which is also a standard attribute (it can be applied to any tag valid inside <body>, including <body> itself).
Unlike a class, which can be applied unlimited times, a given id can only be specified once per (X)HTML document. This is because it is a unique identifier; specifying the same id twice (or more) in the same (X)HTML page would prevent it from being unique.

In your CSS the id begins with a # sign. An example id is:

#fonts {font-family: verdana,geneva,lucida,arial,sans-serif;}

Options for contextualizing id values function the same way as classes, such as:

p#fonts {font-family: verdana,geneva,lucida,arial,sans-serif;}

#fonts p {font-family: verdana,geneva,lucida,arial,sans-serif;}

Why use an id? The same id can be used for CSS, JavaScript, and for certain (X)HTML tags that are accessibility-related (these are covered in INP 170: Web Coding II).

Pseudo-Classes

Pseudo-classes specify different effects for an element.
They are typically used with the anchor tag, since that is the limit of Windows Internet Explorer 5.x & 6 support. More recent browsers, including IE 7, allow them to be applied to other elements.
When specifying these pseudo-classes the proper sequence is :link, :visited, :hover, :active
Deviating from this sequence will cause some of them to stop functioning.
There is also a :focus pseudo-class used for keyboard tabbing (:hover is for mousing over), which is not supported in Windows Internet Explorer 5.x, 6, & 7 (IE 5.x and 6 use :active to approximate :focus with mixed results; IE 7 does not support :active). Other modern browsers support :focus
:focus styling is limited to elements that can be tabbed to, which are links and form elements
If :focus is used, it is usually inserted after :hover

Pseudo-Class	Occurs	Replaces	Recommendations
:link	This is the unvisited state (this state occurs before the document linked to has been viewed)	Deprecated link attribute for <body>	Blue links get the highest rate of click-through; users always associate blue with links.
:visited	This state occurs after the document linked to has been viewed.	Deprecated vlink attribute for <body>	Make sure that visited links maintain acceptable contrast with background colors.
:hover	This state occurs when the link (or other element, in the latest browsers) is moused over.		Avoid visual changes that cause surrounding content to shift left/right (boldface and italics would cause such a shift). Less is more when using :hover Not supported in old browsers, such as Netscape 4.x
:active	This state occurs when the link is in the process of being selected, usually via clicking.	Deprecated alink attribute for <body>	Typically this will only be seen for a moment (such as when a link is being clicked), but in IE 5.x & 6 sometimes this can persist if the link is not fully clicked. No support in IE 7.
:focus	This state occurs when the link (or form element) has been selected by tabbing.		No support in Windows Internet Explorer.

Specifying Default Colors and Behavior

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: #000;}
a:focus {color: #000;}
a:active {color: #000;}

In this example all unvisited links are blue, all visited links are purple, and all links are black when moused over, tabbed to, and selected. Every link in the document is affected.

Specifying Multiple Sets of Link Colors

Two approaches can be taken to this:

a.example:link {color: blue;}
a.example:visited {color: purple;}
a.example:hover {color: #000;}
a.example:focus {color: #000;}
a.example:active {color: #000;}

#nav a:link {color: blue;}
#nav a:visited {color: purple;}
#nav a:hover {color: #000;}
#nav a:focus {color: #000;}
#nav a:active {color: #000;}

Important:

The choice of class vs. id here is up to you. Either works just fine. In the first example I would have to specify <a href="" class="example"> for the colors to be applied to that link. In the second example I would have perhaps <div id="nav"> and then all the links inside that <div> will use the specified colors.
Of the two approaches shown above, the second one is definitely the most code-efficient and is preferred for that reason.
Applying styles directly to 'a' will automatically apply that to every pseudo-class as well.
Do not just specify :link, :visited, :hover, :focus, or :active (without 'a' in front of it or another element, in the case of :hover and :focus) because modern browsers (other than Windows Internet Explorer 5.x & 6) will take on that behavior for all elements. Hover effects then start popping up all over the place and focus effects could start happening in undesired places as well.

font-weight Property

When setting amount of font-weight the keywords (lighter/normal/bold/bolder) work as expected and are easiest and most consistent cross-browser and cross-platform.
If using the numbers, 400 or less is a normal font weight, while 700 or 800 is bold and 900 becomes very boldface in some browsers (in others it is just a regular amount of boldface).

Property	Usage and Effect	Values Accepted	Recommendations
font-weight	Specifies the amount of weight (lightness / boldness) to use for text inside an element.	lighter \| normal \| bold \| bolder \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900	Some elements come with a default setting of bold (such as headings, <strong>, and <b>), which can be overriden via 'font-weight: normal;' Use boldface sparingly; a little bit of boldface draws the user's attention and too much makes them not want to look at the text. Typically 'bold' is sufficient; 'bolder' can make letterforms too blocky/thick if the browser renders them as intended.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Font-Weight</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 12px;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 18px; font-family: georgia,serif;
        color: purple; font-weight: normal;}
    h2 {font-size: 16px; font-family: georgia,serif;
        color: green; font-weight: bolder;}
    .bld {font-weight: bold;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading</h1>

<h2>A Sample Level 2 Heading</h2>

<p>Sample text, some of which is <span class="bld">bold</span></p>

</body>
</html>

See how this example renders

font-style Property

Italicizing text alters the letterforms, which makes the text appearance unique but also slows down reading.
Making the text oblique tilts the letters without altering the letterform, so reading should be a bit faster compared to italicized text.

Property	Usage and Effect	Values Accepted	Recommendations
font-style	Specifies whether the text inside an element should be italicized, oblique, or normal.	italic \| normal \| oblique	Some elements come with a default setting of italic (including <em> and <i>), which can be overriden via 'font-style: normal;' Use italics and oblique text sparingly. Old browsers (e.g., Netscape 4.x) do not support oblique text.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Font-Style</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 12px;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 18px; font-family: georgia,serif;
        color: purple; font-weight: normal; font-style: italic;}
    h2 {font-size: 16px; font-family: georgia,serif;
        color: green; font-weight: bolder; font-style: oblique;}
    .oblique {font-style: oblique;}
    .normal {font-style: normal;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading</h1>

<h2>A Sample Level 2 Heading</h2>

<p>Sample text, some of which is <span class="oblique">oblique</span></p>

<p><em class="normal">Emphasized text, with italics removed</em></p>

<p><em>Emphasized text, with no changes to default rendering</em></p>
</body>
</html>

See how this example renders

font-variant Property

Property	Usage and Effect	Values Accepted	Recommendations
font-variant	Specifies whether the text inside an element should be small-caps or normal.	small-caps \| normal	Support for 'small-caps' is quirky in Windows IE 5.x (it capitalizes all the letters). Mac IE 5.x typically inserts extra gapping between some letters. Small-caps can be useful for headings/subheadings, to give them some visual distinctiveness, but the small-caps effect also shrinks the font size a bit.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Font-Variant</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 12px;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 24px; font-family: georgia,serif;
        color: purple; font-weight: normal; font-variant: small-caps;}
    h2 {font-size: 20px; font-family: georgia,serif;
        color: green; font-variant: small-caps;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading</h1>

<h2>A Sample Level 2 Heading</h2>

</body>
</html>

See how this example renders

line-height Property

The line-height is, as its name suggests, the height of a line of text. If the font-size of the text is less than its line-height the text becomes centered vertically.
The line-height property is fairly unique in that it can accept numbers without units (e.g., 1.0) as well as numbers with units (e.g., 1em).
The two approaches to setting line-height have very different outcomes. When you specify a number without a unit, that becomes a multiplier for every element nested inside the one where the line-height is applied.
So if you apply a line-height of 1.0 to a <div> that has a font-size of 14px, then that div's content will have a line-height of 14px. Lets assume that there is a <span> tag nested inside with a font-size of 12px. That span tag gets a 1x multiplier, so its content has a line-height of 12px (rather than the 14px line-height of content around it).
When you specify a number with a unit, the browser calculates the line-height for that element and all the nested tags inside of it inherit that same line-height.
In the previous example of the div and the span, the div would set a computed line-height of 14px, which then inherits down to the span tag inside of it. The span tag now has line-height of 14px, even though its font-size is 12px.
The W3C CSS validator has historically had an issue with unitless line-height values, if you leave out the decimal point. So, for example, a value of 1 is flagged as invalid (although browsers render it just fine) and a value of 1.0 is valid (and works just fine in browsers too).

Property	Usage and Effect	Values Accepted	Recommendations
line-height	Sets the height for each line of content in an element. Useful for giving content some extra negative spacing (empty spacing) for better readability.	Number and a sizing unit (px, pt, em, %) for computed values or number alone (no unit) for inherited multiplier	Keep in mind the differences that units make to line-heights. If there is a lot of nesting, you may not want to have a computed value from the outermost tag. Expect to find cross-browser differences in default line-height values (Gecko-based browsers tend to render lines of text closer together than other browsers by default; of course CSS can change this default).

Sample code using inherited multiplier value:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Line-Height without Units</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 10px;
          font-family: verdana,geneva,lucida,arial,sans-serif;
          line-height: 2.0;}
    span {font-size: 25px;}
    strong {font-size: 40px;}
   --></style>
</head>
<body>
<p><strong>Definitely a strong impression with this text.</strong></p>

<p><span>A 25px span here, with 50px line-height.</span></p>

<p>20px line-height for this sentence.</p>
</body>
</html>

See how this example renders

Sample code using computed line-height from <body>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Line-Height with Units</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 10px;
          font-family: verdana,geneva,lucida,arial,sans-serif;
          line-height: 2em;}
    span {font-size: 25px;}
    strong {font-size: 40px;}
   --></style>
</head>
<body>
<p><strong>Definitely a strong impression with this text.</strong></p>

<p><span>A 25px span here, with 20px line-height.</span></p>

<p>20px line-height for this sentence.</p>
</body>
</html>

See how this example renders

font Shorthand Property

The shorthand is used to combine all the font values and line-height into one string, which greatly streamlines your code.
The sequence of values is: font-style font-variant font-weight font-size/line-height font-family(ies)
Values not specified are assigned to their defaults automatically.

These two rules are equivalent:

h1 {font-weight: normal;
    font-variant: small-caps;
    font-style: italic;
    font-size: 18px;
    font-family: verdana,geneva,lucida,arial,sans-serif;
    line-height: 1.5em;}

h1 {font: italic small-caps 18px/1.5em verdana,geneva,lucida,arial,sans-serif;}

Important: At a minimum you need font-size and a font-family specified for this to work.
Gecko-based browsers appear to be the most sensitive to any deviations from the indicated sequence of values.

Most of the time the shorthand is what you should use; it is the most streamlined approach.

letter-spacing Property

Property	Usage and Effect	Values Accepted	Recommendations
letter-spacing	Used to control the amount of empty space between letters.	Number and a sizing unit (px, pt, em, %)	Useful for making headings more visually distinctive. Less is more; small amounts give the best visual result.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Letter-Spacing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 12px;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 24px; font-family: georgia,serif;
        color: purple; font-weight: normal;
        font-variant: small-caps; letter-spacing: 3px;}
    h2 {font-size: 20px; font-family: georgia,serif;
        color: green; font-variant: small-caps; letter-spacing: 1px;}
   --></style>
</head>
<body>
<h1>A Sample Level 1 Heading</h1>

<h2>A Sample Level 2 Heading</h2>

</body>
</html>

See how this example renders

word-spacing Property

Property	Usage and Effect	Values Accepted	Recommendations
word-spacing	Used to control the amount of empty space between words.	Number and a sizing unit (px, pt, em, %)	Not frequently used. Windows Internet Explorer 5.x lacks support; Mac IE 5.x and Windows IE 6 & 7 are supportive, as well as the Gecko-based browsers, Opera, and Safari.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Word-Spacing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 12px;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 24px; font-family: georgia,serif;
        color: purple; font-weight: normal;
        font-variant: small-caps; word-spacing: 10px;}
    h2 {font-size: 20px; font-family: georgia,serif;
        color: green; font-variant: small-caps; word-spacing: 5px;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading</h1>

<h2>A Sample Level 2 Heading</h2>

</body>
</html>

See how this example renders

text-align Property

Property	Usage and Effect	Values Accepted	Replaces	Recommendations
text-align	Controls the horizontal alignment of text inside a block-level element.	left \| right \| center \| justify	Deprecated align attribute for headings, <p>, <img />, and <div>. Also replaces align for <tr>, <td>, and <th> tags.	'justify' is useful for getting rid of jagged right edges in paragraphs. Windows Internet Explorer 5.x misinterprets this property and will try to also align the element relative to its parent element (the effect should just be for the text content it contains, not the entire element).

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Text-Align</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 12px;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 24px; font-family: georgia,serif;
        color: purple; font-weight: normal;
        font-variant: small-caps; text-align: right;}
    h2 {font-size: 20px; font-family: georgia,serif;
        color: green; font-variant: small-caps; text-align: center;}
    --></style>
</head>
<body>
<h1>A Sample Level 1 Heading (Right-Aligned)</h1>

<h2>A Sample Level 2 Heading (Centered)</h2>

</body>
</html>

See how this example renders

vertical-align Property

Property	Usage and Effect	Values Accepted	Replaces	Recommendations
vertical-align	Controls the vertical alignment of content inside an element; sometimes will cause content to align in a certain direction relative to the element (for example, with images).	top \| middle \| bottom	Deprecated align attribute for <img />. Also replaces valign for <tr>, <td>, and <th> tags.	Works well with images, table cells, and form elements (covered in INP 170: Web Coding II). For other elements your results will be mixed.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Vertical-Align</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font-size: 12px;
          font-family: verdana,geneva,lucida,arial,sans-serif;}
    .topAlign {vertical-align: top;}
    .middleAlign {vertical-align: middle;}
    --></style>
</head>
<body>

<table cellpadding="5" cellspacing="0" border="1">
<tr>
  <td>
  A cell with lots of content, setting the row height
  <p>A cell with lots of content, setting the row height</p>
  A cell with lots of content, setting the row height
  <p>A cell with lots of content, setting the row height</p>
  A cell with lots of content, setting the row height
  <p>A cell with lots of content, setting the row height</p>
  </td>

  <td class="topAlign">
  Not much content, but top-aligned!
  </td>
</tr>
</table>

<p>Some middle-aligned text
   <img src="sydney2.jpg" width="113" height="150" class="middleAlign"
    alt="A view of the Sydney Opera House from a distance"  />
    And even more middle-aligned text
</p>

</body>
</html>

See how this example renders

text-decoration Property

Property	Usage and Effect	Values Accepted	Replaces	Recommendations
text-decoration	Used for text (often link) styling.	none \| underline \| overline \| underline overline \| line-through	Deprecated <s> and <strike> elements are replaced by 'line-through'. Deprecated <u> element replaced by 'underline'.	Users assume that underlined text is a link, so only underline links!

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Text-Decoration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    a:link {color: blue;}
    a:visited {color: purple;}
    a:hover, a:focus, a:active {text-decoration: none;}
    --></style>
</head>
<body>
<p>Google is located at:
<a href="http://www.google.com">www.google.com</a></p>
</body>
</html>

See how this example renders

text-indent Property

Property	Usage and Effect	Values Accepted	Recommendations
text-indent	Used to control the indent before the first line of text in the element.	Number and a sizing unit (px, pt, em, %)	Not frequently used, but better than the numerous non-breaking spaces used in years past. Gecko-based browsers and Opera only support this for block-level elements; IE accepts it for inline as well as block-level elements.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Text-Indent</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    .indent {text-indent: 30px;}
    --></style>
</head>
<body>
<p class="indent">The first line of text is indented<br />but not the
second line of text</p>

<p><span class="indent">Some browsers ignore text-indent when it is
applied to an inline element.<br />Others apply it normally.</span></p>
</body>
</html>

See how this example renders

text-transform Property

Property	Usage and Effect	Values Accepted	Recommendations
text-transform	Used to change text from its original case to another case.	none \| capitalize \| uppercase \| lowercase	Not frequently used, but could be helpful in cases where users are entering data as free text and you want the end result to display consistently.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Text-Transform</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    .upper {text-transform: uppercase;}
    .lower {text-transform: lowercase;}
    .capitals {text-transform: capitalize;}
   --></style>
</head>
<body>
<p class="upper">Original text is in sentence capitalization</p>

<p class="lower">Original text is in sentence capitalization</p>

<p class="capitals">Original text is in sentence capitalization</p>
</body>
</html>

See how this example renders