Added CSS in docs

docs/CSS/Selectors.md

@@ -0,0 +1,75 @@
+# CSS Selectors
+
+CSS selectors are patterns used to select and style HTML elements. Selectors target specific elements based on their type, class, ID, attributes, or position in the document. Here are some common types of CSS selectors:
+
+## 1. Element Selector
+
+Selects HTML elements based on their element type.
+
+Example:
+```css
+p {
+    color: blue;
+}
+```
+This will select all `<p>` elements and make their text blue.
+## 2. Class Selector
+
+Selects elements with a specific class attribute.
+
+Example:
+```css
+.my-class {
+    font-weight: bold;
+}
+```
+This will select all elements with `class="my-class"` and make their text bold.
+## 3. ID Selector
+
+Selects a single element with a specific ID attribute.
+
+Example:
+```css
+#my-id {
+    background-color: yellow;
+}
+```
+This will select the element with `id="my-id"` and give it a yellow background.
+
+## 4. Attribute Selector
+
+Selects elements based on their attribute values.
+
+Example:
+
+```css
+input[type="text"] {
+    border: 1px solid #ccc;
+}
+```
+This will select all `<input>` elements with `type="text"` and give them a 1px solid border with color #ccc.
+
+## 5. Pseudo-Classes 
+
+Selects elements based on their state or position.
+
+Example:
+```css
+a:hover {
+    color: red;
+}
+```
+This will select all `<a>` elements when hovered over and make their text red.
+
+## 6. Pseudo-elements
+
+Selects and styles a part of an element.
+Example:
+
+```css
+
+p::first-line {
+    font-weight: bold;
+}
+```
+This will select and make the first line of all `<p>` elements bold.

docs/CSS/basic-syntax.md

@@ -0,0 +1,10 @@
+## Basic Syntax
+
+CSS (Cascading Style Sheets) follows a simple syntax for styling HTML elements. Each CSS rule consists of a selector, followed by a set of declarations enclosed in curly braces.
+
+Example CSS rule:
+
+```css
+selector {
+    property: value;
+}

docs/CSS/readme.md

@@ -0,0 +1,46 @@
+# Cascading Style Sheets
+
+## Topics Covered in CSS
+
+### 1. Basic Syntax
+Understanding the structure and syntax of CSS rules, including selectors, properties, and values.
+
+### 2. Selectors
+Different types of selectors to target HTML elements for styling, such as element selectors, class selectors, ID selectors, attribute selectors, pseudo-classes, and pseudo-elements.
+
+### 3. Box Model
+Understanding the box model, which describes how elements are structured in CSS, including content, padding, border, and margin.
+
+### 4. Typography
+Styling text elements with properties like font-family, font-size, font-weight, line-height, text-align, text-decoration, and text-transform.
+
+### 5. Colors and Backgrounds
+Applying colors to elements using properties like color, background-color, opacity, gradients, and background images.
+
+### 6. Layout
+Creating layouts and positioning elements using properties like display, position, float, flexbox, and grid.
+
+### 7. Responsive Design
+Designing web pages that adapt to different screen sizes and devices using techniques like media queries and responsive units (like percentages and ems).
+
+### 8. Transitions and Animations
+Adding dynamic effects to elements with properties like transition, animation, and keyframes.
+
+### 9. Transforms
+Modifying the appearance of elements in 2D or 3D space using properties like transform, translate, rotate, scale, and skew.
+
+### 10. Pseudo-classes and Pseudo-elements
+Understanding and using pseudo-classes (:hover, :focus, :active) and pseudo-elements (::before, ::after) to style elements based on their state or create decorative elements.
+
+### 11. Selectors Specificity and Inheritance
+Understanding how CSS specificity affects which styles are applied to elements and how inheritance works in CSS.
+
+### 12. Units
+Understanding different units of measurement in CSS, including pixels, percentages, ems, rems, viewport units, and others.
+
+
+## 13. Frameworks and Preprocessors
+Familiarity with CSS frameworks (like Bootstrap, Foundation) and preprocessors (like Sass, Less) to streamline and enhance the CSS development process.
+
+## 14. CSS Grid and Flexbox
+Comprehensive knowledge of CSS Grid and Flexbox layout models for creating complex and responsive layouts.