Familiarize Yourself with CSS

CSS

Even if you never touch a line of code yourself, it is a good idea to know the power of CSS (Cascading Style Sheets). You can control the format and look of your web page, form or image with a bit (or a lot) of CSS styling. Whether you are doing your web pages yourself or you are working with someone else to set up your website, it’s a good idea to know what’s available in CSS.

What is CSS?

CSS stands for Cascading Style Sheets. In the olden days, when HTML was young (that was the 1990′s), we used style code with tags like <font face=”helvetica”>. Well, pages of code got littered with too many tags, and it became difficult and time-consuming to change how a page looks. To solve this problem Cascading Style Sheets (CSS) were invented, and content got separated from styling. If you want to gain control over how your site looks, CSS is important to learn. And for someone with visual inclinations, it can be a lot of fun as well. Here is a nice introduction to HTML and CSS.

Show Me a Useful Example of CSS

A client wants a contact table with names and phone numbers. The table needs lines under each person. Also, the spacing is a bit awkward. So far, the table looks like this:

Name Phone Number
Joe Shmo 333-4444
Mary Contrary 333-1234
Annie Fannie 333-4455
Ed Head 333-4567

The code looks like this:

<table>
<tr><th>Name</th><th>Phone Number</th></tr>
<tr><td>Joe Shmo</td><td>333-4444</td></tr>
<tr><td>Mary Contrary</td><td>333-1234</td></tr>
<tr><td>Annie Fannie</td><td>333-4455</td></tr>
<tr><td>Ed Head</td><td>333-4567</td></tr>
</table>

One possible solution is to add a line of inline CSS code for each one of those rows. What a mess of code that would be. Much easier to create one class for table in the CSS style sheet and then apply it to the table.

So I added these rules to style.css –

