Enough CSS to get started

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.

body {
     background-color: khaki;
 }

Most common selectors are,
1. Tag (used to select the element with tag name)

main{
   padding: 10px;
}

2. Class selector

.main {
  color: aqua;
}

.circular {
  border-radius: 10%;
}

3. Id selector

#myName {
  color: red;
}

4. Pseudo Class selector

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.

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.

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.

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.

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