As a blogger and/or DIY blog designer you’ve probably heard about a hundred times that you’re supposed to know it, but what is CSS exactly?
And how on earth will I ever learn CSS, it sounds so complicated!?
We discussed last week how HTML and CSS differ and how they work together. We also learned how easy HTML really is!
Don’t believe me? Go now to read it and download your free HTML Cheat Sheet before continuing here today. Go on, we’ll wait.
Ok ready?
Now that you have a decent understanding of what HTML is, we can now talk about what CSS is and how it affects our web pages. But first…
What is CSS?
CSS stands for Cascading Style Sheet. Where HTML is what defines the structure and content of a web page, a Cascading Style Sheet is a web document that allows you to change the appearance of the HTML.
CSS allows you to change the size, style, font, and color of text; margins and padding; background colors and border styles. It can also be used to position elements on a page (but we’ll leave that for another day).
One Big Advantage of CSS is Consistency
The best thing about CSS is that is allows you to make global style changes that affect every instance of a certain element throughout your blog or website so that you don’t have to make these changes at the individual page level. This saves you a ton of time when it comes to redesigning your blog.
Here’s an example of what I mean: as we learned last week, the page title on a blog page is defined by an HTML element called an H1 (heading 1). By default, the browser displays an H1 as extra large, bold, black text, much like we saw in the PAWS example.
If we want to change the color, font and size of all the H1’s on our blog to keep consistency throughout, all you need to do is define what all H1’s will look like in your CSS.
Sometimes different browsers may display slightly different default styles. Using a style sheet to define what a specific element should look like can keep the look of your blog consistent from one browser to another as well as one device to another.
How Does CSS Work?
The Cascade
A very important piece of CSS is the “Cascading” part. The browser reads style definitions from top to bottom in a style sheet. This means that a style you define lower in the style sheet will override any previous styles defined earlier in the style sheet.
We’ll get into that in a moment.
You can also have a style sheet override another style sheet. This is how we are able to override predefined styles from our blog themes or plugin widgets, as our custom style sheet is usually the last one read by the browser.
Related: How to Edit the CSS in your Blog
How CSS is Applied
CSS is applied to HTML elements in a web page by declaring specific styles for each element. A style declaration looks like this:
selector {
property: value;
}Let’s look at each of these pieces separately:
Selector
The selector is the piece of content that we want to target and style. It is either an HTML element or a Class Name.
When defining an HTML element, we use the tag name without the opening and closing bracket. For example, the <p> (or paragraph tag) would simply be:
p
A Class Name always begins with a dot. For example,
.big-font
We’ll get more into classes in a bit.
Property
Properties and their respective values always live within curly braces:
p {
}Properties are predefined terms within CSS that all web browsers understand. They are things like:
font-family, font-size, color, etc.
p {
font-family:
font-size:
color:
}A property is always followed by a colon (:)
Value
The value is the particular style or variable you choose to assign to a property. For example:
p {
font-family: Arial;
font-size: 16px;
color: gray;
}A value is always followed by a semi-colon (;)
So the example above tells the browser that we want all of our page titles (or any element surrounded by an <p> tag) to be displayed in Arial font at 16 pixels in size and in the color gray.
Pretty easy, right? Let’s do another one.
a {
color: pink;
font-weight: bold;
text-decoration: none;
}This example tells the browser to make all links (anchor tags that look like this: <a>) within our blog the color pink, bold, and not underlined. (Browsers by default display links in blue with an underline).
text-decoration: is a predefined property that all browsers understand. I wish it was something easy like underline: but it’s not. After using CSS for a while, you begin to memorize the more common properties. But to make it easy for you, I’ve created a cheat sheet of all the most commonly used properties and their available values! Download your free CSS cheat sheet here!
Make sense so far?
In these last two examples, I used names for the colors instead of hex codes. While these are perfectly valid and will be read just fine by any browser, it really is best to use hex color codes or RGB values (explained in the cheat sheet) in your CSS. This will allow you to use very specific colors from your branding. Hex color codes look something like this:
#1bded1
You can find hex colors in any color picker tool or image editing tool.
Defining Multiple Elements
Ok, let’s do a little shorthand. Let’s say you want to use the same font and color to define your page titles and subtitles but display them in different font sizes (a common style request). We could define each HTML element separately like this…
h1 {
font-family: Verdana;
font-size: 24px;
color: green;
}
h2 {
font-family: Verdana;
font-size: 20px;
color: green;
}
h3 {
font-family: Verdana;
font-size: 18px;
color: green;
}…but since all three tags share the same font-family and color values, that creates a lot of repetition. Instead we can define multiple HTML elements together be separating them with commas, like this:
h1, h2, h3 {
font-family: Verdana;
font-size: 24px;
color: green;
}Now in order to change just the font-size of the h2’s and h3’s, we can override the font-size by defining them just below:
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}That’s how the cascade works! There’s no need to redefine the font-family and the color because they’ve already been defined up above. This also makes it easier in the future if you decide to change your font to something else. You only need to change it once instead of three times!
Either way is correct because the browser will understand both methods, but
a) it’s quicker for you to write and edit version 2 and
b) it helps your CSS to load faster because you’re keeping the file size smaller by cutting out the repetition.
Other Elements
We can style more than just text in our CSS. We can define the look of a widget or image for example. Let’s say you want a black border around all your images. Remember our <img> tag? Here’s how we do that:
img {
border-width: 1px;
border-style: solid;
border-color: #000000;
}This will add a one-pixel-width, solid, black border around all your images.
Related: How to Create a CSS Ombré (gradient) Background for Your Blog
CSS Classes
Now let’s say you didn’t want certain images on your web page to have a border on them, like your icons for example. We can add a class to those elements in the HTML to specifically target them. We add a class like this:
<img src="image/twitter-icon.png" class="icons" />
Note that there are NO spaces between the word class, the equal sign, or the double quotes.
You can name a class whatever you want, you just want to name it something that makes sense. Also note that there are never any spaces in class names.
In CSS, all class names begin with a dot. Now we go back into the CSS and add the following after the previous image style (defined above) so that it’s overridden:
.icons {
border: none;
}This will tell the browser to only apply this style declaration to image tags with the class “icons” added to it.
You can actually add this class to any HTML element that you don’t want a border around.
Nested CSS Styles
HTML tags can be nested within other HTML tags. For example, a bulleted (or unordered) list looks like this:
<ul>
<li>list item number one</li>
<li>list item number two</li>
<li>list item number three</li>
</ul>Now let’s say we want all our list items (li’s) in a list to be italicized. We would define it like this in the CSS:
li {
font-style: italics;
}But what if we wanted to target a particular unordered list, not all of them? We could do that by adding a class to our list items:
<ul>
<li class="slanted">list item number one</li>
<li class="slanted">list item number two</li>
<li class="slanted">list item number three</li>
</ul>This could get VERY cumbersome if we had 100 list items! So instead of adding a class to every <li> in our list, we can very easily do this by adding our class to the <ul> tag instead:
<ul class="slanted">
<li>list item number one</li>
<li>list item number two</li>
<li>list item number three</li>
</ul>But now we need a slight change to our CSS. Since the class is applied to the parent element of the <li> tag, this is how we handle that:
.slanted li {
font-style: italic;
}Do you see what I did there? I added the class name, then a space, THEN the li tag. This tells the browser to italicize ALL li tags within the class named “slanted.”
Related: How to Make Your Text Appear Letterpressed with CSS
Troubleshooting and Common Syntax Errors
Sometimes after editing your style sheet, you might get an error or find that a particular style definition is not working when you refresh your browser window. Oftentimes, these are caused by syntax errors.
Browsers can be very particular when it comes to proper syntax and one little mistake can throw everything off. If this happens…
- Check your style sheet for missing semi-colons, spelling errors or missing opening and closing curly braces.
- Did you forget the dot before a class name or add a dot before an HTML element?
- Are there commas between multiple selectors?
Your error may be in your HTML:
- Did you follow the word ‘class’ with an equal sign and no spaces?
- Did you surround the class name with double quotes?
- Is the class name spelled exactly the same in the HTML as it is in the CSS?
Hey New Coder!
How about more CSS training that’s tailored just for bloggers?
CSS Questions?
Soooooo what did you think? Did this make sense? Was it easy to understand or too complicated? Your feedback will help me create the best workshop experience for you!
Now go find out How to Edit CSS in Your Blog!
I’m definitely going to have to read this one twice (or three times lol)! CSS seems a little more complicated that HTML. But you definitely broke it down in a great way. Thanks for sharing !!!
Thanks for that feedback Sascha! CSS is a little more complicated, you’re right. Maybe I should have kept it even simpler this first time around 😉 I’m taking note!
Thanks Marianne. I will try some out to reinforce my learning here. This is really useful. It’s like learning another language..but easier I think…..it is but logical. It’s just a matter of getting familiar. Can’t wait to learn more!!
Exactly Mary-Anne! It’s another language but it definitely is logical. I look at CSS like a puzzle and the more you use it, the easier it gets.
Great post again Marianne! You have no idea the number of times I’ve referred to your site while trying to get my blog up and running. I thought I’ll never learn CSS but it does get easier once you make an effort to figure it out. You actually start to understand the lingo after some time. And not to mention how satisfying it is when stuff work how you want it too. Thanks again for your posts and CSS content bombs 🙂
Oh Meera, that is so sweet of you to say! I”m so so happy to hear you found this so helpful. I personally LOVE working with CSS and I too find it incredibly satisfying because of the “instant gratification” aspect of it. Way to keep at it!
Marianne this is a great post! I am not a complete techphobe but CSS has been something I’ve shyed away from as it just felt to difficult. You make it super clear and although admittedly it will still take a bit of time to put into practice at least now I have begun to understand it. Thanks!
You don’t know how happy it makes me to read this Cat! I know it takes a minute to fully wrap your mind around it, but I truly believe that anyone can get it. I hope you’ll make good use of the cheat sheet for reference!
This is such a helpful post. I’ve figured out some CSS some on my own thus making me very dangerous 🙂 This helps fill in the details. I’ve pinned it so I can read it over. Thanks.
Thank you for sharing it Robbie, I am so glad to hear that this helps to fill in the gaps. I can’t wait to launch my workshop to fill in even more!
I am totally lost, I’ve read this now four times and I just can’t seem to get it through my brain. I have downloaded the cheat sheet perhaps I will get it then. May I ask a question, could this coding allow me to get a list of the email addresses for people who click to follow the blog, or can it help me set up a way for them to put in their email and it automatically goes on a list? I’m really not tech savvy and I want so much to grow my email list but I can’t even figure out how to get one.
Hi Barb, I’m sorry it’s difficult to understand. Did you read the HTML post first? It’s best to get a basic understanding of HTML before you try to understand CSS.
CSS is what affects the style and look and feel of your blog, so no that won’t help you with collecting email addresses. You have to sign up for an email service provider like MailChimp that will provide a form you can place on your blog and then collect the entries for you. At least MailChimp is free until you reach 2000 subscribers so its a great option for new bloggers.
Great explanation, thank you! I am a subscriber, but I have been unable to download the CSS cheat sheet. Is it not available yet?
Hi Julie, I just sent you an email.
Honestly? I feel like my head’s going to explode! But thanks nonetheless for a great guide 🙂
Hi Carol, thanks for your feedback, I’m sorry you found it confusing! I actually just went back and tried to simplify the post a bit. If you get a chance, go back and see if it makes a bit more sense to you.
Thanks for the info. This is the first place I’ve ever seen CSS explained for normal (non-coding) humans. I’m not saying I got it on the first time through, but I’ll be keeping the cheat sheet and referring to it, if I get brave enough to go mess around under the hood of my blog. And I know you hear this all the time, but your site is beautiful.
Thanks Darla, that is super helpful feedback! I am glad that you felt it was explained for non-coding humans, but it sounds like I have a tiny bit more work to do on simplifying it even more. Thanks so much for the compliments too!
This is amazing! As is the html guide too. I did a basic utmost course years ago but never did css. You explain it so simply! TY
Utmost = html (damn predictive text)
Oh awesome Sarah, that makes me so happy to hear! Thrilled you found it helpful!
Thank you so much for posting this! I just purchased a new theme and was so frustrated when I realized it didn’t have built in options to customize the colors. I thought I’d be stuck with the theme’s original color which doesn’t match my color scheme at all. After reading your post I decided to try updating my CSS and it worked! I still have a long way to go in beautifying my webpage, but I’m one step closer and feel like I have control over the design now.
That is so awesome Megan, huge high fives to you!! I just took a peak at your blog and I think it looks really great btw, so you’re not far off!
Great article!!!! I’ve been trying to design my teaching blog this summer and oh my goodness I’m struggling!!! I was able to follow your article pretty well but it isn’t what I need to fix my blog design. Any input you have on shifting my blog around would be greatly appreciated!!
Hi Courtney, glad you like it but sorry it wasn’t the cure for your current issue. Can you explain more about what you mean by “shifting your blog around?”
Hi! I will also have to read this CSS thing twice 🙂 I agree, it’s more complicated than HTML. But thanks for this information. Adding to my storehouse of knowledge to get me going. Thanks a lot!
I’m so glad to hear it Liza, thanks for reading and let me know if you get stuck or have questions.
Thank you so much for your tutorials! Between this and Blog Beautiful, I think I’m finally getting on the right track! I never realized how cramped my text was until reading about it in your book, and with this tutorial I was able to fix it very easily!
Oh yay I’m so glad to hear it Angie 🙂 I didn’t see the before, but the spacing looks great now!
Ok seriously just found your site from Just a Girl and Her Blog. I am doing her Framework series and LOVE it!!! I just googled “what is CSS?” and then saw this on your site! PERFECT! That is how far I am from understanding how to make my blog GREAT… and I have been blogging for 2 years;-) hahaha. I can’t wait to look through all the great information on your site!
Oh that’s so wonderful Jillynn! Abby is great, so glad she had me on her Framework series and that you found me through her. Be sure to join the Facebook Community too for even more help and feedback!
Ok this is very helpful migh have bookmark this post whenever I need helps about CSS design for the blogs, thanks for the article!
This was such an amazing Post! Although I probably will have to read it again and again to grasp everything completely! I was following along great until the “class” part, but you explained it so well that I am sure with the cheat sheet and practice this will make perfect sense! I was reading the comments on your post about Sidebars and realized that widgets and plug ins cant do everything! When I saw you post a long comment full of HTML and CSS I about lost my brain! I thought to myself I don’t know anything about coding… how could I possibly make a customizable blog without knowing coding?? And than almost as if you read my mind I received this email pointing me to HTML and CSS as well as your 4day course that I am so stoked to take now! Thank you! Thank you! Thank you! ?
I’m so so happy to hear this Hailey, thank you!!
I couldn’t believe how easy this was for me to grasp and all I had to do was double-take a few times. Anyone expecting to learn something like this with one read must have a super brain. ?
Now, I guess my only question is how does this work with themes that use their own widgets for content? Such as parallax, etc. Actually, I have a bazillion questions, but I’ll stick with the one for now.
And I guess my only tip: explain a little better up front that the html & css are in different places… They are, right? ?
Looking forward to catching up on ALL your content. ?
Hi Ashley, I’m so glad it made sense to you! And yes it may take a few times to let it sink in. 🙂
So I’m not sure I fully understand your question about how it works with themes with widgets? You should be able to add a class to whatever element you’d like to style and then add those styles in the CSS.
The HTML and CSS are usually in different places but occasionally CSS can be added directly to the HTML (though I don’t usually recommend that route). Did you sign up for the free video series? You’ll learn a lot more there as well!
An appreciative post with lots of information for everyone. Thanks for sharing such a nice post.
This is super helpful since I’m just starting my blog! I’ve been so confused with these terms but now I’m finally learning because of this. Though, I can’t seem to download both the html and css cheat sheets ?
Hi Abby, thanks for pointing out a flaw in the sequence! I have fixed it so that you can now access the cheat sheets and video training for free. Please try again and let me know how it goes. My apologies!
Yes really, there lots of new techniques & tricks with the new version available, hope this will be the good one & will help to deal with css. Article is really nice. I was looking for purchasing an HTML5 + CSS3 course, but after reading this article definitely will try this one. Thanks again for your posts
So glad to hear it Ravi, thanks for reading and for your comment.