Elevate Your Web Design: How to Enhance Your HTML with GitHub Utils CSS via CDN
Tags: beginners, tutorial, rohitnirban, css
Published: 2024-03-12 10:44:22

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`
```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

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

```html
<!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**

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcznyxu8skdjmgi0e2fk.png)

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