CSS

Cascading Style Sheet

---

<link rel="stylesheet" href=".css">

Link html to stylesheet

General format

/* selected tag{
	property: value;
}*/

h1{
    color: blue;
    color: rgb(255,255,255);
    color: #FFFFFF;
    color: rgba(255,255,255,1);
}

---

div{
    background: url() or color;
    border-color: orange;
    border-width: 4px
    border-style: double;
}

Selectors

.firstDiv{  /* classes start with .(dot)*/
}

#singleDot{ /* ids start with # and are unique*/
}

*{ /*selects all the elemnents. Overrides everything except ids */
}

h3 + ul{ /*select all unordered list next to h3. Adjacent Siblings*/
	border: 4px dotted purple;
}

li a{ /* all anchor tag inside list*/
}

li a[href='www.facebook.com']{ /* anchor that with specific link inside the list*/
}

Learn more about selectors :https://www.w3schools.com/cssref/css_selectors.asp

---

Specificity

Hierarchy of CSS styling

Learn more about it:
https://designshack.net/articles/css/what-the-heck-is-css-specificity/

---

Fonts

h1{
    font-family:"Arial";
    font-family: monospace;
    font-size: 10px;  
    text-align: center;
    font-style: italic;
    font-weight: bold;
}
#two{
    font-size: 2.0em /* sets font ratio 2:1 */
}
1em = 16px
2em = 32px 	
...

Check font availability: https://www.cssfontstack.com/

Download Fonts
(Free) : https://fonts.google.com/
(Might not be Free) https://fontlibrary.org/

---

Box Model

#box{
    border: 4px solid blue;
    width: 25%; /* take 25% of browser*/
    text-align: center
    /*top, right, bottom, left*/
    margin: 10px 20px 10px 20px;
    padding: 10px;
}

---

For Fun

Color Scheme Generator: https://coolors.co/