Welcome to Ugliest CSS!

A way to learn to collaborate on github and show off your skills for some seriously unappealing CSS!

Have you wanted to learn to use github, but didn't have a simple project to work on?

Have you wanted to try to collaborate with someone but didn't know where to find a project that you felt comfortable working on because you are new to coding?

Well, look no futher! Ugliest CSS is here to help!


  1. Go to Ugliest CSS github repo (See the readme that is posted there for further guidance).
  2. Only the CSS will be ugly! Only submit code that is valid and properly styled. The following styleguides will be enforced:
  3. How to edit/contribute:
    • Make your own css!
      1. In the CSS folder, name your file [your_github_username].css
      2. Add a link below:
        1. Copy one of the links, include the li tags too.
        2. Paste the line of code where your github username would go alphabetically
        3. Change the text in the single quotes to the name of your css file. onclick="changeCSS('default.css', 0);" - in this example change 'default.css' to 'github_username.css'
        4. On the same line, change the link name to your github username, in this example change the word Default.
      3. Create your masterpiece!
      4. NOTE: there is a bug that needs to be worked out: currently, only the default css will update on refresh. While you are working, you may need to change line 6 in index.html from default.css to your file name. Please be sure to change it back to default before subitting a pull request.
      5. Commit often!
      6. Always be sure to include a commit message every time you commit!
      7. When you are ready, make a pull request.
      8. You can update your CSS at any time. Also, consider collaborating with someone else; the possibilities are endless!
    • Other ways to contribute:
      • Update the README with the steps you took and include any helpful links.
      • Update the instructions on this page and include whatever html that is appropriate.
      • Go to The github issues and submit issues, as needed. You can request features, point out bugs, or bring up anything else about the project there!

Add your CSS here!