Sahil Rajput

Normalize CSS or CSS Reset?

https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e

---

Popular CSS Libraries

https://cssdb.co/

---

CSS reset (OR Reset CSS)

Link to the reset.css file

Normalize:(Is is far more popular than reset.css)

Link to the normalize.css file

---

p {color: red;}
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

<p class="ex1">HELLO WORLD!</p>
 <p class="ex2">HELLO WORLD!</p>
<p class="ex3">HELLO WORLD!</p>
 <p class="ex4">HELLO WORLD!</p>

---

CSS Reference -

Padding -

• Padding creates extra space within an element, while margin creates extra space around an element. - w3schools.com - CSS padding Property
• use play it in w3schools.com in the same page

The padding property is a shorthand property for:

• padding-top

• padding-right

• padding-bottom

• padding-left

---

This property can have from one to four values.

If the padding property has four values:

• padding:10px 5px 15px 20px;
  • top padding is 10px
  • right padding is 5px
  • bottom padding is 15px
  • left padding is 20px

If the padding property has three values:

• padding:10px 5px 15px;
  • top padding is 10px
  • right and left padding are 5px
  • bottom padding is 15px

If the padding property has two values:

• padding:10px 5px;
  • top and bottom padding are 10px
  • right and left padding are 5px

If the padding property has one value:

• padding:10px;

  • all four paddings are 10px

---

CSS Animatable @ w3schools.com

---

CSS box-shadow Property

Link to w3schools.com

---

CSS inherit Keyword

---

CSS Selector Reference

How TO - Alerts

Hover inside style property is not possible - Link - StackOverflow

Using border:0 - Link - StackOverflow

User Agent style sheet User agent style sheet @ StackOverflow

---

BootStrap Studio - Downloaded Tutorials

BEM - on Targets( file- check)

»>Amazing old and new css comparison Link«<

---

Emmet Cheat Sheet: https://docs.emmet.io/cheat-sheet/

---

Remove blue border from css custom-styled button in Chrome

https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

inshort:

button:focus {outline:0;}

---

Sort array of objects with their properties:

notes = [{},{},{},{}]
notes.sort((a,b)=>b.likes-a.likes) // will sort in descending order.
notes.sort((a,b)=>a.likes-b.likes) // will sort in ascending order.

Link

---