Own Your Site Design: An Intro to CSS for Bloggers
I’ve been noticing a popular selling point on website building platforms (Squarespace, Shopify, WordPress, etc.) these days that “no knowledge of code is required”. This is certainly a good thing; code sounds scary and looks scary too! But these are only half truths, because while code can certainly be scary, you don’t need a computer sciences degree to start making it work for you.
Stop shaking your head - I hope to make you a believer today, starting with CSS. Have you ever been looking at your website wishing you could change that one last little detail? Maybe it’s the font chosen for your post titles, the color of your footer, or more likely you simply want to hide that one unnecessary button.
What if I told you that yes, you can make these changes yourself - and without a web developer - using CSS!
CSS (or cascading style sheets if you’re being pedantic) is the code that creates the visual look of your site. Think of it like the stylish outfit your site wears for a night out - easily changeable for whatever the mood requires. It controls everything from the fonts used on your site, to the spacing and layouts of all of the visual elements. Also like clothing, you can add CSS rules to existing designs to overwrite what was styled previously without having to find and remove the old code. Because of this, having a working knowledge of CSS can be one of the most powerful skills to have when customizing a theme or existing website design.
Syntax
Let’s look at a basic CSS rule to see how it works. What do you think the following rule does?
footer { background-color: #333; }Each CSS rule contains a selector, a property and a value. In the example above the selector is “footer”, which targets the footer element. The property being changed is the “background-color”, and its value is being changed to “#333” (a color code for black that has just a little bit of grey in it). Looking at the rule above, this all seems pretty logical - see, I told you CSS isn’t that hard!
Selectors
CSS works by first targeting specific elements on your site, then applying your new style rules to them. There are three kinds of selectors that are commonly used:
Type Selector
Any html element can be used as a selector. For example you can target all paragraphs with the <p> tag. Or, you can target the entire body of the website with <body>. Type selectors don’t require any punctuation when written in CSS. Other type selectors include:
div
span
h1, h2, h3, etc.
input
header
footer
button
nav
a
Class Selector
Common styles that will be shared by many elements. Think of a class like a classroom at school - a group of similar students all obeying the same rules. For example, images with the class “align-left” will (you guessed it) all align to the left. All class selectors start with a period (“.”) when written in CSS, such as:
.menu-item
.entry-title
.featured-image
ID Selector
A singular, specific element. The biggest difference between classes and IDs is that classes can be used on multiple elements, but only one element on a page can use that specific ID. All IDs are preceded with a hashtag (“#”) when written in CSS, like this;
#sidebar
#header-logo
#secondary-navigation
Basic Examples
Alright, that all sounds like a mouthful of alphabet soup, so let’s see some real life examples of CSS in action.
Ever notice how the links on our site tend to look like this? Yup, that’s CSS. Here’s the CSS we used to get that look:
a { font-family: 'Montserrat', arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }We’ve done a number of things here, including changing the font family to Montserrat, as well as increasing the size and boldness of the text. We also added some letter spacing, just to give it that extra bit of airiness we love so much. Lastly we forced it into all-caps, which means we don’t need to hold the shift key when writing in our links.
How about the Submit button on our comment form? Here’s the CSS in action:
#submit { background: none; border: 1px solid; height: 37px; padding: 5px 15px; width: 100%; }By targeting the #submit ID, we can apply some pretty specific styles to this button and this button alone. First we removed the background and added that slick 1 pixel (px) border. Next, we fixed the height to a cool 37px, and then added some padding inside the button for breathing room around the text. Lastly we wanted the button to fit the full width of the box, so we set the width to 100%.
Where to put your CSS rules
WordPress
If you’re working with WordPress (our fav - sorry, we’re a bit biased), there are a couple options for adding your CSS. Station Seven themes include a Custom CSS section under Appearance > Customize where you can add any changes. As well, the Jetpack plugin’s own Custom CSS functionality gives you plenty of space to put in any CSS updates. While it may be tempting to edit the stylesheet.css directly under Appearance > Editor, I strongly recommend against it. Any changes you make to this stylesheet will be overwritten the next time you update your theme, erasing all of your hard work (boo-urns).
Blogger
If you are using Blogger, there is an Advanced section in the Template Designer that will take all the CSS you throw at it.
SquareSpace
On SquareSpace, custom CSS can be added under the Home Menu > Design > Custom CSS. Most other platforms should also offer similar area to enter in your CSS, these are just the ones I know off the top of my head.
How can one person possibly keep all of this stuff straight? Absolutely this can be overwhelming, but the more you actually use it in practice the easier it will get. To help you out, We've even gone that extra step to put together a massive CSS cheat sheet for you below; before you know it you'll know your padding from your margins and be typesetting like a pro!
Phew, you did it- give yourself a big ole' hug! Was it as hard as you expected? Or are you left wanting more? Don’t worry, this was just a primer for a series of posts we’re working on; we have posts coming up on styling typography, borders, backgrounds and more! Make sure you are subscribed to our mailing list to stay up to date as new posts are released.
What do you think about CSS? Are there any specific questions or have, or topics you want to see covered? Leave a comment below and I’ll be sure to help out!