In this tutorial, we will cover some of the important text styling properties:
<h2 dir="ltr">Text Decoration</h2>
The text-decoration property adds various types of text decorations.
Syntax:
<pre class="language-css"><code>selector {
 text-decoration: value;
}</code></pre>
There are four values for text-decoration:
<ul>
<li>overline: adds a line above the text</li>
<li>underline: adds a line below the text</li>
<li>line-through: Adds a line to the text.</li>
<li>none: To remove decoration.</li>
</ul>
Example:
<pre class="language-markup"><code>&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;style&gt;
 #p1 {text-decoration: overline;}
 #p2 {text-decoration: underline;}
 #p3 {text-decoration: line-through;}
 #p4 {text-decoration: overline underline;}
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id="p1"&gt;text-decoration: overline&lt;/p&gt;
 &lt;p id="p2"&gt;text-decoration: undrline&lt;/p&gt;
 &lt;p id="p3"&gt;text-decoration: line-through&lt;/p&gt;
 &lt;p id="p4"&gt;text-decoration: overline underline&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-text-styling/text-decoration.png" alt="cwh tutorial image" width="630">
<h2 dir="ltr">Text Alignment</h2>
The text alignment property is used to align the text within the container. Container can be a div, section, etc.
Syntax:
<pre class="language-css"><code>selector{
 text-align: value;
}</code></pre>
There are four values for text alignment:
<ul>
<li>left: align the text to the left.</li>
<li>centre: align the text to the centre.</li>
<li>right: align the text to the right.</li>
<li>justify: spread the text evenly between the left and right margins.</li>
</ul>
Example:
<pre class="language-markup"><code>&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;style&gt;
 #p1 {text-align: left;}
 #p2 {text-align: right;}
 #p3 {text-align: end;}
 #p4 {text-align: justify;}
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id="p1"&gt;text-align: left&lt;/p&gt;
 &lt;p id="p2"&gt;text-align: right&lt;/p&gt;
 &lt;p id="p3"&gt;text-align: end&lt;/p&gt;
 &lt;p id="p4"&gt;text-align: justify&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-text-styling/text-align.png" alt="cwh tutorial image" width="630">
<h2 dir="ltr">Text Transformation</h2>
It transforms the text case.
Syntax:
<pre class="language-css"><code>selector {
 text-transform: value;
}</code></pre>
There are four values for text-transform:
<ul>
<li>uppercase: Transform text to uppercase (all capital letters).</li>
<li>lowercase: transform text to lowercase (all small letters).</li>
<li>capitalise: capitalise the first character from each word.</li>
<li>none: To remove text transformation.&nbsp;</li>
</ul>
<pre class="language-markup"><code>&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;style&gt;
 #p1 {text-transform: uppercase;}
 #p2 {text-transform: lowercase;}
 #p3 {text-transform: capitalize;}
 #p4 {text-transform: none;}
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id="p1"&gt;text-transform: uppercase&lt;/p&gt;
 &lt;p id="p2"&gt;text-transform: lowercase&lt;/p&gt;
 &lt;p id="p3"&gt;text-transform: capitalize&lt;/p&gt;
 &lt;p id="p4"&gt;text-transform: none&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-text-styling/text-transform.png" alt="cwh tutorial image" width="630">
<h2>Letter Spacing</h2>
The letter-spacing property allows to specify the spacing between each character in the text.
The property values can be in pixels (px), em, rem, percentage (%), etc.
Example:
<pre class="language-markup"><code>&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;style&gt;
 h1{
 letter-spacing: 5px;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-text-styling/letter-spacing.png" alt="cwh tutorial image" width="630">
<h2>Line Height</h2>
The line-height property controls the spacing between the two lines of text.
Example:
<pre class="language-markup"><code>&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;style&gt;
 h1{
 line-height: 3.5;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
 &lt;h1&gt;Developer and CodeWithHarry.com founder&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
The value of 3.5 means that the space between lines will be 3.5 times the height of the font size.
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-text-styling/line-height.png" alt="cwh tutorial image" width="630">
<h2 dir="ltr">Text Shadow</h2>
The text-shadow property adds a shadow to the text.
Syntax:
<pre class="language-markup"><code>selector{
 text-shadow: Horizontal offset, vertical offset, blur radius, color;
}
</code></pre>
Example:
<pre class="language-markup"><code>&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;style&gt;
 h1{
 text-shadow: 2px 3px 4px red;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-text-styling/text-shadow.png" alt="cwh tutorial image" width="630">
<h2>Text Overflow</h2>
The text-overflow property handles text that overflows its container.
There are two values we can use with text-overflow:
<ul>
<li>ellipsis: Truncates overflowing text with an ellipsis.</li>
<li>clip: clips the text without any visual indication.</li>
</ul>

CSS Text Styling

Padding is the space between the HTML content and the border. It gives internal spacing and helps to enhance the website.
Consider the image:
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-padding/cwh-padding.png" alt="cwh tutorial image" width="630">
Here, the space between the content "CodeWithHarry" and the border is the padding.
Syntax:
<pre class="language-css"><code>selector{
 padding: value;
}</code></pre>
Padding value can be used in any of the following methods:
Method 1
<pre class="language-markup"><code>selector{
 padding: value;
}</code></pre>
Here, the padding value will apply equal padding to&nbsp;all sides (top, right, left, and bottom).
Example:
<pre class="language-markup"><code>&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;style&gt;
 #p1{
 border: 2px solid purple;
 }
 #p2 {
 padding: 12px;

 border: 2px solid red;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id="p1"&gt;CodeWithHarry (without padding)&lt;/p&gt;
 &lt;p id="p2"&gt;CodeWithHarry (with padding)&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-padding/all-sides-padding.png" alt="cwh tutorial image" width="630">
Note: Values can be specified in different units, such as pixels (px), em, rem, percentage (%), auto, etc.
If you are not familiar with borders, you can also check out the <a href="../../../tutorial/css-borders/" target="_blank" rel="noopener">CSS borders</a> tutorial.
Method 2
<pre class="language-markup"><code>selector{
 padding: value1 value2;
}</code></pre>
Here, value 1&nbsp;is the veritcal padding(y-axis) and value 2 is the horizontal padding (x-axis).
Example:
<pre class="language-markup"><code>&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;style&gt;
 #p1{
 border: 2px solid purple;
 }
 #p2 {
 padding: 20px 50px;
 border: 2px solid red;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id="p1"&gt;CodeWithHarry (without padding)&lt;/p&gt;
 &lt;p id="p2"&gt;CodeWithHarry (with padding)&lt;/p&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-padding/axis-padding.png" alt="cwh tutorial image" width="630">
Method 3
<pre class="language-markup"><code>selector{
 padding: value1 value2 value2 value4;
}</code></pre>
In this method, each value represents the padding of individual sides (top, right, bottom, left).
<ul>
<li>top: value1</li>
<li>right: value2</li>
<li>bottom: value3</li>
<li>left: value4</li>
</ul>
Example:
<pre class="language-markup"><code>&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;style&gt;
 #p1{
 border: 2px solid purple;
 }
 #p2 {
 padding: 15px 30px 25px 50px;
 border: 2px solid red;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id="p1"&gt;CodeWithHarry (without padding)&lt;/p&gt;
 &lt;p id="p2"&gt;CodeWithHarry (with padding)&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-padding/each-sides-padding.png" alt="cwh tutorial image" width="630">
