CSS Text and Layout
Published: 2021-07-31 12:43:14

---
title: CSS Text and Layout
published: true
date: 2021-04-20 01:16:04 UTC
tags: 
canonical_url: https://www.devwares.com/blog//css-text-and-layout
series: Devwares Web development Free Course
---

 **CSS Text and Layout max-width**

CSS has many properties used to format text.

[![Contrast Bootstrap UI Kit](http://github.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)

**Text Color:** The [color](https://www.devwares.com/tailwindcss/classes/tailwind-text-color/#:~:text=Tailwind%20CSS%20includes%20color%20variants,a%20darker%20shade%20of%20red.&text=This%20text%20has%20a%20lighter%20shade%20of%20green%20color.) property is used to set the color of the text. The color is specified by:

- A color name - like "red"

- A HEX value - like "#ff0000"

- An RGB value - like "rgb(255,0,0).

The default text color for a page is defined in the body selector.

**CSS Code:**

```css
body {
  color: blue;
}
h1 {
  color: green;
}

```

**Text Alignment:** The [text-align](https://www.devwares.com/tailwindcss/classes/tailwind-text-align/) property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.

**CSS Code:**

```css
h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}
div {
  text-align: justify;
}

```

When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

**Text Direction:** The direction and unicode-bidi properties can be used to change the text direction of an element

**CSS Code:**

```css
p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
```

**Vertical Alignment:** The vertical-align property sets the vertical alignment of an element.

**CSS Code:**

```css
img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

```

**Text Decoration:** The [text-decoration](https://www.devwares.com/tailwindcss/classes/tailwind-text-decoration-style/) property is used to set or remove decorations from text. The value text-decoration: none; is often used to remove underlines from links:

**CSS Code:**

```css
a {
  text-decoration: none;
}
h1 {
  text-decoration: overline;
}
h2 {
  text-decoration: line-through;
}
h3 {
  text-decoration: underline;
}

```

**Text Transformation:** The [text-transform](https://www.devwares.com/tailwindcss/classes/tailwind-transform/) property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word

**CSS Code:**

```css
p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

```

**Text Indentation:** The [text-indent](https://www.devwares.com/tailwindcss/classes/tailwind-text-indent/) property is used to specify the indentation of the first line of a text

**CSS Code:**

```css
p {
  text-indent: 50px;
}

```

**Letter Spacing:** The [letter-spacing](https://www.devwares.com/tailwindcss/classes/tailwind-letter-spacing/) property is used to specify the space between the characters in a text.

**CSS Code:**

```css
h1 {
  letter-spacing: 3px;
}
h2 {
  letter-spacing: -3px;
}

```

**Line Height:** The [line-height](https://www.devwares.com/tailwindcss/classes/tailwind-lineheight/) property is used to specify the space between lines

**CSS Code:**

```css
p.small {
  line-height: 0.8;
}
p.big {
 line-height: 1.8;
}

```

**Word Spacing:** The [word-spacing](https://www.devwares.com/tailwindcss/classes/tailwind-word-break/) property is used to specify the space between the words in a text.

**CSS Code:**

```css
h1 {
  word-spacing: 10px;
}
h2 {
  word-spacing: -5px;
}

```

**White Space:** The [white-space](https://www.devwares.com/tailwindcss/classes/tailwind-whitespace/) property specifies how white-space inside an element is handled.

**CSS Code:**

```css
p {
  white-space: nowrap;
}

```

This shows how disable text wrapping inside an element.

**Text Shadow:** The text-shadow property adds shadow to text.

**CSS Code:**

```css
h1 {
  text-shadow: 2px 2px 5px red;
}

```

In this code, you add shadow, color and a blur effect(5px). Using [width](https://www.devwares.com/tailwindcss/classes/tailwind-width/), [max-width](https://www.devwares.com/tailwindcss/classes/tailwind-max-width/) and [margin](https://www.devwares.com/tailwindcss/classes/tailwind-margin/): auto; As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins Using max-width will improve the browser's handling of small windows. This is important when making a site usable on small devices:

Here is a code for two different divs that's shows the function of the max-width.

**CSS Code:**

```css
div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

```


###Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking [here](https://cdbootstrap-demo.netlify.app).

![Contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuz057uo4vkmvma7bdom.png)

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about [contrast](https://www.devwares.com/product/bootstrap-contrast-pro).

## Resources 
- [Contrast Design Bootstrap](https://www.devwares.com/docs/contrast/javascript/index/)
- [Accordion](https://www.devwares.com/docs/contrast/javascript/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/javascript/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/javascript/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/javascript/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/javascript/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/javascript/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/javascript/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/javascript/components/buttonGroup/)
- [Button](https://www.devwares.com/docs/contrast/javascript/components/buttons/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/javascript/components/buttonToolbar/)
- [Card](https://www.devwares.com/docs/contrast/javascript/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/javascript/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/javascript/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/javascript/components/collapse/)
- [DataTable](https://www.devwares.com/docs/contrast/javascript/components/datatables/)
- [DatePicker](https://www.devwares.com/docs/contrast/javascript/components/datepicker/)
- [DropDown](https://www.devwares.com/docs/contrast/javascript/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/javascript/components/footer/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/components/forms/)
- [Icon](https://www.devwares.com/docs/contrast/javascript/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/javascript/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/javascript/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/javascript/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/javascript/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/javascript/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/javascript/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/javascript/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/javascript/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/javascript/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/javascript/components/panels/)
- [Pop Over](https://www.devwares.com/docs/contrast/javascript/components/popover/)
- [Progress](https://www.devwares.com/docs/contrast/javascript/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/javascript/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/javascript/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/javascript/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/javascript/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/javascript/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/javascript/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/javascript/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/javascript/components/switch/)
- [Table](https://www.devwares.com/docs/contrast/javascript/components/table/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/javascript/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/javascript/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/javascript/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/javascript/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/javascript/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/javascript/table/datatables/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/javascript/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/javascript/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/javascript/widgets/)