From 1e310ce8d0341477f1431a3b9dc427cb12d13451 Mon Sep 17 00:00:00 2001
From: rjbasitali <rjbasitali@gmail.com>
Date: Fri, 3 Jun 2022 02:52:56 +0500
Subject: [PATCH] completed chap3

---
 css - the complete guide/3. diving_deeper.md | 69 ++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/css - the complete guide/3. diving_deeper.md b/css - the complete guide/3. diving_deeper.md
index 6cbf902..23a6b4f 100644
--- a/css - the complete guide/3. diving_deeper.md	
+++ b/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`.
+