Quick and simple CSS cheatsheet 🔥
Published: 2021-11-12 08:05:28

## CSS
The language that we use to style an HTML document is CSS. CSS specifies how HTML elements should appear.

## CSS syntax

![CSS basics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b0ve5rt6i3h8igez848.png)
 
```css
selector{ property : value;}
```

- the selector means ***who*** = who do you want to change
- property means ***what*** = what do you want to change
- value means ***how*** = how do you want to change

> always keep your property: value pair in alphabetical order

```css
h1{
    color: red;
    font-size: 200px;
}
```

## CSS box model

![CSS box model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ud6rrzr7jpisvvyg53ky.png)
 
- css box model is a series of positioning properties designed to help with layout

- Each of the property works in a different way and positons the items with different spacing

- The box model is the most commonly used way to position items

## Padding

- the space between the content and border

### CSS Paddings - Individual sides

```css
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
```
#### works on clockwise pattern (top right bottom left)
for example,
```css
padding: 50px 30px 50px 80px;

/* is equal to */
 padding-top: 50px;
 padding-right: 30px;
 padding-bottom: 50px;
 padding-left: 80px;

```

## Border

- border is the divider between padding and the margin.
- It can be styled using a CSS property called border.

```html
<p style="border:5px solid red;">Red border</p>
```

