completed chap3

css - the complete guide/3. diving_deeper.md

@@ -317,3 +317,72 @@ Used to style a specific part of an element. For example `::first-letter`, `::af
 
 ## Grouping Rules
 
+We can group or combine multiple rules with same code into one to increase reusability:
+
+```css
+.main-nav__item a:hover {
+    color: white;
+}
+
+.main-nav__item a:active {
+    color: white;
+}
+
+// CAN BE WRITTEN AS
+
+.main-nav__item a:hover,
+.main-nav__item a:active {
+    color: white;
+}
+```
+
+We can group as many rules as we need separated by a comma.
+
+
+## Working With Font Weight And Border
+
+```css
+.main-nav__item a {
+    font-weight: bold;
+}
+
+.main-nav__item a:hover,
+.main-nav__item a:active {
+    color: white;
+    border-bottom: 5px solid white;
+}
+```
+
+
+## Adding And Styling A Call To Action Button
+
+```css
+.main-nav__item--cta a {
+    color: white;
+    background: #ff1b68;
+    padding: 8px 16px;
+    border-radius: 8px;
+}
+
+.main-nav__item--cta a:hover,
+.main-nav__item--cta a:active {
+    color: #ff1b68;
+    background: white;
+    border: none;
+}
+```
+
+
+## Adding A Background Image To Our Project
+
+Use the `url("")` function on `background` property to set a image. `url` takes in a string, which can be path to local file or a link to an image on internet.
+
+```css
+background: url("image.jpg");
+```
+
+
+## Properties Worth To Remember
+
+`color`, `background-color`, `display`, `padding`, `border`, `margin`, `width`, `height`.
+