In this example, the padding on individual sides is
<ul>
<li>top: 10px</li>
<li>right: 20px</li>
<li>bottom: 25px</li>
<li>left: 50</li>
</ul>
Playaround:
You can also check the padding of each HTML element(s) using the inspect tool. Follow the steps.
<ol>
<li>Right-click and click on inspect.</li>
<li>Click on the computed styles sidebar.</li>
<li>Toggle with the box model.</li>
</ol>
or follow the video.
<video autoplay="autoplay" loop="loop" muted="" controls="controls" width="630" height="296"> <source src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-padding/inspect-css-padding.mp4" type="video/mp4">Your browser does not support the video tag.</video>

CSS Padding

The CSS Box model defines how elements are rendered and how their dimensions are calculated.
It describes the structure of an element as a rectangular box that has content, padding, a border, and a margin.
The box model consists of four main components, which are
<h2>1. Content</h2>
<ul>
<li>The innermost component of the box model is the actual content of the element. It can be text, image, video, etc.</li>
<li>The content area is defined by the width&nbsp;and height properties.</li>
</ul>
<h2>2. Padding</h2>
<ul>
<li>The space between the actual content and the border of the element is the padding.</li>
<li>The padding area is defined by the property padding. For more details, follow the&nbsp;<a href="../../../tutorial/css-padding/" target="_blank" rel="noopener">CSS Padding</a> tutorial.</li>
</ul>
<h2>3. Border</h2>
<ul>
<li>The border surrounds the content and padding and gives the visual border of the element.</li>
<li>The border properties can be controlled using the border keyword. For more details, follow the&nbsp;<a href="../../../tutorial/css-borders/" target="_blank" rel="noopener">CSS Borders</a> tutorial.</li>
</ul>
<h2>4. Margin</h2>
<ul>
<li>The margin is the space outside the element that separates it from other elements in the layout.</li>
<li>The margin of the element is controlled by the margin property. For more details, follow the&nbsp;<a href="../../../tutorial/css-margin/" target="_blank" rel="noopener">CSS Margin</a> tutorial.</li>
</ul>
&nbsp;
The CSS Box model can be visually represented as:
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-box-model/box model.png" alt="cwh tutorial image" width="630">
<h3>Calculating the total dimension of the element</h3>
The total width and height of the element is calculated with the formula:
Total Width = Width + Left Padding + Right Padding + Left Border + Right Border + Left Margin + Right Margin
Total Height = Height + Top Padding + Bottom Padding + Top Border + Bottom Border + Top Margin + Bottom Margin
Example:
<pre class="language-markup"><code>&lt;head&gt;
 &lt;style&gt;
 p{
 width: 200px;
 height: 300px;
 padding: 15px;
 border: 10px solid red;
 margin: 5px;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p&gt;CodeWithHarry&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
Here, the total height and width will be represented as
Total Width = 200px (width) + 15px (left padding) + 15px (right padding) + 10px (left border) + 10px (right border) + 5px (left margin) + 5px (right margin) = 260px.
Total Height = 300px (Height) + 15px (Top Padding) + 15px (Bottom Padding) + 10px (Top Border) + 10px (Bottom Border) + 5px (Top Margin) + 5px (Bottom Margin) = 360px
&nbsp;
<h3>Playaround:</h3>
To view the dimension of any element follow the steps or video:
<ol>
<li>Right-click and click on Inspect.</li>
<li>Click on the arrow key in the top left corner.</li>
<li>Select the element</li>
<li>Unhide the computed styles sidebar.</li>
<li>Toggle the properties.</li>
</ol>
Here's a Quick Video Explaining the playaround:
<video autoplay="autoplay" loop="loop" muted="" controls="controls" width="630" height="296"> <source src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-box-model/box model.mp4" type="video/mp4">Your browser does not support the video tag.</video>

CSS Box Model