<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685109591588/128cab74-98f6-454d-b45c-cde4dd33c098.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685109612586/e7c61c35-6523-4508-b6ae-ec7be6d38c2e.png" alt class="image--center mx-auto" /></p>
<p>First, we change the color of the text with &lt;h1&gt; tag.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685109678480/3f31b5b6-4a92-4b29-b45d-fad303a21ec9.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685109700321/28a465de-01ae-407b-b54d-c2f97b25313b.png" alt class="image--center mx-auto" /></p>
<p>Now change the background color.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685109790168/ad0666bd-c3de-4a20-ad5e-5c88af826bb6.png" alt class="image--center mx-auto" /></p>
<h2 id="heading-text-align">Text-Align</h2>
<h3 id="heading-to-centre-align-the-heading">To Centre-align the heading</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685109906895/c314bb03-6def-483e-bfeb-956f9f8ff5df.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685109922862/8ecd9bbc-de75-42d0-9180-938c00f3558b.png" alt class="image--center mx-auto" /></p>
<h3 id="heading-to-justify-the-paragraph">To justify the paragraph</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110052582/19bd965c-0261-41bf-9fcb-5aff2822a274.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110074292/0e48e15d-d111-45a2-bab7-13fca5dad755.png" alt class="image--center mx-auto" /></p>
<h2 id="heading-text-decoration">Text decoration</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110179212/30e4b3e3-ebf1-47ed-b421-894f006c49c2.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110194604/39ea97d5-9813-4b92-a3e9-a352e975a97f.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110232333/f3f1bd79-ab25-44ac-9da5-f8c6b0d7b60d.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110242818/e7980ed0-8be5-42e7-a818-e5928f97ead3.png" alt class="image--center mx-auto" /></p>
<h2 id="heading-text-decoration-style">Text-decoration-style</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110361444/8fce3a05-b8f2-419a-af6d-ece086ab5089.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110381850/804df585-3ebf-43af-81c6-7b7388748f29.png" alt class="image--center mx-auto" /></p>
<h2 id="heading-text-transform">Text-transform</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110504596/d9c7f2ba-7289-4215-982f-f8613c46dec8.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110517248/45898b3c-eec0-46f7-8a96-516a68880d9a.png" alt class="image--center mx-auto" /></p>
<h2 id="heading-text-indent">Text-indent</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110668876/fde6fc10-9e12-40e8-91db-6af9f4443906.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110683289/dc2560b0-08a5-46af-a5f0-37b16caa25f5.png" alt class="image--center mx-auto" /></p>
<h2 id="heading-letter-spacing-and-line-height"><strong>Letter-spacing</strong> and <strong>line-height</strong></h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110801705/be1389a6-1509-4f2b-8942-4f3bb335c9f5.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685110815081/ae530a7a-e683-4a8d-9ea3-0bf93816acf9.png" alt class="image--center mx-auto" /></p>
<h2 id="heading-text-shadow">Text-shadow</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685111113352/e73f4562-25eb-469d-99b7-dd86a6660b1c.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685111124752/dcd44876-4900-4d0e-bc8c-822b9d7fdeea.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685111264215/d25d3b46-ebbc-4427-9365-88849c118b11.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685111274030/3417663f-3f74-4c70-addf-a149ba40bf9f.png" alt class="image--center mx-auto" /></p>
<h2 id="heading-font-family">Font-family</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685111538161/94fd1c22-759c-4bb4-9ce8-0eaa9b551513.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685111550026/e6133429-853d-4cda-b7c9-b7f7224fab30.png" alt class="image--center mx-auto" /></p>
<h3 id="heading-how-to-add-new-fonts">How to add new fonts</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685112047957/86e5aa10-9324-48d4-9f32-4758a7622eee.png" alt class="image--center mx-auto" /></p>
<p>Paste the font link above the style sheet</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685112087852/adda0e55-fe9b-4661-b298-7478586f1caa.png" alt class="image--center mx-auto" /></p>
<p>Add the font name in the CSS file</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685112112880/8d46d5ed-d316-48fb-850c-770d3accd478.png" alt class="image--center mx-auto" /></p>
<h3 id="heading-web-safe-fonts">Web safe fonts</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685112230499/62e7afa2-78d8-43ab-85cf-0582b8357987.png" alt class="image--center mx-auto" /></p>
<p>Fonts that are not enclosed within quotes are web-safe fonts. These fonts are always present in the browser.</p>
<p>In this instance, cursive is a web-safe font.</p>
<p>These fonts are also called fall-back fonts.</p>
<h3 id="heading-font-weight">Font weight</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685112540102/5c4ba990-7e41-4447-856e-d78a17ea5d36.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1685112550924/aaee06fe-8002-49c1-bb48-7f9cfd4f248c.png" alt class="image--center mx-auto" /></p>


