The Complete CSS Tags Reference - CSS Cheatsheet
Tags: webdev, css, codenewbie, beginners
Published: 2021-11-09 08:22:57

If you are using CSS for frontend web development, you may be interested in this article. The gist of the article is that you will be able to know all major CSS tags, their properties and their values.

### Text

- **text-align**
```css
 .container {
   text-align: justify;
}
```
 **left**  - Aligns the text to the left
**right** - Aligns the text to the right
**center** - Centers the text
**justify** - Stretches the lines so that each line has equal width (like in newspapers)
**initial** - Sets this property to its default value.
- **text-decoration**
```css
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

h4 {
  text-decoration: underline overline;
}
```
- **text-transform**

```css
.container {
  text-transform: uppercase | lowercase | capitalize;
}
```
**none** - No capitalization
**capitalize** - Transforms the first character of each word to uppercase
**uppercase** - All characters transform to uppercase
**lowercase** - All characters transform to lowercase

- **text-indent**
```css
.container{
  text-indent: 1cm;
}
```
- **word-spacing**
```css
 .container{
   word-spacing: 0.9em;
}
```

### Background Tags
- **background-image**
```css
 .container{
   background-image: url("Path");
}
```
- **background-position**
```css
 .container{
   background-position: right | top | bottom | left;
}
```
- **background-size**
```css
 .container{
  background-size: cover;
}
```
**auto** - Default value. The background image is displayed in its original size	
**length** - Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units	
**percentage** - Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"	
**cover** - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges	
contain	Resize the background image to make sure the image is fully visible.

(Source of information of parameters provided by : W3Schools)

- **background-repeat**
The background-repeat property sets how the background image should be repeated.

```css
 .container{
   background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
}
```
- **background-attachement**
The background-attachment property sets if an image scrolls with the the page, or fixed.
```css
 .container{
  background-attachment: scroll|fixed|local|initial|inherit;
}
```
- **background-color**
```css
 .container{
  background-color: white;
}
```
- **background**
```css
 .container{
   background: color image repeat attachment position;
}
```

### Border
-  **border-width**
```css
 .container{
  border-width: 30px;
}
```
- **border-style**
```css
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
```
**dotted** - Defines a dotted border
**dashed** - Defines a dashed border
**solid** - Defines a solid border
**double** - Defines a double border
**groove** - Defines a 3D grooved border. The effect depends on the border-color value
**ridge** - Defines a 3D ridged border. The effect depends on the border-color value
**inset** - Defines a 3D inset border. The effect depends on the border-color value
**outset** - Defines a 3D outset border. The effect depends on the border-color value
**none** - Defines no border
**hidden** - Defines a hidden border

- **border-color**
```css
 .container {
    border-color: aqua;
}
```
- **border-radius**
```css
 .container{
   border-radius: 18px;
}
```
### Box model
- **float**
```css
 .container {
    float: none;
}
```
- **clear**
```css
 .container {
    clear: both;
}
```
- **display**
```css
 .container {
    display: block | flex | inline;
}
```
- **height**
```css
 .container {
    height: fit-content;
}
```
- **width**
```css
 .container {
    width: auto;
}
```
- **margin**
```css
 .container {
    margin: top right bottom left;
}
```
- **padding**
```css
 .container {
    padding: top right bottom left;
}
```
- **overflow**
```css
 .container {
    overflow: hidden;
}
```
- **visibility**
```css
 .container {
    visibility: visible;
}
```
### Colors
- **color**
```css
 .container{
   color: black;
}
```
- **opacity**
```css
 .container{
   opacity: 2;
}
```

### Layout
- **box-align**
```css
  .container{
    box-align: start;
}
```
- **box-direction**
```css
  .container{
    box-direction: normal;
}
```
- **box-flex**
```css
  .container{
    box-flex: normal;
}
```
- **box-flex-group**
```css
  .container{
    box-flex-group: 3;
}
```
- **box-orient**
```css
  .container{
    box-orient: inline;
}
```
- **box-pack**
```css
  .container{
    box-pack: initial;
}
```
- **box-sizing**
```css
  .container{
    box-sizing: border-box;
}
```
- **max-width**
```css
  .container{
    max-width: 900px;
}
```
- **min-width**
```css
  .container{
    min-width: 600px;
}
```
- **max-height**
```css
  .container{
    max-height: 100px;
}
```
- **min-height**
```css
  .container{
    min-height: 100vh;
}
```
### Animations
- **animation-name**
```css
  .container{
    animation-name: helloworld;
}
```
- **animation-duration**
```css
 .container{
   animation-duration: 15s;
}
```
- **animation-timing-function**
```css
  .container{
    animation-timing-function: ease-in;
}
```
- **animation-delay**
```css
  .container{
   animation-delay: 25ms;
}
```
- **animation-direction**
```css
  .container{
   animation-direction: normal;
}
```
- **animation-iteration-count**

animation-iteration-count property defines the number of times an animation should be played.
```css
 .container{
   animation-iteration-count: 5;
}
```
- **animation-play-state**
```css
   .container{
     animation-play-state : running;
}
```
- **animation-fill-mode**

```css
 .container{
   animation-fill-mode : forwards;
}
```
### Transition
- **transition-property**
```css
  .container{
    transition-property: none;
}
```
- **transition-duration**
```css
   .container{
     transition-duration: 3s;
}
```
- **transition-delay**
```css
 .container{
    transition-delay: 30ms;
}
```

### List

- **list-style-type**
```css
  .container{
   list-style-type: none
}
```
- **list-style-position**
```css
  .container{
    list-style-position: 25px;
}
```
- **list-style-image**
```css
  .container{
   list-style-image: url("");
}
```

### Flex
- **order**
```css
   .container{
     order: 4;
}
```
- **flex-grow**
```css
   .container{
    flex-grow: 4;
}
```
- **flex-basis**
```css
  .container{
    flex-basis: auto;
}
```
- **flex-shrink**
```css
   .container{
     flex-shrink: 4;
}
```
### Grid

- **justify-content**
```css
  .container{
    justify-content: start | end | center | stretch | space-around | space-between
}
```
- **align-content**
```css
   .container{
     align-content: start | end | center | stretch | space-around | space-between
}
```
- **align-items**
```css
   .container{
     align-items: start | end | center | stretch;
}
```
- **justify-items**
```css
   .container{
     justify-items: start | end | center | stretch;
}
```
- **justify-self**
```css
   .container{
     justify-self: start | end | center | stretch;
}
```
- **align-self**
```css
   .container{
     justify-self: start | end | center | stretch;
}
```
- **place-self**
```css
   .container{
     place-self: start | end | center | stretch;
}
```