|
1 | 1 | # Cascading Style Sheets |
2 | 2 |
|
3 | | -## Topics Covered in CSS |
| 3 | +## What is CSS |
| 4 | +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. |
4 | 5 |
|
5 | | -### 1. Basic Syntax |
6 | | -Understanding the structure and syntax of CSS rules, including selectors, properties, and values. |
| 6 | +## Core Concepts |
| 7 | +1. Selectors: |
| 8 | +Patterns used to select the elements to style. |
| 9 | +Examples include element selectors (p), class selectors (.className), ID selectors (#idName), and attribute selectors ([attribute]). |
7 | 10 |
|
8 | | -### 2. Selectors |
9 | | -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. |
| 11 | +2. Properties and Values: |
| 12 | +Define the styles to apply to selected elements. |
| 13 | +Each property has a set of values, e.g., color: red;, font-size: 16px;. |
10 | 14 |
|
11 | | -### 3. Box Model |
12 | | -Understanding the box model, which describes how elements are structured in CSS, including content, padding, border, and margin. |
| 15 | +3. Cascade and Inheritance: |
| 16 | +Determines which styles are applied when multiple rules match the same element. |
| 17 | +Cascade: Refers to the order of precedence based on specificity, source order, and importance. |
| 18 | +Inheritance: Certain properties can be inherited from parent elements to children, simplifying styling. |
13 | 19 |
|
14 | | -### 4. Typography |
15 | | -Styling text elements with properties like font-family, font-size, font-weight, line-height, text-align, text-decoration, and text-transform. |
| 20 | +4. Box Model: |
| 21 | +Describes the rectangular boxes generated for elements in the document tree. |
| 22 | +Components: content, padding, border, and margin. |
16 | 23 |
|
17 | | -### 5. Colors and Backgrounds |
18 | | -Applying colors to elements using properties like color, background-color, opacity, gradients, and background images. |
| 24 | +5. Layouts: |
| 25 | +Techniques to arrange elements on the page, such as Flexbox and Grid Layout. |
| 26 | +Provides powerful tools for creating complex and responsive designs. |
19 | 27 |
|
20 | | -### 6. Layout |
21 | | -Creating layouts and positioning elements using properties like display, position, float, flexbox, and grid. |
| 28 | +## Usage Examples |
22 | 29 |
|
23 | | -### 7. Responsive Design |
24 | | -Designing web pages that adapt to different screen sizes and devices using techniques like media queries and responsive units (like percentages and ems). |
| 30 | +1. Inline CSS: |
25 | 31 |
|
26 | | -### 8. Transitions and Animations |
27 | | -Adding dynamic effects to elements with properties like transition, animation, and keyframes. |
| 32 | +Applied directly to an HTML element using the style attribute. |
| 33 | +```html |
| 34 | +<p style="color: blue; font-size: 14px;">Hello World</p> |
| 35 | +``` |
28 | 36 |
|
29 | | -### 9. Transforms |
30 | | -Modifying the appearance of elements in 2D or 3D space using properties like transform, translate, rotate, scale, and skew. |
| 37 | +2. Internal CSS: |
31 | 38 |
|
32 | | -### 10. Pseudo-classes and Pseudo-elements |
33 | | -Understanding and using pseudo-classes (:hover, :focus, :active) and pseudo-elements (::before, ::after) to style elements based on their state or create decorative elements. |
| 39 | +Defined within a <style> tag in the HTML document's <head>. |
34 | 40 |
|
35 | | -### 11. Selectors Specificity and Inheritance |
36 | | -Understanding how CSS specificity affects which styles are applied to elements and how inheritance works in CSS. |
| 41 | +```html |
| 42 | +<head> |
| 43 | + <style> |
| 44 | + p { |
| 45 | + color: blue; |
| 46 | + font-size: 14px; |
| 47 | + } |
| 48 | + </style> |
| 49 | +</head> |
| 50 | +``` |
37 | 51 |
|
38 | | -### 12. Units |
39 | | -Understanding different units of measurement in CSS, including pixels, percentages, ems, rems, viewport units, and others. |
| 52 | +3. External CSS: |
40 | 53 |
|
| 54 | +Linked via a separate .css file, using the <link> tag. |
41 | 55 |
|
42 | | -## 13. Frameworks and Preprocessors |
43 | | -Familiarity with CSS frameworks (like Bootstrap, Foundation) and preprocessors (like Sass, Less) to streamline and enhance the CSS development process. |
| 56 | +```html |
| 57 | +<head> |
| 58 | + <link rel="stylesheet" type="text/css" href="styles.css"> |
| 59 | +</head> |
| 60 | +``` |
44 | 61 |
|
45 | | -## 14. CSS Grid and Flexbox |
46 | | -Comprehensive knowledge of CSS Grid and Flexbox layout models for creating complex and responsive layouts. |
|
0 commit comments