Enough CSS to get started
Tags: css
Published: 2021-09-03 12:16:17

CSS is a nightmare even for seasoned developers. A small property can change the entire flow of a website. So, here are some of the basic properties and rules to get started.

There are three ways to write CSS code. Inline, Internal, External.For all the same code written in all three, the hierarchy of code is,
                 **Inline>Internal>External**

>**Always write Css code in alphabetical order.**

Basic Syntax of css code is: 
**selector { property: value; }**

Selector is the tag that is used , property is what about the tag you want to change and value is the how you want to change it.

```css
body {
     background-color: khaki;
 }
```


Most common selectors are,
**1. Tag (used to select the element with tag name)**
```css
main{
   padding: 10px;
}
```

**2. Class selector**
```css
.main {
  color: aqua;
}

.circular {
  border-radius: 10%;
}
```

**3. Id selector**
```css
#myName {
  color: red;
}
```


**4. Pseudo Class selector**
```css
h3:hover {.
  color: #66bfbf;
  background-color: gold;
}
```

***

**CSS Box Model**
>Every single element in Css is made of box. You can style the margin, height, width, padding.

![Alt text of image](https://1.bp.blogspot.com/-wb6h_M_8w-Q/X1H_7n16nPI/AAAAAAAAALg/tpOm18NHGNAmjSfdiKRuVgCzRVHPCwYewCLcBGAsYHQ/w625-h364/Box%2BModel.png)

**Margin** gives space between two or more elements.

**Padding** gives space between border and content of element.

>Chrome developer tools is extremely useful to understand box model of a particular element. 

***
Display Property allows user to set the type of display box your element wants to be.

**display: inline;**
Inline property will take away the ability to change the width of box.

**display: block;**
Using block property will allow user to change the width.

**display: inline-block;**
Inline block is a mixture of block and inline property.

**display: none;**
None property will remove element from document tree.

***

**Positioning**

>**Static**

This is the default position of element.
```css
body {
   position: static;
}
```

>**Relative**

Relative position allows you to move element relative to its original position. **top, left, bottom, right** property can be used to move it position. It only affects the particular element. Doesn't affect any other element.
```css
main {
   position: relative;
}
```

>**Absolute**

Absolute position allows you to move element to the right or left to its parent element. This will only work if the parent element has a relative property. Parent doesn't always have to be the body. It can also be the closest parent.
```css
main {
   position: relative;
}

div {
   position: absolute;
}
```

>**Fixed**

Fixed element will stay in its current position even when scrolling. Mostly used for sidebar and navbar.


***

**Units**

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

Most common used properties are **px, rem, ex, vh, vw, vmin, vmax.**

This is just enough bare enough to get you started with CSS.
Try making some static websites with this properties and you can also make your own css library.

CSS is endless, so get the basics right