From 1da56e56c552a34c9233d61254bbcfb907248c76 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Fri, 31 May 2024 18:41:43 +0530 Subject: [PATCH 01/10] Create readme.md --- docs/CSS/readme.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 docs/CSS/readme.md diff --git a/docs/CSS/readme.md b/docs/CSS/readme.md new file mode 100644 index 000000000..bdca16ab6 --- /dev/null +++ b/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. From 9a0b7e4f2793b2b1550ba28d1523d93e3ecb1b71 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Fri, 31 May 2024 18:42:27 +0530 Subject: [PATCH 02/10] Create basic-syntax.md --- docs/CSS/basic-syntax.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 docs/CSS/basic-syntax.md diff --git a/docs/CSS/basic-syntax.md b/docs/CSS/basic-syntax.md new file mode 100644 index 000000000..8975c29a9 --- /dev/null +++ b/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; +} From bdd97f0f6a261d048865b2801e4721e8cd18e0ec Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Fri, 31 May 2024 18:50:33 +0530 Subject: [PATCH 03/10] Create Selectors.md --- docs/CSS/Selectors.md | 75 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 docs/CSS/Selectors.md diff --git a/docs/CSS/Selectors.md b/docs/CSS/Selectors.md new file mode 100644 index 000000000..139081678 --- /dev/null +++ b/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 `

` 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. From 1eb223d8d4f658a99d45e8b5ee1d0b546bfcef6a Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Fri, 31 May 2024 22:07:52 +0530 Subject: [PATCH 04/10] Create readme.md --- docs/CSS/css-basics/readme.md | 43 +++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 docs/CSS/css-basics/readme.md diff --git a/docs/CSS/css-basics/readme.md b/docs/CSS/css-basics/readme.md new file mode 100644 index 000000000..f49c9fbb1 --- /dev/null +++ b/docs/CSS/css-basics/readme.md @@ -0,0 +1,43 @@ + +## 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. CSS Grid and Flexbox +Comprehensive knowledge of CSS Grid and Flexbox layout models for creating complex and responsive layouts. From 7080c05859536fbcc2f44c0d933133fab9902d0c Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Fri, 31 May 2024 22:08:56 +0530 Subject: [PATCH 05/10] Create Selectors.md --- docs/CSS/css-basics/Selectors.md | 75 ++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 docs/CSS/css-basics/Selectors.md diff --git a/docs/CSS/css-basics/Selectors.md b/docs/CSS/css-basics/Selectors.md new file mode 100644 index 000000000..139081678 --- /dev/null +++ b/docs/CSS/css-basics/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 `

` 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. From d74e4287f61411fe410d69f22ed7a91f8ede6627 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Fri, 31 May 2024 22:09:11 +0530 Subject: [PATCH 06/10] Delete docs/CSS/Selectors.md --- docs/CSS/Selectors.md | 75 ------------------------------------------- 1 file changed, 75 deletions(-) delete mode 100644 docs/CSS/Selectors.md diff --git a/docs/CSS/Selectors.md b/docs/CSS/Selectors.md deleted file mode 100644 index 139081678..000000000 --- a/docs/CSS/Selectors.md +++ /dev/null @@ -1,75 +0,0 @@ -# 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 `

