{"id":27163496,"url":"https://github.com/punitkatiyar/css-master-guide","last_synced_at":"2025-04-09T01:49:20.097Z","repository":{"id":155958111,"uuid":"328328345","full_name":"punitkatiyar/css-master-guide","owner":"punitkatiyar","description":"CSS is a language used to describe the presentation of HTML 🥇  CSS is used to control the layout, fonts, colors, and other visual aspects of web pages and user interfaces.","archived":false,"fork":false,"pushed_at":"2025-03-26T09:03:22.000Z","size":686,"stargazers_count":35,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T09:41:41.589Z","etag":null,"topics":["css","css-flexbox","css3","css3-animations"],"latest_commit_sha":null,"homepage":"https://punitkatiyar.github.io/css-master-guide/","language":"HTML","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/punitkatiyar.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":"2021-01-10T07:34:03.000Z","updated_at":"2025-03-26T09:03:25.000Z","dependencies_parsed_at":"2024-07-22T16:06:09.751Z","dependency_job_id":"7b2d903b-c27a-4427-a76e-aec08150694e","html_url":"https://github.com/punitkatiyar/css-master-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/punitkatiyar%2Fcss-master-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/punitkatiyar%2Fcss-master-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/punitkatiyar%2Fcss-master-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/punitkatiyar%2Fcss-master-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/punitkatiyar","download_url":"https://codeload.github.com/punitkatiyar/css-master-guide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247959663,"owners_count":21024837,"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-flexbox","css3","css3-animations"],"created_at":"2025-04-09T01:49:19.598Z","updated_at":"2025-04-09T01:49:20.081Z","avatar_url":"https://github.com/punitkatiyar.png","language":"HTML","readme":"# CSS Master Guide 🥇\n\n**CSS stands for Cascading Style Sheets, and it is a language used to describe the presentation of HTML (Hypertext Markup Language) and XML (Extensible Markup Language) documents. CSS is used to control the layout, fonts, colors, and other visual aspects of web pages and user interfaces.**\n\n## CSS provides several methods to define the styles. \n\n\u003e Inline Styles\n\n\u003e Internal Style Sheets\n\n\u003e External Style Sheets\n\n\u003chr\u003e\n\n## Inline Styles: \n\n**This method allows you to apply styles directly to an HTML element using the style attribute. This method is useful for making quick, one-off style changes.**\n\n```\n\u003ch1 style=\"color: red;\"\u003eThis heading containt red color\u003c/h1\u003e\n```\n\u003chr\u003e\n\n## Internal Style Sheets: \n\n**This method allows you to define the styles within the \u003c head \u003e section of your HTML document, using the \u003c style \u003e tag. This method is useful when you want to apply styles to a specific page only.**\n\n```\n\u003chead\u003e\n  \u003cstyle\u003e\n    h1 {\n      color: red;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n```\n\u003chr\u003e\n\n## External Style Sheets: \n\n**In this method, you can define the styles in a separate CSS file, which is then linked to your HTML document using the \u003clink\u003e tag. This method allows you to maintain consistent styles across multiple pages.**\n\n```\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\"\u003e\n\u003c/head\u003e\n\n```\n\n\n### CSS File Code Like\n\n```\n/* Element Selector */\nh1 {\n  font-size: 24px;\n}\n\n/* Class Selector */\n.myClass {\n  background-color: #fff;\n}\n\n/* ID Selector */\n#myId {\n  border: 1px solid black;\n}\n\n```\n\n\u003chr\u003e\n\n## CSS Function \n  \n**CSS functions are built-in functions that allow you to perform calculations, manipulate values, and apply complex effects to your styles. CSS functions take one or more input values and return a modified value that can be used in your styles.**\n  \n### 1. calc() - performs basic arithmetic operations on values and units.  \n\n```\nwidth: calc(50% - 20px);  \n```\n### 2. var() - allows you to use variables to define and reuse values.  \n  \n```\n    --primary-color: #007bff;\n   color: var(--primary-color);\n\n```\n### 3. rgb() / rgba() - defines a color using red, green, blue and optionally an alpha value.\n\n```\n     background-color: rgba(255, 0, 0, 0.5);\n```\n\n### 4. hsl() / hsla() - defines a color using hue, saturation, lightness and optionally an alpha value.\n\n```\n       color: hsl(120, 100%, 50%);\n```\n  \n### 5. url() - defines the location of an external resource such as an image or a font.\n\n```\n  background-image: url(\"background.png\");\n```\n  \n### 6. attr() - retrieves the value of an HTML attribute and uses it in the style.\n\n```\n  content: attr(title);\n```\n  \n### 7. linear-gradient() / radial-gradient() - creates a gradient background using one or more colors.\n\n```\n   background-image: linear-gradient(to right, red, orange, yellow, green);\n```\n  \n### 8. min() / max() - returns the minimum or maximum value from a list of inputs.\n\n```\n     width: min(50%, 200px);\n```\n  \n### 9. clamp() - restricts a value between a minimum and maximum value\n\n```\n   font-size: clamp(16px, 2.5vw, 24px);\n```\n  \n  \n  \n  \n  \n  \n  \n  \n\n\u003chr\u003e\n\n- \u003ca href=\"https://punitkatiyar.github.io/css/start-css.html\"\u003ecss syntax\u003c/a\u003e\n\n- css text property\n- create article using html css\n- text logo using css\n- css box layout\n- css window 8 start menu\n- nested box layout\n\n- \u003e css border\n\n- \u003e css position\n\n- \u003e css navigation\n\n# 🧑🏼‍💻 CSS3 Module For Development \u003cspan style='font-size:100px;'\u003e\u003c/span\u003e\n\n\u003e text-shadow and box-shadow\n\n\u003e border-radius\n\n\u003e border-image\n\n\u003e background-image\n\n\u003e css 2d and 3d\n\n\u003e css animation\n\n\u003e css flex layout\n\n# 🧑🏼‍💻 ref website\n\n\u003ehttps://coolors.co/palettes/trending\n\n\u003ehttps://www.w3schools.com/cssref/playit.asp?filename=playcss_filter\u0026preval=none\n  \n\u003e https://webcode.tools/\n  \n\u003e https://animista.net/\n\n\n\u003chr\u003e\n\u003ca href=\"https://punitkatiyar.github.io/\"\u003eBack To Home Page\u003c/a\u003e\n\u003chr\u003e\n\n\u003cstyle\n  type=\"text/css\"\u003e\nh1 {color:royalblue;}\np {color:#686e78; font-size:1.2rem;}\n\u003c/style\u003e\n\u003cp\u003eokay\u003c/p\u003e\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpunitkatiyar%2Fcss-master-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpunitkatiyar%2Fcss-master-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpunitkatiyar%2Fcss-master-guide/lists"}