### CSS border style
border-style property specifies what kind of border to display.[Learn more about border-style from here](https://www.w3schools.com/css/css_border.asp)

![CSS border style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3e10wzlr6uliskwj6vuf.png)

## Margin

-  Margins are used to create space around elements, outside of any defined borders.

### CSS Margins - Individual sides

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

#### works on clockwise pattern (top right bottom left)
for example,
```css
margin: 100px 100px 150px 80px;

/* is equal to */

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
```

---

## CSS selectors

- selectors are ways of grabbing and manipulating HTML

- Different selectors have different application

### Element selector

- you can select entire elements without any special characters

- This applies to all of the elements with that tag on the page

- it ranks on the bottom of the specificity index

### Class selectors

- select elements with a certain class name

- can be used on any and all elements with that class name

- can be used multiple times and is select with "." symbol

### Id selectors

- select elements with a certain Id

- can be used on any and all elements with that id name

- unlike classes, it can be only used on one element at a time,
  and is selected with the "#" symbol. However it is possible to use
  multiple time

### ID vs Class selectors

ID selectors are a little bit different from the class selectors although they do
have some similarities

> you will use the ID to identify element where there is an only a single one of them on a particular page

> *particular ID only be used once on the page*.

> *you cant have more than one id for particular elements*

> *id overrides the class and class override the element*

> *inline CSS override id and class*

> *inline style > ID > CLASS > element/tag*

> *ID can only be used once while class can be used multiple times*

---

### *pseudo selectors*

- a special type of selector that is used commonly for the interactivity of the website.

- only is visible when something is done on the Website.

```css
:hover
:first-child
:last-child
:nth-child(n)
:only-child
:link
:visited

```

## Advance selectors

### Adjacent sibbling selectors

```css
h2 + a{
    color:red;
}

```

### General common combinator/selector

```css

/* every button that is after the text area but they are in the same parent */

textarea ~ button {
    color: pruple;
}

```

### Child selectors

```css
every single li inside ul

ul > li {
    color:tomato;
}

```

## Descendent selectors

```css

/* descendent selectors */

ul li {
  color: mediumseagreen;
}

```

### Attribute selectors

The [ attribute ] selector is used to select elements with a specified attribute.

```css
a[attribute="value"] {
  background-color: yellow;
}

```

#### Types of attribute selectors

```css

img[src^="../images/"] {
  border: 10px solid black;
  width: 300;
  height: auto;
}


img[src$="../images/"] {
  border: 10px solid black;
  width: 300;
  height: auto;
}


img[src*="../images/"] {
  border: 10px solid black;
  width: 300;
  height: auto;
}

h2[class~="article-subtitle"] {
  background: black;
  color: rgb(0, 255, 123);
}

```

## CSS comments
Comments on css starts with /* and ends with */

```css
/* single line */

/* 
multi
line
*/
```

## CSS colors
[Learn more about css colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)

### CSS text color

```html
<p style="color:Tomato;">Hello there!! This text is in tomato color</p>
```
### CSS border color

```html
<p style="border:5px solid Tomato;">Hello there!! My border is in tomato color</p>
```

### CSS background colors
```html
<h1 style="background-color:Tomato;">Hello there!! I am tomato color</h1>
```
```css
body{
background-color:Tomato;
}
```

### CSS background properties

#### background-color
```css
body{
background-color:Tomato;
}
```
#### background-image
```css
body {
  background-image: url("some_image.png");
}
```
#### background-repeat
```css
body {
  background-image: url("some_image.png");
  background-repeat: repeat-x;
}
```
***NOTE:*** To repeat an image horizontally, set background-repeat: repeat-x and to repeat an image vertically, set background-repeat: repeat-y and to not repeat and image set background-repeat: no-repeat;

#### background-attachment
background-attachment property specifies whether the background image should scroll or be fixed

```css
/* background image will be at fixed position */
body {
  background-image: url("some_image.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* background image will scroll with the rest of the page */
body {
  background-image: url("some_image.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
}
```

#### background-position
background-position property sets the starting position of a background image.

![background-position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt8pzinjzv0jmho3t52z.png)
[learn more here about all background properties](https://www.w3schools.com/css/css_background_shorthand.asp)


## CSS height and width
Height and width properties are used to set the height and width of an element

![Height and width](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2j6f4gnlvkrk6125q1rm.png)
 
[CSS Height and width](https://www.w3schools.com/css/css_dimension.asp)


## CSS font

### font size
font-size property sets the size of the text
```css
p {
  font-size: 90px;
}
```

### font family
font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers and OS.

```css
p {
  font-family: "Times New Roman", "Courier New", Times, serif;
}
```

### font style

```css

/* font-style property is mostly used to specify italic text.*/
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

/*font-weight property specifies the weight of a font*/
p.normal {
  font-weight: normal;
}

p.boldd {
  font-weight: bold;
}

/*font-variant property specifies whether or not a text should be displayed in a small-caps font*/

p.normal {
  font-variant: normal;
}

p.caps{
  font-variant: small-caps;
}
```

### Float
The CSS float property specifies how an element should float.

```css
float:right;
float:left;
float:none;
float:inherit;
```

### clear
The CSS clear property specifies what elements can float beside the cleared element and on which side.

```css
clear:right;
clear:left;
clear:none;
clear:inherit;
```

### Display

```css
display:none;
```

#### Two different display :

- Inline
- Block

```css
display:inline;
display: inline-block;

```

## CSS position 
position property specifies the type of positioning method used for an element.

### position: static;
HTML elements are positioned static by default.
"position: static;" is not positioned in any special way; it is always positioned according to the normal flow of the page
```css
div.static {
  position: static;
  border: 3px solid green;
}
```

### position: relative;
position: relative; is positioned relative to its normal position.
```css
div.relative {
  position: relative;
  right: 10px;
  border: 3px solid green;
}
```

### position: fixed;
position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled
```css
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width:20px;
  border: 2px solid red;
}
```

### position: absolute;
position: absolute; is positioned relative to the nearest positioned ancestor

```css
div.relative {
  position: relative;
  width: 500px;
  height: 500px;
  border: 3px solid green;
}

div.absolute {
  position: absolute;
  top: 50px;
  right: 0;
  width: 400px;
  height: 150px;
  border: 3px solid red;
}
```

### position: sticky;
position: sticky; is positioned based on the user's scroll position

```css
div.sticky {
  position: sticky;
  top: 0;
  background-color: red;
  border: 5px solid green;
}
```


---

## CSS Flexbox

- flexbox stands for flexible box
- It is a display type that comes to a range of properties allowing you to arrange items easily
- It is an alternative to using displays,floats and other layout properties

## Flexbox components

- flexbox element is split into two main parts:
  the containers and the items
- containers are the parent elements
- flex items are the child elements

### Flex direction properties
The flex-direction property defines in which
direction the container wants to stack the flex items.
```css
flex-direction: column;
flex-direction: column-reverse;
flex-direction: row;
flex-direction: row-reverse;
```

### Flex-wrap properties
The flex-wrap property specifies whether the 
flex items should wrap or not.

```css
flex-wrap: wrap;
flex-wrap: nowrap;
flex-wrap: wrap-reverse;
flex-wrap: row wrap;
```

### Justify-content Property
The justify-content property is used to align the flex items:
```css
justify-content: center;
justify-content: flex-start;
justify-content: flex-end;
justify-content: space-around;
justify-content: space-between;
```

![image](https://user-images.githubusercontent.com/37651620/117550061-ccd6ac00-b05d-11eb-863a-4b1b0a78224c.png)

### CSS Flex Items
The direct child elements of a flex 
container automatically 
becomes flexible (flex) items.

### The order Property
The order property specifies the order of the flex items.
```html
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>
```

### Flex-grow Property
The flex-grow property specifies how much a flex item 
will grow relative to the rest of the flex items.

```html
<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>
```

### Flex-shrink Property
The flex-shrink property specifies how much a 
flex item will shrink relative to the rest of the flex items.

```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
```

### Flex-basis Property

The flex-basis property specifies the initial length of a flex item.

```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>
```

### Flex Property

The flex property is a shorthand property for the 
flex-grow, flex-shrink, and flex-basis properties.

```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>
```

### Align-self Property

The align-self property specifies the alignment for the selected 
item inside the flexible container.

The align-self property overrides the default alignment 
set by the container's align-items property.

```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>
```

![image](https://user-images.githubusercontent.com/37651620/117560434-582b5e00-b0ad-11eb-9962-925fcb29653d.png)

### Shrink, Grow and Basis

The flex-shrink CSS property sets the flex shrink factor of
a flex item. If the size of all flex items is larger
than the flex container, items shrink to fit according
to flex-shrink.

The flex-grow CSS property sets the flex grow factor of a flex item's
 main size.

The flex-basis CSS property sets the initial main size of a 
flex item. It sets the size of the content box unless 
otherwise set with box-sizing.


## Grid

- Is more manual providing you with more tools to layout a container
- It is also very focused on providing tool for both dimension(width and height)

whereas flexbox is only focused on width

```css
.grid-container {
  background-color: white;
  margin: 10px;
  height: 500px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto;
  /* start end center space-evenly*/
  /* justify-content: start; */
  /* justify-content: end; */
  justify-content: space-around;
  align-content: center;
}

.grid-item {
  color: white;
  font-size: 30px;
  text-align: center;
  width: 70px;
  line-height: 40px;
  margin: 10px;
}


```

### Grid coloumn and row gap

```css
grid-column-gap: 100px;
grid-row-gap: 100px;
grid-gap:column row;
```

## Grid column row and area

The grid-column property sets the width of the column of a grid item.

The grid-row property sets the height of the row of a grid item.

The grid-area property sets the area of a grid item. It consists of the width of the column & height of the row of a grid item.

![Row and col](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk911u7upq2njcag20us.png)
 

## GRID vs Flexbox

- similar to flexbox grid is a display type that can be used to activate
  certain type of layout feature in container element
- They are both alternative to other layout features available in css.


## Further readings

- [MDN CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [CSS tricks](https://css-tricks.com/)
- [W3 school](https://www.w3schools.com/css/default.asp)