Hey—want some one-on-one help getting this set up? Book a 20-minute consultation and we can work through it via video chat!
When designing a website, CSS is a critical tool to understand. While it’s robust, it’s luckily really easy to learn! Let’s cover CSS basics for bloggers.
What is CSS?
First of all, what is CSS? It stands for Cascading Style Sheets, and covers the visual, stylistic side of web design. It works in conjunction with HTML.
CSS is what gives text the fonts, colors, weights, etc. that you’re interested in using on your website. The browser pulls these from your website’s stylesheet (typically a file called stylesheet.css), or if you use WordPress, the Edit CSS section of your website’s Appearance tab.
Understanding the Formula
In order to understand CSS, you need to understand the formula. There are a lot of elements within the formula, but since we’re talking CSS basics, we’re going to cover two main areas: selectors and declaration blocks.
Selectors are the items you’ll be editing. Typically they’re the first word or letter in the HTML command. Things like “a,” “p,” “span,” and “img” are all selectors.
Declaration blocks are the different styles you’ll be applying to the selector. Things like font color, font family, and border are all declaration blocks.
On the stylesheet, a formula would be set up like so:
selector {
declaration-block: style;
declaration-block: style;
}
After the selector is listed, there’s an opening brace (the squiggly bracket), a declaration block followed by a colon, the style to be applied for that declaration block, a semicolon, and then a closing brace.
For example, to change my link styles, I use the following CSS:
a {
color: #7ab5c7;
}
This turns my links my branded light blue color instead of the generic bright blue.
If any pieces are missing, the style won’t work, so make sure to follow the formula exactly! You can have as many declaration blocks as you want for a selector, but they aren’t all required. If a declaration block isn’t listed for a selector, the website will simply show the default for that declaration.
CSS Basics for Bloggers: Popular Declarations You Should Know
Now that you understand how to set up your CSS formulas, let’s talk about the basic declaration blocks you should know!
Background-Color
The declaration block background-color is pretty self-explanatory. It changes the color in the background of the text. Keep in mind, though, that it’s only changing the background immediately behind your text, so it’s cropped pretty close. For example, here’s a sentence with a pink background color.
To give the design more room, you’d want to use padding, but that’s something we’ll cover in another blog post.
For the style itself, you can use general color names like “red” or “pink,” but I recommend using the six-digit hex value so you get the exact shade you want. The one I used above was my branded light pink, #f5d5d3.
Color
The declaration color isn’t exactly self-explanatory, because it doesn’t say what color it’s changing, so you’ll have to remember that it’s the font color.
The same rule applies for color as it does for background color: you can use general color names, but it’s better to use the hex value for the exact color you want.
Text-Align
Similar to <center></center>, text-align tells the website how to align your text. The values you can use are left, right, center, and justify.
Why would you want to use this instead of the HTML counterpart? Well, the CSS version is much more wide-spread, so you don’t have to manually align your blocks of text each time. For example, I styled the buttons in my sidebar as text-align: center; so I don’t need to manually tag them with <center></center> each time.
Font-Family
To change the actual font of your website from the default (typically some form of Times New Roman), you’ll use font-family. If the font name has more than one word, like Times New Roman, put quotation marks around it. You can also use a font type (like serif, sans-serif, or monospace) in place of an actual font name.
For this declaration block, you’ll actually want to list two or three options for the browser to display. This will allow it to fill in another option if your first font pick isn’t available for whatever reason.
To do this, simply list out the font names, followed by a comma. As usual, the final item should end with a semicolon. The browser will use the first font type listed, unless it’s unavailable. If that’s the case, it will use the second name listed if available, and if not, it will go onto the third choice.
For this reason, I recommend two font names, followed by a font type. I, for example, want my site to use the font Lato, so I list that first. If it’s not available, I go with a more generic (but aesthetically similar) option, Open Sans. If neither of those are available, I’ll settle for a sans-serif.
My CSS, then, looks like this:
p {
color: #474747;
font-family: Lato, “Open Sans”, sans-serif;
}
You’ll notice Lato has no quotes around it because it’s a single word, but Open Sans has quotes around it because it’s two words.
Font-Weight
Sticking with font styling, font-weight refers to how thick or thin your font is. You can use descriptive words, like normal or bold, or you can use a number. The number values for font-weight are 100, 200, 300, 400, 500, 600, 700, 800, and 900.
400 is the same as normal, and 700 is the same as bold, so use those values for reference as you change your font’s weight.
Keep in mind that not every font will support all 9 numbered font weights, so don’t be surprised if your font weight doesn’t appear to have changed.
Font-Size
Next, we’ve got font-size, which is self-explanatory: it’s the size of the font for your selector. Just like with colors, you can use general words like small, medium, and large, but to be exact, I recommend using a pixel size. These are the same as what you’d find in Microsoft Word, so don’t be too intimidated! To do a font in size 16, you’d use:
p {
font-size: 16px;
}
Just make sure you end your number with “px” to designate it as a pixel size.
How to Practice
Whew! Are you feeling ready to crank out some of these awesome CSS basics for bloggers? There are two awesome ways to practice: the Edit CSS tool on your WordPress site, and the Inspect tool in Google Chrome.
Edit CSS
If you’ve got a WordPress site, you can use the Edit CSS tool (in your dashboard under Appearance > Edit CSS) and it will show you your site as you edit the CSS. The nice thing is it will also tell you if you have syntax errors, meaning you wrote your formula wrong. It’s a lot easier to correct bad habits if something is telling you what you’re doing wrong!
Inspect
If you don’t use WordPress, or you don’t want to mess around with your site, I recommend using the Inspect tool in Google Chrome. You can do this on any site (even mine!), and your CSS changes will stay in (only) your web browser until you refresh or close the page.
To use it, open a site in Google Chrome and right click on the bit of text you want to change. You should see “Inspect” as an option that comes up. Click on it. A sidebar will come up on your screen that will lay out all of the coding on the site.
The top half is likely the HTML portion of the site, while the bottom half is likely the CSS portion of the site. Click on the bit of HTML you want to edit, and you’ll see the CSS (labeled Styles) change to reflect what CSS has been applied to that text.
Get comfortable with the Inspect tool by adding and removing declaration blocks from the site you’re on! The more you play around with it, the more comfortable you’ll get.
Ready to play around with some CSS basics for bloggers? If you have any questions as you’re practicing, don’t hesitate to leave a comment!
