✒️ let's be more professional

added the way how to import CSS into HTML and the basic Syntax and what are the selectors.
closes #23
closes #24
closes #25

Front-End/CSS/Readme.md

@@ -26,4 +26,71 @@
 
 - ## Prerequisites
 
-  Learn HTML, CSS is used to style the HTML structure you wrote before so, you should learn how to deal with HTML before you learn CSS.
+  Learn HTML, CSS is used to style the HTML structure you wrote before so, you should learn how to deal with HTML before you learn CSS.
+
+----------------------------------------------------------------
+
+- ## How to import CSS into HTML
+
+  we have 3 methods to style the HTML with CSS or to apply our CSS styles to the HTML structure:
+
+  1. **Inline Method:** We just add the style inside the target element.
+
+      ```html
+      <div style="background-color: blue;">
+      ```
+
+  2. **Internal Method:** We create a new element `<style>` and we add the style inside it.
+      ```html
+        <style>
+        div {
+          background-color: blue;
+        } 
+        </style>
+      ```
+  3. **External Method:** We add the path of the CSS file containing all our CSS styles inside the `<link>` element. 
+      ```html 
+        <link rel="stylesheet" href="path/to/the/file">
+      ```
+
+----------------------------------------------------------------
+
+- ## Basic Syntax
+  As shown above, the main syntax for writing CSS is as follows:
+
+  ```
+    Selector {
+      Property: Value;
+      another-property: Value;
+    }
+  ```
+  so we are going to learn what are the selectors and properties and how to add values to the properties.
+
+----------------------------------------------------------------
+
+- ## Selectors
+  Selectors are divided into 3 types:
+
+  1. **Element name:** Just type the target element name and start styling.
+
+      ```css 
+        div {
+          // style
+        }
+      ```
+  2. **Class name:** First you need to specify the class name for the target element in the html code and then use this class name with a `.` before it.
+      ```css
+        .firstclass {
+          // style
+        }
+      ``` 
+  3. **ID name:** Same as above, you need to specify the ID for the target element in the html code and then use this ID name with a `#` before it.
+      ```css
+      #firstID {
+        // style
+      }
+      ```
+
+  - So, what is the difference between ID and class?
+
+    :arrow_right: the class attribute can be specified to more than one element making them as a group and we can style them all together with the same code, on the other hand, the ID attribute can be specified to a single element only and styling this ID means that we style this element only.

My-Project (WatchWeb)/index.html

@@ -8,7 +8,7 @@
     <meta name='viewport' content='width=device-width, initial-scale=1' />
 
     <title>WatchWeb</title>
-    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+    <link rel='stylesheet' type='text/css' media='screen' href='css/main.css'>
     <script src='main.js'></script>
 </head>
 

README.md

@@ -38,6 +38,7 @@
   | Session 6 | <ul> <li> [Events](./Back-End/Node.js/event) </li> <li> [File System](./Back-End/Node.js/file%20system) |
 
 
+----------------------------------------------------------------
 
 - ## What You Need To Learn These Technologies?
 
@@ -49,6 +50,21 @@
   - Start any idea (ideas for projects you do within the tutorial)
   - Always search before asking.
 
+----------------------------------------------------------------
+- ## Road Maps
+    - Front End Developer:
+      1. HTML.
+      2. CSS.
+      3. JavaScript.
+      4. React.js or Angular.js of Vue.js.
+    - Back End Developer:
+      - JavaScript
+        1. HTML (Optional).
+        2. CSS (Optional).
+        3. JavaScript.
+        4. Node.js.
+
+----------------------------------------------------------------
 - ## How to contribute 🤝
 
   1. Choose an issue and comment on it that you will take this issue.