{"id":21141988,"url":"https://github.com/ag-sanjjeev/css-notes","last_synced_at":"2025-03-14T13:15:57.742Z","repository":{"id":255627623,"uuid":"851464347","full_name":"ag-sanjjeev/CSS-Notes","owner":"ag-sanjjeev","description":"This repository contains the basic and essential topics and their notes to learn the CSS as beginner. ","archived":false,"fork":false,"pushed_at":"2025-01-29T09:54:40.000Z","size":38,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T10:32:19.220Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ag-sanjjeev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-03T06:32:48.000Z","updated_at":"2025-01-29T09:54:44.000Z","dependencies_parsed_at":"2024-11-20T07:39:47.311Z","dependency_job_id":"79763bb3-272b-4fed-a941-05b3e42f5dc3","html_url":"https://github.com/ag-sanjjeev/CSS-Notes","commit_stats":null,"previous_names":["ag-sanjjeev/css-notes"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ag-sanjjeev%2FCSS-Notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ag-sanjjeev%2FCSS-Notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ag-sanjjeev%2FCSS-Notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ag-sanjjeev%2FCSS-Notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ag-sanjjeev","download_url":"https://codeload.github.com/ag-sanjjeev/CSS-Notes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243581093,"owners_count":20314167,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-20T07:39:40.886Z","updated_at":"2025-03-14T13:15:57.645Z","avatar_url":"https://github.com/ag-sanjjeev.png","language":null,"readme":"# CSS NOTES\n\nThis repository contains __the basic and essential__ topics and their notes to learn the __`CSS`__ as beginner.\n\n*Refer the below contents, To kick start the learning of CSS. which gives you __step by step__ approach to the CSS.*\n\\\n\u0026nbsp;\n\n## \u0026#9776; CONTENTS \n1. [Usage](./usage.md)\n2. [Introduction](./introduction.md)\n\t- [What is CSS?](./introduction.md#-what-is-css)\n\t- [How CSS works with HTML?](./introduction.md#-how-css-works-with-html)\n\t- [Basic syntax and structure](./introduction.md#-basic-syntax-and-structure)\n\t- [Selectors:](./docs/selectors.md)\n\t\t- [Element selectors](./docs/selectors.md#-element-selectors)\n\t\t- [Class selectors](./docs/selectors.md#-class-selectors)\n\t\t- [ID selectors](./docs/selectors.md#-id-selectors)\n\t\t- [Universal selector](./docs/selectors.md#-universal-selector)\n\t\t- [Descendant selectors](./docs/selectors.md#-descendant-selectors)\n\t\t- [Child selectors](./docs/selectors.md#-child-selectors)\n\t\t- [Adjacent sibling selectors](./docs/selectors.md#-adjacent-sibling-selectors)\n\t\t- [General sibling selectors](./docs/selectors.md#-general-sibling-selectors)\n\t\t- [Attribute selectors](./docs/selectors.md#-attribute-selectors)\n\t- [Pseudo Selectors:](./docs/pseudo-selectors.md)\n\t\t- [Structural Pseudo Selectors](./docs/pseudo-selectors.md#-structural-pseudo-selectors)\n\t\t- [State Pseudo Selectors](./docs/pseudo-selectors.md#-state-pseudo-selectors)\n\t\t- [Content Pseudo Selectors](./docs/pseudo-selectors.md#-content-pseudo-selectors)\n\n3. [Properties and Values:](./docs/properties-and-values.md)\n\t- [Understanding properties](./docs/properties-and-values.md#-understanding-properties)\n\t- [Setting values](./docs/properties-and-values.md#-setting-values)\n\t- [Common properties:](./docs/properties-and-values.md#-overview)\n\t\t- [`color`](./docs/properties-and-values.md#-color)\n\t\t- [`background`](./docs/properties-and-values.md#-background)\n\t\t- [`font`](./docs/properties-and-values.md#-font)\n\t\t- [`margin`](./docs/properties-and-values.md#-margin)\n\t\t- [`padding`](./docs/properties-and-values.md#-padding)\n\t\t- [`border`](./docs/properties-and-values.md#-border)\n\t\t- [`display`](./docs/properties-and-values.md#-display)\n\t\t- [`position`](./docs/properties-and-values.md#-position)\n\t\t- [`float`](./docs/properties-and-values.md#-float)\n\t\t- [`width`](./docs/properties-and-values.md#-width)\n\t\t- [`height`](./docs/properties-and-values.md#-height)\n\t\t- [`overflow`](./docs/properties-and-values.md#-overflow)\n4. [CSS Units:](./docs/css-units.md)\n\t- [Pixels (px)](./docs/css-units.md#-pixels)\n\t- [Percentages (%)](./docs/css-units.md#-percentages)\n\t- [Ems (em)](./docs/css-units.md#-ems)\n\t- [Rems (rem)](./docs/css-units.md#-rems)\n\t- [Viewport units (vw, vh, vmax, vmin)](./docs/css-units.md#-viewport-units)\n5. [Text Styling:](./docs/text-styling.md)\n\t- [Font families](./docs/text-styling.md#-font-families)\n\t- [Font sizes](./docs/text-styling.md#-font-sizes)\n\t- [Font weights](./docs/text-styling.md#-font-weights)\n\t- [Text decoration](./docs/text-styling.md#-text-decoration)\n\t- [Text alignment](./docs/text-styling.md#-text-alignment)\n\t- [Text transforms](./docs/text-styling.md#-text-transforms)\n6. [Color and Background:](./docs/color-and-background.md)\n\t- [Color models (RGB, HSL, HEX)](./docs/color-and-background.md#-color-models)\n\t- [Color Opacity](./docs/color-and-background.md#-color-opacity),\n\t- [Background color](./docs/color-and-background.md#-background-color)\n\t- [Background images](./docs/color-and-background.md#-background-images)\n\t- [Background positioning](./docs/color-and-background.md#-background-positioning)\n\t- [Background repetition](./docs/color-and-background.md#-background-repetition)\n\t- [Background attachment](./docs/color-and-background.md#-background-attachment)\n\t- [Gradient Text](./docs/color-and-background.md#-gradient-text)\n7. [Layouts:](./docs/layouts.md)\n\t- [Block-level elements](./docs/layouts.md#-block-level-elements)\n\t- [Inline elements](./docs/layouts.md#-inline-elements)\n\t- [Inline-block elements](./docs/layouts.md#-inline-block-elements)\n\t- [Flexbox layout](./docs/layouts.md#-flexbox-layout)\n\t- [Grid layout](./docs/layouts.md#-grid-layout)\n\t- [Positioning](./docs/layouts.md#-positioning)\n\t- [Floating elements](./docs/layouts.md#-floating-elements)\n8. [Borders and Outlines:](./docs/borders-and-outlines.md)\n\t- [Border width](./docs/borders-and-outlines.md#-border-width)\n\t- [Border style](./docs/borders-and-outlines.md#-border-style)\n\t- [Border color](./docs/borders-and-outlines.md#-border-color)\n\t- [Outlines](./docs/borders-and-outlines.md#-outlines)\n\t- [Box Shadow](./docs/borders-and-outlines.md#-box-shadow)\n9. [Responsive Design:](./docs/responsive-design.md)\n\t- [Media queries](./docs/responsive-design.md#-media-queries)\n\t- [Flexible layouts](./docs/responsive-design.md#-flexible-layouts)\n\t- [Responsive images](./docs/responsive-design.md#-responsive-images)\n\t- [Fluid typography](./docs/responsive-design.md#-fluid-typography)\n\t- [Flexbox or Grid](./docs/responsive-design.md#-flexbox-or-grid)\n\t- [Important Key Points](./docs/responsive-design.md#-important-key-points)\n10. [CSS Animations:](./docs/css-animations.md)\n\t- [Keyframes](./docs/css-animations.md#-keyframes)\n\t- [Animation properties](./docs/css-animations.md#-animation-properties)\n\t- [Animation timing functions](./docs/css-animations.md#-animation-timing-functions)\n\t- [Animation delay](./docs/css-animations.md#-animation-delay)\n\t- [Animation iteration count](./docs/css-animations.md#-animation-iteration-count)\n\t- [Animation direction](./docs/css-animations.md#-animation-direction)\n11. [CSS Transitions:](./docs/css-transitions.md)\n\t- [Transition properties](./docs/css-transitions.md#-transition-properties)\n\t- [Transition duration](./docs/css-transitions.md#-transition-duration)\n\t- [Transition timing functions](./docs/css-transitions.md#-transition-timing-functions)\n\t- [Transition delay](./docs/css-transitions.md#-transition-delay)\n\t- [Shorthand Transition Property](./docs/css-transitions.md#-shorthand-transition-property)\n\t- [Resize Property](./docs/css-transitions.md#-resize-property)\n12. [CSS Filters:](./docs/css-filters.md)\n\t- [Blur](./docs/css-filters.md#-blur)\n\t- [Brightness](./docs/css-filters.md#-brightness)\n\t- [Contrast](./docs/css-filters.md#-contrast)\n\t- [Grayscale](./docs/css-filters.md#-grayscale)\n\t- [Hue-rotate](./docs/css-filters.md#-hue-rotate)\n\t- [Invert](./docs/css-filters.md#-invert)\n\t- [Opacity](./docs/css-filters.md#-opacity)\n\t- [Sepia](./docs/css-filters.md#-sepia)\n\t- [Multiple Filters Effect](./docs/css-filters.md#multiple-filters-effect)\n13. [CSS Clip Path Topics](./docs/css-clip-path.md)\n\t- [Basic Clip Path:](./docs/css-clip-path.md#-basic-clip-path)\n\t\t- [Common shape functions](./docs/css-clip-path.md#-common-shape-functions)\n\t\t\t- [circle](./docs/css-clip-path.md#-circle)\n\t\t\t- [ellipse](./docs/css-clip-path.md#-ellipse)\n\t\t\t- [polygon](./docs/css-clip-path.md#-polygon)\n\t\t\t- [inset](./docs/css-clip-path.md#-inset)\n\t- [Advanced Clip Path:](./docs/css-clip-path.md#-advanced-clip-path)\n\t\t- [Path Function](./docs/css-clip-path.md#-path-function)\n\t\t- [URL Function](./docs/css-clip-path.md#-url-function)\n\t- [Clip Rule property](./docs/css-clip-path.md#-clip-rule-property)\n\t\t- [nonzero](./docs/css-clip-path.md#-nonzero)\n\t\t- [evenodd](./docs/css-clip-path.md#-evenodd)\n\t- [Use Cases and Examples:](./docs/css-clip-path.md#-use-cases-and-examples)\n\t\t- [Creating custom shapes](./docs/css-clip-path.md#-creating-custom-shapes)\n\t\t- [Masking elements](./docs/css-clip-path.md#-masking-elements)\n\t\t- [Creating unique visual effects](./docs/css-clip-path.md#-creating-unique-visual-effects)\n\t\t- [Combining with other CSS properties](./docs/css-clip-path.md#-combining-with-other-css-properties)\n\n## \u0026#9873; Contribution\nContributions 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.\n\n## \u0026#9873; License\nThis reference licensed under the [MIT license](LICENSE). Feel free to use, modify, and distribute it as per the terms of the license.\n\n## \u0026#9873; Contact\nIf you have any questions or need further assistance, please feel free to reach me by referring [My Github Profile](https://github.com/ag-sanjjeev/)\n\nThanks for reviewing this reference notes!","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fag-sanjjeev%2Fcss-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fag-sanjjeev%2Fcss-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fag-sanjjeev%2Fcss-notes/lists"}