.contact_table {width: 90%; border-collapse:collapse; border: 1px solid #999;}
.contact_table td, .contact_table th {width: 50%; padding-left: 10px;}
.contact_table th {border-bottom: 3px solid #666; font-weigh: 800;}
.contact_table td{border-bottom: 1px solid #666;}

Now the code looks like this:

<table class="contact_table">
<tr><th>Name</th><th>Phone Number</th></tr>
<tr><td>Joe Shmo</td><td>333-4444</td></tr>
<tr><td>Mary Contrary</td><td>333-1234</td></tr>
<tr><td>Annie Fannie</td><td>333-4455</td></tr>
<tr><td>Ed Head</td><td>333-4567</td></tr>
</table>

And here’s our new table:

Name Phone Number
Joe Shmo 333-4444
Mary Contrary 333-1234
Annie Fannie 333-4455
Ed Head 333-4567

If the person who had put in code for each row for the table now wanted the lines to be 3px thick instead of 1px, she would need to go through each line of code and change it accordingly. Instead, our CSS user simply changes the contact_table to this code:

.contact_table td {border-bottom: 3px solid #666;}

CSS vs. CSS3

The original Cascading Style Sheets have been updated – new specifications were added that are supported by most modern browsers. One of my favorite goodies in CSS3 is rounded corners. One makes these with the CSS3 border-radius rule. If you look at the CSS image on the upper right hand side of this page, you will see it has rounded edges; I created those with CSS3.

I can take the boxes that I designed a few years back and now present them like this:

Fun Fancy Box

For a while, the argument was not to use CSS3 because it didn’t work in IE. Well, even if it doesn’t look like it has a special drop shadow or rounded corners or a subtle gradient in older versions of IE, for example, one can happily add it to your code to be viewed in all the “up-to-date” (my term) browsers. The non-updated folks just don’t see the embellishments. And I just checked IE9 – the rounded corners do appear.

Your Turn, Please

So, now if you haven never touched or looked at CSS, is it a little less intimidating for you? If you have, what have you used it for? Have you changed a color, added a box, increased or deleted some padding?

30 Responses to “Familiarize Yourself with CSS”

  1. Sue Neal says:

    Hi Leora,

    I’m afraid CSS is a terrifying mystery to me and I could no more fiddle with my style sheets than fly to the moon. I almost didn’t get a site off the ground at all until I found a theme I could use without messing with the coding.

    I’d love to learn CSS and html because the look of my site’s very important to me and I know my options are limited due to my lack of knowledge and skill – it’s not something I have time to tackle at the moment, but it’s on my long-term ‘do’ list – I’ll be checking out your link to that beginner’s guide – thank you!

    Sue

    • Leora Wenger says:

      Sue, thanks so much for leaving a comment (and the first one!).

      I suggest reading a few beginner posts about CSS. Just read. Then, one day, look at the CSS for your site. Eventually, the foreign language of CSS will begin to look more familiar.

  2. Gerald Smith says:

    I have never seen code before but have always wanted to know more about it. Obviously it is a complicated subject but that has helped me understand a bit about coding. It would be nice to slowly learn a bit of code that can be used for SEO purposes.

    Thank you for the introduction and I really enjoyed reading this post :)

    • Leora Wenger says:

      Gerald, for SEO, learning the basics of HTML is a great approach. Then you can get good at what is called on-page SEO.

      CSS can help with formatting your content, so people will be more likely to read, share, and even link to your posts. And that helps a lot with SEO.

  3. Atish says:

    CSS makes a web designer’s life good as you just need to write the code under a class and call it where you need. Thats a pretty cool post. thanks Leora.

    Sue – To learn CSS I would suggest http://www.w3schools.com/css/

  4. Debbie says:

    Thank you for this! Found it from Sue’s Write Clever share on Facebook. I’ve been teaching myself CSS through trial and error, with the help of Google. Tough sledding, so I’m grateful for these tutorials. HTML is a piece of cake by comparison.

    • Leora Wenger says:

      Debbie,

      I’m glad to hear you are already learning CSS. If you have any specific questions, I’d be happy to find answers. I’ve been doing CSS ever since they got rid of the early browsers that didn’t support it at all.

  5. Susan Cooper says:

    This is really interesting. Do you think this would be a good idea for my website? :-)

    • Leora Wenger says:

      Your site already uses CSS, whether you realize it or not. If you can learn to read the stylesheet(s) for your site, you will find out how the formatting is done. Once you get familiar with how it works, you can try simple ways of making changes to a web page.

  6. Jeannette says:

    This field does not compute well in my head. It shocks my neurons ;o)
    However, my husband and website programmer loves it. So when I see a good blog like this I forward it to him.
    Thank you for sharing your techno talent with us.

    • Leora Wenger says:

      Jeanette,

      I’m smiling. I would suggest you just know what CSS is, and then when you see something you like on a web page you say to your husband – how did they do that? He should be able to figure it out. It’s not hard for a website programmer. You are lucky to have one “in-house.”

  7. Becc says:

    Leora, I think Sue said it for me above….

  8. Kelly Wade says:

    A lot of this is like a foreign language to me as my mind doesn’t work this way and I don’t have anything to do with designing websites. Although I do think this information is very helpful and useful to those who don’t know much about CSS but have to do this work on their sites/blogs. Interesting none the less.

    • Leora Wenger says:

      Kelly, if you have a blog, then you are using CSS, whether you realize it or not. I like to let people know that it exists and can be utilized as needed. Also, the technical can become more familiar with time – at one point, we didn’t know the difference between and A and B.

  9. Thank you for this. When I am trying to decipher the greek that is web design it helps to have a frame of referrence. I do know that this is something beyond me (at least full on design) but it helps when I can learn at least little bits so I can do some of the work myself.

  10. Jeri says:

    Thanks so much! I’ve been wanting to learn how to make a simple table like you did above. I only go into the HTML side of WordPress for very minor things, but you’ve broken this down that I feel like I might be able to accomplish it, or at least give it a try ;)

    • Leora Wenger says:

      Great! I bet you could make a nice list of the authors that you have interviewed using a CSS table, Jeri. You could put authors in one column and a link to the post in another. There are some tricky issues regarding tables, but nothing that can’t be overcome with a little playing around and reading other CSS posts.

  11. CSS terrifies me, but I would love to understand the basics so I can use it.

  12. Susan Oakes says:

    I guess I am lucky with my theme I don’t have to worry about CSS much as it is usually a matter of click and drag, like rounded corners and padding. I haven’t been confident about CSS as I always think I will wreck the site.

    • Leora Wenger says:

      Susan, maybe at some point I will write a post on how one can experiment with CSS to make sure something works before trying it on a site. Thanks for reading and commenting on the post.

  13. great information Leora. I’ve dabbled with my CSS every now and then but usually with specific instruction from someone who knows a lot more than I do. I suspect it’s like learning another language, once you learn the vocabulary and the rules, you can have fun with it… I can say I’ve mastered it yet! though I love learnig :-)

  14. Kurt says:

    Learning a bit of CSS is always a good thing. To know the proper application of classes can be a strong thing. If one is serious it is good to know how your system (WP,Drupal,Blogger) handles the different levels of styling and applies them.
    It can vary depending on the themeing layer and which plugins are installed.

    • Leora Wenger says:

      Kurt, yes, although I think some people just find learning even a bit overwhelming! And fortunately, one doesn’t have to know too much to run a website and publish new content (as long the person has someone to ask when they run into problems or they want to expand what they have).

  15. I’ve managed to run my own blog (on WordPress.org) once it was set up, but I’m petrified of doing something wrong and crashing it. I’ve even messed around with HTML on occasion, but I feel way out of my depth. I am looking for someone who can talk “Boomer-speak” — that is, communicate with someone who took a manual typewriter to college. Leora, you might be the person!

    • Leora Wenger says:

      Suzanne, I was on your blog for the first time this morning. I remember thinking – oh, she’s in Philly. I should subscribe to her blog.

      Love your excitement about where you live. And yes, I can help with the WP scary feelings.

Leave a Reply