Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ag-sanjjeev/css-notes

This repository contains the basic and essential topics and their notes to learn the CSS as beginner.
https://github.com/ag-sanjjeev/css-notes

css css-animation css-basics css-flexbox css-grid css-layout css-notes css-properties css-reference css-responsive css-transition css3 html-css learn-css responsive-layout web-design

Last synced: about 2 months ago
JSON representation

This repository contains the basic and essential topics and their notes to learn the CSS as beginner.

Host: GitHub
URL: https://github.com/ag-sanjjeev/css-notes
Owner: ag-sanjjeev
License: mit
Created: 2024-09-03T06:32:48.000Z (4 months ago)
Default Branch: master
Last Pushed: 2024-10-16T11:22:24.000Z (3 months ago)
Last Synced: 2024-10-18T03:29:23.251Z (3 months ago)
Topics: css, css-animation, css-basics, css-flexbox, css-grid, css-layout, css-notes, css-properties, css-reference, css-responsive, css-transition, css3, html-css, learn-css, responsive-layout, web-design
Homepage: https://arathinai.blogspot.com/
Size: 37.1 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # CSS NOTES

This repository contains __the basic and essential__ topics and their notes to learn the __`CSS`__ as beginner.

*Refer the below contents, To kick start the learning of CSS. which gives you __step by step__ approach to the CSS.*

\

 

## ☰ CONTENTS 

1. [Usage](./usage.md)

