Let’s be honest- we all want those flashy, eye-catching styles to decorate our webpage. However, coding intricate styles individually would be extremely tedious and difficult. Thankfully, we can utilize pre-written code in a few simple, easy steps.
Finding a Style
Once you have a style in mind, go to the website https://codepen.io/ and go ahead and search for pretty much anything. Note that the selected style should be pure CSS, evident by looking at the title/description.
A good example of a theme using only CSS:
Clicking on your style should bring you to something that looks like this: (of course with code filled in)
Implementation
Great! Now that you have the code for your style, now we can focus on actually implementing that into your webpage. Copy all that code from the CSS section into your stylesheet .css file in your text editor. Then copy all the code from the HTML section and paste it in the <body> element in your main HTML file. And just like that, a working font/theme for your website!
Multiple Styles
Here, it can get a bit more gritty and confusing. Using more than one style results in duplicated rulesets for the same element. Within duplicated rulesets, we need to edit out duplicated defined properties (ie. if two rulesets change the font color to two different colors). You choose which properties stay and which go! Further tinkering with the code might be needed to make overlapping styles work, but it is definitely possible.