CSS stands for "cascading style sheets." In plain English, it means you can more efficiently control the design of HTML elements. Want all of your H1 headers to be red and italics? Done. Want your widget boxes to have a drop shadow? No problemo.
CSS is the jelly to HTML's peanut butter.
Hoop.la includes easy ways to include custom CSS within the site framework as well as inside themes.
If you'd like to become more self-sufficient with your site, how about learning some CSS?
Free and Cheap CSS Online Courses
- Udemy Beginner CSS courses (paid)
- Free Codecademy Web Fundamentals course (includes HTML and CSS):
- Free CSS Tutorial from W3Schools
- Free CSS Tutorial from HTML.net
Example of How to Use CSS for Design
For example, if you'd like to make all H1 headers in your Hoop.la site a specific color, insert this code into your Display Settings > Custom CSS box:
h1 { color:red; }
You can use any color name, or use the hex code. If you apply this at the top level, in Display Settings, it will control all H1 headers across your entire site. If you want to control just the H1 headers in a specific theme, just place the custom CSS inside that theme's Page Shell > custom CSS area.
Example of How to Use CSS for Feature Edit
This same trick can be used to actually hide Hoop.la features you don't want to use. For example, if you don't want to use the community ranking system, you can hide "community rank" from the interface completely.
Insert this code into the Display Settings > Custom CSS box:
<style type="text/css">
#communityRankProfileSection { display:none; }
</style>
After you've become a CSS expert, and created cool tricks for your Hoop.la site, why not come back and share? Show us your mad skills.
Image via Flickr CC: RVWTito
Comments (0)