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. 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; +} 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. diff --git a/docs/CSS/readme.md b/docs/CSS/readme.md new file mode 100644 index 000000000..191b7ecfb --- /dev/null +++ b/docs/CSS/readme.md @@ -0,0 +1,61 @@ +# Cascading Style Sheets + +## 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. + +## 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. 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. 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. Box Model: +Describes the rectangular boxes generated for elements in the document tree. +Components: content, padding, border, and margin. + +5. Layouts: +Techniques to arrange elements on the page, such as Flexbox and Grid Layout. +Provides powerful tools for creating complex and responsive designs. + +## Usage Examples + +1. Inline CSS: + +Applied directly to an HTML element using the style attribute. +```html +

Hello World

+``` + +2. Internal CSS: + +Defined within a ` + +``` + +3. External CSS: + +Linked via a separate .css file, using the `` tag. + +```html + + + +``` +