2. [Introduction](./introduction.md)

	- [What is CSS?](./introduction.md#-what-is-css)

	- [How CSS works with HTML?](./introduction.md#-how-css-works-with-html)

	- [Basic syntax and structure](./introduction.md#-basic-syntax-and-structure)

	- [Selectors:](./docs/selectors.md)

		- [Element selectors](./docs/selectors.md#-element-selectors)

		- [Class selectors](./docs/selectors.md#-class-selectors)

		- [ID selectors](./docs/selectors.md#-id-selectors)

		- [Universal selector](./docs/selectors.md#-universal-selector)

		- [Descendant selectors](./docs/selectors.md#-descendant-selectors)

		- [Child selectors](./docs/selectors.md#-child-selectors)

		- [Adjacent sibling selectors](./docs/selectors.md#-adjacent-sibling-selectors)

		- [General sibling selectors](./docs/selectors.md#-general-sibling-selectors)

		- [Attribute selectors](./docs/selectors.md#-attribute-selectors)

	- [Pseudo Selectors:](./docs/pseudo-selectors.md)

		- [Structural Pseudo Selectors](./docs/pseudo-selectors.md#-structural-pseudo-selectors)

		- [State Pseudo Selectors](./docs/pseudo-selectors.md#-state-pseudo-selectors)

		- [Content Pseudo Selectors](./docs/pseudo-selectors.md#-content-pseudo-selectors)

3. [Properties and Values:](./docs/properties-and-values.md)

	- [Understanding properties](./docs/properties-and-values.md#-understanding-properties)

	- [Setting values](./docs/properties-and-values.md#-setting-values)

	- [Common properties:](./docs/properties-and-values.md#-overview)

		- [`color`](./docs/properties-and-values.md#-color)

		- [`background`](./docs/properties-and-values.md#-background)

		- [`font`](./docs/properties-and-values.md#-font)

		- [`margin`](./docs/properties-and-values.md#-margin)

		- [`padding`](./docs/properties-and-values.md#-padding)

		- [`border`](./docs/properties-and-values.md#-border)

		- [`display`](./docs/properties-and-values.md#-display)

		- [`position`](./docs/properties-and-values.md#-position)

		- [`float`](./docs/properties-and-values.md#-float)

		- [`width`](./docs/properties-and-values.md#-width)

		- [`height`](./docs/properties-and-values.md#-height)

		- [`overflow`](./docs/properties-and-values.md#-overflow)

4. [CSS Units:](./docs/css-units.md)

	- [Pixels (px)](./docs/css-units.md#-pixels)

	- [Percentages (%)](./docs/css-units.md#-percentages)

	- [Ems (em)](./docs/css-units.md#-ems)

	- [Rems (rem)](./docs/css-units.md#-rems)

	- [Viewport units (vw, vh, vmax, vmin)](./docs/css-units.md#-viewport-units)

5. [Text Styling:](./docs/text-styling.md)

	- [Font families](./docs/text-styling.md#-font-families)

	- [Font sizes](./docs/text-styling.md#-font-sizes)

	- [Font weights](./docs/text-styling.md#-font-weights)

	- [Text decoration](./docs/text-styling.md#-text-decoration)

	- [Text alignment](./docs/text-styling.md#-text-alignment)

	- [Text transforms](./docs/text-styling.md#-text-transforms)

6. [Color and Background:](./docs/color-and-background.md)

	- [Color models (RGB, HSL, HEX)](./docs/color-and-background.md#-color-models)

	- [Color Opacity](./docs/color-and-background.md#-color-opacity),

	- [Background color](./docs/color-and-background.md#-background-color)

	- [Background images](./docs/color-and-background.md#-background-images)

	- [Background positioning](./docs/color-and-background.md#-background-positioning)

	- [Background repetition](./docs/color-and-background.md#-background-repetition)

	- [Background attachment](./docs/color-and-background.md#-background-attachment)

	- [Gradient Text](./docs/color-and-background.md#-gradient-text)

7. [Layouts:](./docs/layouts.md)

	- [Block-level elements](./docs/layouts.md#-block-level-elements)

	- [Inline elements](./docs/layouts.md#-inline-elements)

	- [Inline-block elements](./docs/layouts.md#-inline-block-elements)

	- [Flexbox layout](./docs/layouts.md#-flexbox-layout)

	- [Grid layout](./docs/layouts.md#-grid-layout)

	- [Positioning](./docs/layouts.md#-positioning)

	- [Floating elements](./docs/layouts.md#-floating-elements)

8. [Borders and Outlines:](./docs/borders-and-outlines.md)

	- [Border width](./docs/borders-and-outlines.md#-border-width)

	- [Border style](./docs/borders-and-outlines.md#-border-style)

	- [Border color](./docs/borders-and-outlines.md#-border-color)

	- [Outlines](./docs/borders-and-outlines.md#-outlines)

	- [Box Shadow](./docs/borders-and-outlines.md#-box-shadow)

9. [Responsive Design:](./docs/responsive-design.md)

	- [Media queries](./docs/responsive-design.md#-media-queries)

	- [Flexible layouts](./docs/responsive-design.md#-flexible-layouts)

	- [Responsive images](./docs/responsive-design.md#-responsive-images)

	- [Fluid typography](./docs/responsive-design.md#-fluid-typography)

	- [Flexbox or Grid](./docs/responsive-design.md#-flexbox-or-grid)

	- [Important Key Points](./docs/responsive-design.md#-important-key-points)

10. [CSS Animations:](./docs/css-animations.md)

	- [Keyframes](./docs/css-animations.md#-keyframes)

	- [Animation properties](./docs/css-animations.md#-animation-properties)

	- [Animation timing functions](./docs/css-animations.md#-animation-timing-functions)

	- [Animation delay](./docs/css-animations.md#-animation-delay)

	- [Animation iteration count](./docs/css-animations.md#-animation-iteration-count)

	- [Animation direction](./docs/css-animations.md#-animation-direction)

11. [CSS Transitions:](./docs/css-transitions.md)

	- [Transition properties](./docs/css-transitions.md#-transition-properties)

	- [Transition duration](./docs/css-transitions.md#-transition-duration)

	- [Transition timing functions](./docs/css-transitions.md#-transition-timing-functions)

	- [Transition delay](./docs/css-transitions.md#-transition-delay)

	- [Shorthand Transition Property](./docs/css-transitions.md#-shorthand-transition-property)

	- [Resize Property](./docs/css-transitions.md#-resize-property)

12. [CSS Filters:](./docs/css-filters.md)

	- [Blur](./docs/css-filters.md#-blur)

	- [Brightness](./docs/css-filters.md#-brightness)

	- [Contrast](./docs/css-filters.md#-contrast)

	- [Grayscale](./docs/css-filters.md#-grayscale)

	- [Hue-rotate](./docs/css-filters.md#-hue-rotate)

	- [Invert](./docs/css-filters.md#-invert)

	- [Opacity](./docs/css-filters.md#-opacity)

	- [Sepia](./docs/css-filters.md#-sepia)

	- [Multiple Filters Effect](./docs/css-filters.md#multiple-filters-effect)

13. [CSS Clip Path Topics](./docs/css-clip-path.md)

	- [Basic Clip Path:](./docs/css-clip-path.md#-basic-clip-path)

		- [Common shape functions](./docs/css-clip-path.md#-common-shape-functions)

			- [circle](./docs/css-clip-path.md#-circle)

			- [ellipse](./docs/css-clip-path.md#-ellipse)

			- [polygon](./docs/css-clip-path.md#-polygon)

			- [inset](./docs/css-clip-path.md#-inset)

	- [Advanced Clip Path:](./docs/css-clip-path.md#-advanced-clip-path)

		- [Path Function](./docs/css-clip-path.md#-path-function)

		- [URL Function](./docs/css-clip-path.md#-url-function)

	- [Clip Rule property](./docs/css-clip-path.md#-clip-rule-property)

		- [nonzero](./docs/css-clip-path.md#-nonzero)

		- [evenodd](./docs/css-clip-path.md#-evenodd)

	- [Use Cases and Examples:](./docs/css-clip-path.md#-use-cases-and-examples)

		- [Creating custom shapes](./docs/css-clip-path.md#-creating-custom-shapes)

		- [Masking elements](./docs/css-clip-path.md#-masking-elements)

		- [Creating unique visual effects](./docs/css-clip-path.md#-creating-unique-visual-effects)

		- [Combining with other CSS properties](./docs/css-clip-path.md#-combining-with-other-css-properties)

## ⚑ Contribution

Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request. Make sure to follow the existing coding style and provide clear documentation for your changes.

## ⚑ License

This reference licensed under the [MIT license](LICENSE). Feel free to use, modify, and distribute it as per the terms of the license.

## ⚑ Contact

If you have any questions or need further assistance, please feel free to reach me by referring [My Github Profile](https://github.com/ag-sanjjeev/)

Thanks for reviewing this reference notes!