![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685109591588/128cab74-98f6-454d-b45c-cde4dd33c098.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685109612586/e7c61c35-6523-4508-b6ae-ec7be6d38c2e.png align="center")

First, we change the color of the text with &lt;h1&gt; tag.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685109678480/3f31b5b6-4a92-4b29-b45d-fad303a21ec9.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685109700321/28a465de-01ae-407b-b54d-c2f97b25313b.png align="center")

Now change the background color.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685109790168/ad0666bd-c3de-4a20-ad5e-5c88af826bb6.png align="center")

## Text-Align

### To Centre-align the heading

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685109906895/c314bb03-6def-483e-bfeb-956f9f8ff5df.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685109922862/8ecd9bbc-de75-42d0-9180-938c00f3558b.png align="center")

### To justify the paragraph

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110052582/19bd965c-0261-41bf-9fcb-5aff2822a274.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110074292/0e48e15d-d111-45a2-bab7-13fca5dad755.png align="center")

## Text decoration

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110179212/30e4b3e3-ebf1-47ed-b421-894f006c49c2.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110194604/39ea97d5-9813-4b92-a3e9-a352e975a97f.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110232333/f3f1bd79-ab25-44ac-9da5-f8c6b0d7b60d.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110242818/e7980ed0-8be5-42e7-a818-e5928f97ead3.png align="center")

## Text-decoration-style

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110361444/8fce3a05-b8f2-419a-af6d-ece086ab5089.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110381850/804df585-3ebf-43af-81c6-7b7388748f29.png align="center")

## Text-transform

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110504596/d9c7f2ba-7289-4215-982f-f8613c46dec8.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110517248/45898b3c-eec0-46f7-8a96-516a68880d9a.png align="center")

## Text-indent

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110668876/fde6fc10-9e12-40e8-91db-6af9f4443906.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110683289/dc2560b0-08a5-46af-a5f0-37b16caa25f5.png align="center")

## **Letter-spacing** and **line-height**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110801705/be1389a6-1509-4f2b-8942-4f3bb335c9f5.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685110815081/ae530a7a-e683-4a8d-9ea3-0bf93816acf9.png align="center")

## Text-shadow

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685111113352/e73f4562-25eb-469d-99b7-dd86a6660b1c.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685111124752/dcd44876-4900-4d0e-bc8c-822b9d7fdeea.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685111264215/d25d3b46-ebbc-4427-9365-88849c118b11.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685111274030/3417663f-3f74-4c70-addf-a149ba40bf9f.png align="center")

## Font-family

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685111538161/94fd1c22-759c-4bb4-9ce8-0eaa9b551513.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685111550026/e6133429-853d-4cda-b7c9-b7f7224fab30.png align="center")

### How to add new fonts

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685112047957/86e5aa10-9324-48d4-9f32-4758a7622eee.png align="center")

Paste the font link above the style sheet

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685112087852/adda0e55-fe9b-4661-b298-7478586f1caa.png align="center")

Add the font name in the CSS file

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685112112880/8d46d5ed-d316-48fb-850c-770d3accd478.png align="center")

### Web safe fonts

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685112230499/62e7afa2-78d8-43ab-85cf-0582b8357987.png align="center")

Fonts that are not enclosed within quotes are web-safe fonts. These fonts are always present in the browser.

In this instance, cursive is a web-safe font.

These fonts are also called fall-back fonts.

### Font weight

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685112540102/5c4ba990-7e41-4447-856e-d78a17ea5d36.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685112550924/aaee06fe-8002-49c1-bb48-7f9cfd4f248c.png align="center")

Here we will see different text & font properties. How to use these properties to style the website and properties used heavily in most projects.

Reuben's blog

Reuben's blog

Text & Font Properties

Table of contents

Text-Align

To Centre-align the heading

To justify the paragraph

Text decoration

Text-decoration-style

Text-transform

Text-indent

Letter-spacing and line-height

Text-shadow

Font-family

How to add new fonts

Web safe fonts

Font weight