🔧 Elevate Your Web Design: How to Enhance Your HTML with GitHub Utils CSS via CDN
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
Are you looking to add a personal touch to your website's design? Good news! You can take control of your styles by uploading your own utils.css file to your GitHub repository. This guide will walk you through the process, from uploading your custom CSS to finding the file's URL, allowing you to effortlessly integrate it into your web projects.
Step 1: Upload Your Custom utils.css to GitHub
Create a GitHub Repository:
If you don't have a GitHub repository yet, create one to store your custom CSS. You can do this on the GitHub website by clicking on the "+" sign in the top right corner and selecting "New repository." Keep the repository Public to access this file from anywhere.Upload utils.css:
Once your repository is set up, navigate to it and click on the "Add file" button. Choose "Upload files" and select yourutils.cssfile. Commit the changes to complete the upload.
Example of utils.css
.text-center: {
text-align: center;
}
.bg-red {
background: red;
}
.border-none {
border: none;
}
.outline-none {
outline: none;
}
.danger {
color: white;
background: rgba(255, 0, 0, 0.6);
}
.danger:hover {
box-shadow: 5px 5px 10px rgba(255, 111, 111, 0.5), -5px -5px 10px rgba(255, 111, 111, 0.5);
}
.success {
color: rgb(0, 0, 0);
background: rgba(0, 255, 47, 0.6);
}
.success:hover {
box-shadow: 5px 5px 10px rgba(125, 255, 111, 0.5), -5px -5px 10px rgba(125, 255, 111, 0.5);
}
.flex {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column;
}
.items-center {
align-items: center;
justify-content: center;
}
/* Add more css as per your requirement */
Step 2: Find the URL for Your Custom CSS
Access Your CSS File:
Go to your GitHub repository and navigate to the folder containing yourutils.cssfile. Click on the file to view its contents.Copy the URL:
Click on the "Raw" button on the top-right of the file viewer. Copy the URL from your browser's address bar.
Step 3: Integrate Your Custom utils.css into Your HTML
Open Your HTML File:
Using a text editor, open the HTML file where you want to apply your custom styles.Add the CDN Link:
Within the<head>section of your HTML, insert a<link>tag with the copied URL from yourutils.cssfile.Convert your GitHub repository to cdn link:
If your GitHub link ishttps://github.com/example/cdn/css/utils.cssthen convert this intohttps://cdn.jsdelivr.net/gh/example/cdn/css/utils.cssto use utils.css as cdn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Web Page Title</title>
<!-- Add your custom utils.css via CDN link -->
<link href="https://cdn.jsdelivr.net/gh/example/cdn/css/utils.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<!-- Your HTML content goes here -->
<button class="border-none outline-none danger">Alert</button>
</body>
</html>
Preview
Step 4: Save and Experience the Transformation!
Save your HTML file, open it in a web browser, and witness the magic as your custom utils.css brings your web design to life!
Congratulations! You've successfully uploaded and integrated your own utils.css file through GitHub, giving you complete control over the aesthetics of your web projects. Feel free to update your CSS file on GitHub as needed, and watch your designs evolve with ease.
🐧 Aliens elevate privileges to enhance their vision
📈 27.27 Punkte
🐧 Linux Tipps
🔧 Elevate Your GitHub README Game
📈 24.42 Punkte
🔧 Programmierung