` 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. From cc608d4292a084a072624fa7d341c1f22c19cef5 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Fri, 31 May 2024 22:09:46 +0530 Subject: [PATCH 07/10] Create basic-syntax.md --- docs/CSS/css-basics/basic-syntax.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 docs/CSS/css-basics/basic-syntax.md diff --git a/docs/CSS/css-basics/basic-syntax.md b/docs/CSS/css-basics/basic-syntax.md new file mode 100644 index 000000000..8975c29a9 --- /dev/null +++ b/docs/CSS/css-basics/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; +} From 482dee9e7a2e115f5ff2d3811126a1b2645532d7 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Fri, 31 May 2024 22:10:09 +0530 Subject: [PATCH 08/10] Delete docs/CSS/basic-syntax.md --- docs/CSS/basic-syntax.md | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 docs/CSS/basic-syntax.md diff --git a/docs/CSS/basic-syntax.md b/docs/CSS/basic-syntax.md deleted file mode 100644 index 8975c29a9..000000000 --- a/docs/CSS/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; -} From bb80bb7b14c306153abd5c1ed8253c93a53e097f Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Fri, 31 May 2024 22:16:23 +0530 Subject: [PATCH 09/10] Update readme.md --- docs/CSS/readme.md | 73 ++++++++++++++++++++++++++++------------------ 1 file changed, 44 insertions(+), 29 deletions(-) diff --git a/docs/CSS/readme.md b/docs/CSS/readme.md index bdca16ab6..e1c9af69f 100644 --- a/docs/CSS/readme.md +++ b/docs/CSS/readme.md @@ -1,46 +1,61 @@ # Cascading Style Sheets -## Topics Covered in CSS +## What is CSS +CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS defines how elements should be rendered on screen, on paper, in speech, or on other media. -### 1. Basic Syntax -Understanding the structure and syntax of CSS rules, including selectors, properties, and values. +## Core Concepts +1. Selectors: +Patterns used to select the elements to style. +Examples include element selectors (p), class selectors (.className), ID selectors (#idName), and attribute selectors ([attribute]). -### 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. +2. Properties and Values: +Define the styles to apply to selected elements. +Each property has a set of values, e.g., color: red;, font-size: 16px;. -### 3. Box Model -Understanding the box model, which describes how elements are structured in CSS, including content, padding, border, and margin. +3. Cascade and Inheritance: +Determines which styles are applied when multiple rules match the same element. +Cascade: Refers to the order of precedence based on specificity, source order, and importance. +Inheritance: Certain properties can be inherited from parent elements to children, simplifying styling. -### 4. Typography -Styling text elements with properties like font-family, font-size, font-weight, line-height, text-align, text-decoration, and text-transform. +4. Box Model: +Describes the rectangular boxes generated for elements in the document tree. +Components: content, padding, border, and margin. -### 5. Colors and Backgrounds -Applying colors to elements using properties like color, background-color, opacity, gradients, and background images. +5. Layouts: +Techniques to arrange elements on the page, such as Flexbox and Grid Layout. +Provides powerful tools for creating complex and responsive designs. -### 6. Layout -Creating layouts and positioning elements using properties like display, position, float, flexbox, and grid. +## Usage Examples -### 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). +1. Inline CSS: -### 8. Transitions and Animations -Adding dynamic effects to elements with properties like transition, animation, and keyframes. +Applied directly to an HTML element using the style attribute. +```html +

Hello World

+``` -### 9. Transforms -Modifying the appearance of elements in 2D or 3D space using properties like transform, translate, rotate, scale, and skew. +2. Internal CSS: -### 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. +Defined within a + +``` -### 12. Units -Understanding different units of measurement in CSS, including pixels, percentages, ems, rems, viewport units, and others. +3. External CSS: +Linked via a separate .css file, using the tag. -## 13. Frameworks and Preprocessors -Familiarity with CSS frameworks (like Bootstrap, Foundation) and preprocessors (like Sass, Less) to streamline and enhance the CSS development process. +```html + + + +``` -## 14. CSS Grid and Flexbox -Comprehensive knowledge of CSS Grid and Flexbox layout models for creating complex and responsive layouts. From 29ce6aa02c3d0f64d555bbf3e86c4b0d46a08fba Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Sat, 1 Jun 2024 07:39:36 +0530 Subject: [PATCH 10/10] Update readme.md --- docs/CSS/readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/CSS/readme.md b/docs/CSS/readme.md index e1c9af69f..191b7ecfb 100644 --- a/docs/CSS/readme.md +++ b/docs/CSS/readme.md @@ -36,7 +36,7 @@ Applied directly to an HTML element using the style attribute. 2. Internal CSS: -Defined within a