-
-```css
-/* Named color */
-p {
- color: red;
-}
-
-/* HEX code */
-h1 {
- color: #ff5733;
-}
-
-/* RGB */
-div {
- color: rgb(255, 87, 51);
-}
-
-/* RGBA (with opacity) */
-span {
- color: rgba(255, 87, 51, 0.8);
-}
-
-/* HSL */
-a {
- color: hsl(11, 100%, 60%);
-}
-
-/* HSLA (with opacity) */
-footer {
- color: hsla(11, 100%, 60%, 0.8);
-}
-```
-
-**2. Background Color**
-
-The `background-color` property sets the background color of an element.
-
-```css
-/* Named color */
-body {
- background-color: lightblue;
-}
-
-/* HEX code */
-header {
- background-color: #333333;
-}
-
-/* RGB */
-section {
- background-color: rgb(240, 240, 240);
-}
-
-/* RGBA (with opacity) */
-nav {
- background-color: rgba(0, 0, 0, 0.5);
-}
-
-/* HSL */
-article {
- background-color: hsl(210, 100%, 95%);
-}
-
-/* HSLA (with opacity) */
-aside {
- background-color: hsla(210, 100%, 95%, 0.8);
-}
-```
-
-**3. Background Image**
-
-The `background-image` property sets an image as the background of an element. You can also control its position, size, repeat behavior, and more.
-
-```css
-/* Background image */
-body {
- background-image: url('path/to/image.jpg');
- background-repeat: no-repeat; /* Prevents image from repeating */
- background-size: cover; /* Scales image to cover the entire element */
- background-position: center; /* Centers the image */
-}
-
-/* Gradient background */
-div {
- background-image: linear-gradient(to right, red, yellow);
-}
-```
-
-**4. Background Repeat**
-
-The `background-repeat` property controls if/how a background image repeats.
-
-```css
-div {
- background-image: url('path/to/image.jpg');
- background-repeat: no-repeat; /* Do not repeat the image */
- background-repeat: repeat-x; /* Repeat the image horizontally */
- background-repeat: repeat-y; /* Repeat the image vertically */
- background-repeat: round; /* Repeat the image, but rescale to fit */
- background-repeat: space; /* Repeat the image, but add space between repetitions */
-}
-```
-
-**5. Background Size**
-
-The `background-size` property specifies the size of the background image.
-
-```css
-section {
- background-image: url('path/to/image.jpg');
- background-size: auto; /* Default, original size */
- background-size: cover; /* Scale the image to cover the element */
- background-size: contain; /* Scale the image to be contained within the element */
- background-size: 100px 200px; /* Specify exact size */
- background-size: 50% 50%; /* Specify size as a percentage */
-}
-```
-
-**6. Background Position**
-
-The `background-position` property sets the starting position of the background image.
-
-```css
-header {
- background-image: url('path/to/image.jpg');
- background-position: left top; /* Align image to top left */
- background-position: center; /* Center the image */
- background-position: 50% 50%; /* Center the image using percentages */
- background-position: 10px 20px; /* Set position using exact values */
-}
-```
diff --git a/docs/CSS/css-basics/Layout-ResponsiveDesign.md b/docs/CSS/css-basics/Layout-ResponsiveDesign.md
deleted file mode 100644
index 0ba98f43a..000000000
--- a/docs/CSS/css-basics/Layout-ResponsiveDesign.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-id: layout-responsive-design
-title: Layouts and Responsive Design using CSS
-sidebar_label: Layouts and Responsive Design using CSS
-sidebar_position: 1
-tags: [html, introduction, web development, markup language, hyper text, web pages, career opportunities, personal growth, web-development, web design, web pages, websites, career opportunities, contribute to the web, stay relevant, express yourself, learn other technologies, have fun, how to use html, steps to start using html, set up your development environment, create your first html document, learn html syntax and structure, explore html elements and-attributes]
-description: In this tutorial you will learn about layouts in CSS and also responsive design
----
-
-1. *Box Model:* The CSS box model describes the rectangular boxes that are generated for elements in the document tree. Each box consists of content, padding, border, and margin areas. The width and height of an element are calculated by adding together the content width/height, padding, and border.
-
-
-
-
-` 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 `` 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 `` 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 ` ` elements bold.
diff --git a/docs/CSS/css-basics/Typography.md b/docs/CSS/css-basics/Typography.md
deleted file mode 100644
index 76e2fca5b..000000000
--- a/docs/CSS/css-basics/Typography.md
+++ /dev/null
@@ -1,128 +0,0 @@
-# Typography
-
-Typography in CSS is an essential aspect of web design, as it greatly influences the readability, aesthetics, and overall user experience of a website. Here are the key concepts and properties related to typography in CSS:
-
-**1. Font Family**
-
-The `font-family` property specifies the typeface for the text. It can include a specific font name and one or more generic font families.
-
-```css
-body {
- font-family: 'Arial', sans-serif;
-}
-```
-
-**2. Font Size**
-
-The font-size property controls the size of the text. It can be set in various units like pixels (`px`), em units (`em`), rem units (`rem`), percentages (`%`), and more.
-
-```css
-p {
- font-size: 16px;
-}
-
-h1 {
- font-size: 2em; /* 2 times the current font size */
-}
-```
-You can check the relation between units
-
-| Unit | Description |
-| :--------: | :--------: |
-| `em` | Calculated relative to the current font size. For example, 2em indicates 2 times larger size than current element's font size. |
-| `px` | `px` stands for "pixels." It's a unit of measurement commonly used in digital design and web development to define the size of elements on a screen. |
-| `%` | Percentage (`%`) is a relative unit of measurement that expresses a value as a fraction of the parent element's size or the viewport's dimensions.For example, 50% of the width of the container. |
-| `rem` | Relative to font size of the root-element. |
-| `vw` | Viewport width (`vw`) is a relative unit of measurement that expresses a value as a fraction of the width of the browser viewport. `1vw` is equal to 1% of the width of the viewport. |
-| `vh` | Viewport height (`vh`) is a relative unit of measurement that expresses a value as a fraction of the height of the browser viewport. `1vh` is equal to 1% of the height of the viewport. |
-
-
-**3. Font Weight**
-
-The `font-weight` property defines the thickness of the characters. Common values include `normal`, `bold`, `bolder`, `lighter`, or numerical values ranging from 100 to 900.
-
-```css
-strong {
- font-weight: bold;
-}
-
-p.light {
- font-weight: 300;
-}
-```
-
-**4. Font Style**
-
-The `font-style` property allows you to italicize the text.
-
-```css
-em {
- font-style: italic;
-}
-
-p.oblique {
- font-style: oblique;
-}
-```
-
-**5. Font Variant**
-
-The `font-variant` property is used for small-caps and other typographic features.
-
-```css
-p {
- font-variant: small-caps;
-}
-```
-
-**6. Text Transform**
-
-The `text-transform` property changes the case of the text.
-
-```css
-h1 {
- text-transform: uppercase;
-}
-
-p {
- text-transform: capitalize;
-}
-```
-
-**7. Text Alignment**
-
-The `text-align` property sets the horizontal alignment of the text.
-
-```css
-div {
- text-align: center;
-}
-
-p {
- text-align: justify;
-}
-```
-
-**8. Text Decoration**
-
-The `text-decoration` property adds decorations to the text, such as underlines, overlines, and line-throughs.
-
-```css
-a {
- text-decoration: none; /* Removes underline from links */
-}
-
-del {
- text-decoration: line-through;
-}
-```
-
-**9. Text Shadow**
-
-The `text-shadow` property adds a shadow effect to the text.
-
-```css
-h1 {
- text-shadow: 2px 2px 5px gray;
-}
-```
diff --git a/docs/CSS/css-basics/basic-syntax.md b/docs/CSS/css-basics/basic-syntax.md
deleted file mode 100644
index 8975c29a9..000000000
--- a/docs/CSS/css-basics/basic-syntax.md
+++ /dev/null
@@ -1,10 +0,0 @@
-## 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;
-}