DEV Community

Cover image for Elevate Your Web Design: How to Enhance Your HTML with GitHub Utils CSS via CDN
Rohit Yadav
Rohit Yadav

Posted on

Elevate Your Web Design: How to Enhance Your HTML with GitHub Utils CSS via CDN

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

  1. 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.

  2. Upload utils.css:
    Once your repository is set up, navigate to it and click on the "Add file" button. Choose "Upload files" and select your utils.css file. 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 */
Enter fullscreen mode Exit fullscreen mode

Step 2: Find the URL for Your Custom CSS

  1. Access Your CSS File:
    Go to your GitHub repository and navigate to the folder containing your utils.css file. Click on the file to view its contents.

  2. 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

  1. Open Your HTML File:
    Using a text editor, open the HTML file where you want to apply your custom styles.

  2. Add the CDN Link:
    Within the <head> section of your HTML, insert a <link> tag with the copied URL from your utils.css file.

  3. Convert your GitHub repository to cdn link:
    If your GitHub link is https://github.com/example/cdn/css/utils.css then convert this into https://cdn.jsdelivr.net/gh/example/cdn/css/utils.css to 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>
Enter fullscreen mode Exit fullscreen mode

Preview

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.

Top comments (0)