CSS Colors, Backgrounds, Borders, Margins and Padding
Tags: css, webdev, programming, tutorial
Published: 2021-07-31 14:32:01

---
title: CSS Colors, Backgrounds, Borders, Margins and Padding
published: true
date: 2021-04-20 01:16:04 UTC
tags: [css, webdev, programming, tutorial]
canonical_url: https://www.devwares.com/blog//css-colors
series: Devwares Web development Free Course
---

 **CSS Colors, Backgrounds, Borders, Margins and Padding**

CSS color property defines the text color or the foreground color of an element.

Colors are specified using predefined names such as RGB, HEX, HSL, RGBA, HSLA values.

**CSS Code:**

```css
body {
    color: #ff5722;
}

```

Colors in CSS are predefined with color name. Example are grey, red, blue, green etc. Defining color values The format for setting color values are A color keyword like "green", "yellow", "transparent", etc are used. A hex value is like "#ff0000", #00ff00", etc . A RGB value is like "rgb(255, 0, 0)"

**CSS Background color:** HTML element are set with background colors

**Code:**

```css
<h1 style ="background-color: yellow;">Hello World</h1>

```

**CSS Text Color:** Text color can also be set in CSS.

**Code:**

```css
<h1 style = "color: tomato;" > Hello world</h1>

```

**CSS Background:** This property allows CSS to add background effects for elements. We are going to look at several background properties. We have already looked at background-colors.

**Background Image:** The CSS Background image specifies the use of image on the background of an element. By default, the image is repeated in order to cover the entire element.

**CSS Code:**

```css
body {
   background-image: url("google.jpg");
}

```

**CSS Background-repeat:** Some images should only be repeated horizontally or vertically, or they will look strange

**CSS Code:**

```css
body{
    background-image: url("google.jpg");
    background-repeat: repeat-x;
}

```

The background-image can also be shown once

**CSS Code:**

```css
body{
    background-image: url("google.jpg");
    background-repeat: no-repeat;
}

```

The background-position is also used to specify the position an image should be.

**CSS Code:**

```css
body{
    background-image: url("google.jpg");
    background-repeat: no-repeat;
    background-position: right-top;
}

```

**CSS Border:** This property allows you to define the border area of an element’s box. It appears between the margin and padding of an element. It allows you to also show the style, width, and color of an element’s border. Some of the values allowed in the border property are dotted, dashed, solid, double, groove (defines a 3d grooved border), ridge, inset, outset, none, and hidden.

**CSS Code:**

```css
body {
    border-style: solid;
}

```

**Border-width:** This property shows the width of the borders. The width can be specific size(in, px, pt, cm, em, etc)

**CSS Code:**

```css
body {
    border-style: inset;
    border-width: 5px;
}

```

**Border color:** This property shows sets the color of the border. The color can be in HEX, RGB, HSL and transparent. In the case the color is not set it takes the color of the element.

**CSS Code:**

```css
p.one {
    border-style: solid;
    border-color: blue;
}

```

Border side

It is possible to specify different border for each side.

**CSS Code:**

```css
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

```

**CSS Margins:** The CSS Margin property allows you to set space around the border of an element. It’s not usually affected by background-color, it’s always transparent. CSS margin has a property for specifying the margin for each side of an element.

**CSS Code:**

```css
p {
   margin-top: 100px;
   margin-bottom: 100px;
   margin-right: 150px;
   margin-left: 80px;
}

```

**CSS Padding:** Padding is used to create space around the element’s content, inside a defined border. Individual sides of the element are also padded.

**CSS Code:**

```css
div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

```

**Padding and element width:** The width property specifies the width of the element’s content area. The content area is the portion inside the padding, border, and margin of an element. The padding added to the element when the width is also stated is calculated together to give the total width.

**CSS Code:**

```css
div {
    width: 300px;
    padding: 22px;
}

```

In these code you will see that the actual width is not 300px but 344px (300 + 22px of left padding + 22px of right padding}.


###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/)