A Beginner's Guide to CSS + A CSS Cheat Sheet

When I first graduated college, I was on the job=hunt. While I sent out resume's and waited to hear a response, I decided to play around with learning HTML and CSS. I found this amazing company called Codecademy. I wasn't sure that I would need any code knowledge in whatever job I landed, but I got addicted. 

Luckily, my first job involved managing a Wordpress website and that minimal coding knowledge came in handy pretty fast. Plus, it helped me land the job. 

Now, I use CSS for my client's websites. It helps me create a more unique website that best fits their needs and reflects their brand. If you are wanting to learn a little more about CSS, keep reading!

Beginner's Guide to CSS + a Free CSS Cheat Sheet | If you're a #squarespace user and want to learn how to further customize your website, CSS is the best way! With this new post, you'll get familiar with CSS plus get a free #csscheatsheet at www.jordanprindledesigns.com #webdesign #squarespacetips #custombranding

 

What is CSS?

CSS stands for Cascading Style Sheet. CSS is a simple mechanism for adding style (think fonts, colors and spacing) to your website. 

CSS partners up with HTML to make this all come together.

If you are using Squarespace, you don't need to use HTML to customize your website. Squarespace makes this really simple by having a segment specifically for custom CSS, called Custom CSS. Simple, huh? 

If you aren't using Squarespace, you'll need to learn HTML. Think of HTML as the building blocks of your website. You can't add style until the content is in place. If you want a basic understanding of HTML, I highly recommend using Codecademy. It's the program I used post-college that helped me land my first corporate gig, as I mentioned above. 

 

 

Why should you use CSS?

You may be asking yourself, why do you need to know CSS to customize your website? Isn't that what Squarespace's Style Editor is for? Well, yes and no.

The Style Editor allows you to edit quite a few things, but it doesn't give you the freedom to design a fully custom website. If you really want your business to stand out, highlight your creativity or you just want alternating colored backgrounds CSS is a must-have.  

Stand Out

Since Squarespace is an all-in-one platform. That means your template comes from the same templates all other Squarespace users are working with. 

Of course, you can brand your website with the Style Editor. But, to ensure your website doesn't look "cookie cutter" you can use custom CSS to really stand out. Hello, multi-colored backgrounds! I use multi-colored backgrounds on my homepage to break up the content and add a little pop of color.

Beginner's Guide to CSS | CSS colored backgrounds with Jordan Prindle Designs

Demonstrate Creativity

If you work in a creative field, like an illustrator, calligraphy, artist, interior designer... creativity is vital to your business. Your website should highlight your creativity and custom CSS can go a long way.  

The possibilities are endless! 

Enhance Your User-Experience

Lastly, but most importantly, custom CSS can enhance your user-experience. 

User-Experience refers to how a viewer experiences your website. Custom CSS can break-up information, highlight headers and create eye-catching opt-ins, all improving your website's user-experience.

I love how Morgan from Lagom Creative used CSS to underline her links. It makes her links easy to read and navigate towards as a user. 

 

 

Adding CSS to Your Squarespace site

Adding CSS to your Squarespace website is really simple. 

Step 1: From the back-end of your website, select Design > Custom CSS.

Step 2: Now that the CSS Editor is open, you can begin adding your code. 

Squarespace highlights your CSS with multiple colors to demonstrate it was been used properly. If something in your Syntax is wrong, it will notify you at the bottom of the screen in red. 

Beginner's Guide to CSS | CSS Syntax Error with Jordan Prindle Designs

Step 3: Select Save and view your new changes. It's that simple!


Have you ever used custom CSS for your website? Let me know in the comments! Or share a photo of the custom CSS on your website!