# Texts and Fonts Property

CSS text and font properties are helpful to make our webpage much more beautiful. Here I will be explaining you texts and fonts properties in CSS that can be useful at times.

## **Text Properties**

1. ### **Color:**
    

* The `color` property sets the color of the text content within an HTML element.
    
* You can specify the color using various formats, such as:
    
    * **Named colors** (e.g., `red`, `blue`, `green`)
        
    * **Hexadecimal values** (e.g., `#FF0000` for red)
        
    * **RGB values** (e.g., `rgb(255, 0, 0)` for red)
        
    * **HSL values** (e.g., `hsl(0, 100%, 50%)` for red)
        

```css
p {
  color: blue;
}
```

2. ### **Text Alignment (**`text-align`):
    

* The `text-align` property controls the horizontal alignment of text within an element.
    
* There are four values in this properties, such as:
    
    `left`: Aligns text to the left (default).
    
* `right`: Aligns text to the right.
    
* `center`: Centers text horizontally.
    
* `justify`: Adjusts spacing between words to create even right and left margins.
    

```css
h1 {
  text-align: center;
}
```

3. ### **Text Decoration:**
    

* Text decoration properties control how text is visually styled with lines or other effects.
    
* Here are few properties used for decorating text:
    

1. `text-decoration-line`:
    

* Specifies the type of decoration.
    
* There are four values in this property, such as: `none`, `underline`, `overline` and `line-through`.
    
* They can be used in a combination, for example: `text-decoration-line: underline overline line-through;` .
    

```css
a {
    text-decoration-line: underline;
}
p {
    text-decoration-line: underline overline;
}
```

2. `text-decoration-color`:
    

* Sets the color of the text decoration lines.
    

```css
a {
  text-decoration-color: red;
}
```

3. `text-decoration-style`:
    

* Determines the style of the text text decoration lines.
    
* Most heard values: `dotted`, `solid`, `dashed` and `none`.
    

```css
a {
  text-decoration-style: dashed;
}
```

4. `text-decoration-thickness`:
    

* Specifies the thickness of the text decoration lines.
    

```css
a {
  text-decoration-thickness: 2px;
}
```

5. `text-decoration`:
    

* This is a shorthand for using all four text decoration properties, it combines all four decoration properties into one property.
    

```css
a {
  text-decoration: underline red dashed;
}
```

4. ### **Text transform**
    

* The `text-transform` property modifies the capitalization of the text.
    
* There are four values in this property, such as:
    
    `none`: No capitalization changed (default).
    
    `uppercase`: Converts whole text into uppercase.
    
    `lowercase`: Converts whole text into lowercase.
    
    `capitalize`: Capitalizes the first letter of each word.
    

```css
.uppercase-text {
  text-transform: uppercase;
}
```

5. ### **Text indent**
    

* The `text-indent` property specifies the indentation of the first line of text within an element.
    
* It is commonly used for creating paragraph indentation.
    
* It allows you to control how much space is added before the first line of text.
    
* You can use either fixed lengths such as `px`, or percentage.
    
* Negative values are allowed, which will indent the first line to left.
    

```css
p {
  text-indent: 2em; /* Indent the first line by 2em */
}
```

6. ### **Letter spacing:**
    

* The `letter-spacing` property controls horizontal spacing between individual characters in a text.
    
* Positive values increase the space between characters, while negative values bring them closer together.
    
* You can specify the spacing using fixed lengths such as `px`, or unit-less numbers, such as `em`
    

```css
h1 {
  letter-spacing: 0.3em; /* Add extra space between letters */
}
```

7. ### **Line height**
    

* The `line-height` property sets the height of a line within a block a text.
    
* It affects the vertical spacing between lines.
    
* You can use unit-less number, fixed lengths and percentage.
    

```css
p {
  line-height: 1.5; /* Set line height to 1.5 times the font size */
}
```

8. ### **Word spacing**
    

* The `word-spacing` property controls the space between words in a text.
    
* Positive values increases the space between words, while negative values reduces it.
    
* You can specify the spacing using fixed lengths.
    

```css
p {
  word-spacing: 10px; /* Add extra space between words */
}
```

9. ### **Text shadow**
    

* The `text-shadow` property adds a shadow effect to text.
    
* You can specify the horizontal and vertical offsets, blur and color of the shadow.
    
* Multiple shadows can be applied.
    

```css
h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow to the text */
}
```

## **Font properties**

1. ### **Font size**
    

* The `font-size` property sets the size of the text.
    
* You can specify the values in `px`, `em`, `rem` and `vh` etc.
    

```css
p {
  font-size: 16px; /* Set font size to 16 pixels */
}
```

2. ### **Font weight**
    

* The `font-weight` property determines how thick or thin the text should appear in display.
    
* It accepts values such as: `normal`, `bold`, `bolder`, and numeric values from `100` (thinnest) to `900` (thickest).
    

```css
h1 {
  font-weight: bold; /* Set bold font weight */
}
```

3. ### **Font family**
    

* The `font-family` property specifies a prioritized list of font family names or generic family names for the selected element.
    
* You can include multiple fonts separated by commas.
    
* Always ends with a generic family such as: `serif` and `sans-serif` etc. to ensure if special fonts that we are using are not downloaded in clients browser then to use these default fonts to show our content.
    

```css
body {
  font-family: <your-font-name>, Arial, sans-serif;
}
```

4. ### **Font style**
    

* The `font-style` property sets whether a font should be styled with a normal, italic or oblique face from its `font-family`.
    
* It accepts values like `normal`, `italic` and `oblique`.
    

```css
em {
  font-style: italic; /* Applies italic style */
}
```

<mark>Using these properties in CSS can make the appearance much better, most of these values are not used, but sometimes they can come in handy.</mark>

## **(BONUS) Using fonts from your local directory**

1. Download the font that you want to use on your webpage.
    
2. Create a fonts folder inside your project.
    
3. Define the font using `@font-face` in your CSS.
    

```css
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
}
```

* Inside the `font-family` give a custom name that you want the font to be called.
    
* Inside the `src` set up your folder location.
    

4. Use this font anywhere you want.
    

```css
body {
  font-family: 'MyCustomFont', sans-serif;
}
```

<mark>Sometimes you would want to use your custom font in your website hence this method will always come in handy.</mark>