biz ladies: understanding CSS

rosie_the_riveter1
Today’s Biz Ladies post comes to us from Biz Ladies regular Amanda Aitken, the Head Chocoholic at Better Than Chocolate, a WordPress web design studio specializing in “sinfully gorgeous, satisfyingly fast” web design. Amanda is presenting us with a very detailed (a info-packed 5k word piece!) but easy-to-understand guide to CSS. She takes us step by step through the process of beautifying our own websites with different colors, headers and layouts. Thank you, Amanda, for helping us tackle this sometimes-complicated topic! — Stephanie

Read the full Biz Ladies post after the jump . . .

A Guide to CSS

(Or, How to Tweak Your Site to Make It Gorgeously, Perfectly “You”)

I’m going to let you in on a little secret that the legions of male web developers out there don’t want you to know about: coding is fun. Yep — there’s something innately satisfying about using funny little symbols and a healthy dose of methodical reasoning to create a stunning website. Take it from someone who taught herself to code at age 13 and is still doing it 13 years later: using cold, hard left-brained logic to create gorgeous, right-brained art makes web development a HECK of a lot of fun.

But even if you don’t want to BE a web designer or developer, chances are you want your own website to look amazing. And that’s where this article comes in.

So fasten your seatbelts, ladies. I think you’re going to love this.

Disclaimer #1: I’ve written this guide to be as non-intimidating as possible, but it does assume a certain level of familiarity with the web. If you’ve succeeded in setting up your own blog or website, you should be in good shape to delve into CSS. And as usual, I promise to make it easy on you! So if at any point you feel stuck or confused, just take a deep breath, re-read the part that you weren’t clear on, and plod ahead. You CAN do this.

Disclaimer #2: This article will focus more on the use of CSS to tweak an existing site, blog or theme than on using CSS to build a site from scratch. Why? Because while it can be an interesting exercise, building a site from the ground up with CSS is laborious and, quite frankly, unnecessary. These days, it makes much more sense to use a CMS (content management system) such as WordPress to power a new site or blog, so that you can update your content with your eyes closed (see my first and second Biz Ladies articles for more on this). Then you can use your newfound CSS knowledge to tweak the look and feel of the site to make it look exactly the way you want.

Disclaimer #3: For the purposes of this article, I’m going to use the term “website” when really I mean “website or blog.” It doesn’t matter whether you consider your online presence to be a site or a blog; in both cases, you can use CSS in exactly the same way to spruce it up. Fun!

First Things First: What Is CSS?

Ever felt like you’ve hit the proverbial design wall when it comes to your website? Ever thought, “If only I could give that column a little more breathing room” or “I sure wish I could make that text bolder and the perfect shade of mustard yellow”? If so, you’re not alone — and CSS is the answer!

CSS stands for “cascading style sheets,” which is a bit of a confusing term, so let me clear it up from the get-go. The “style” part comes from the fact that CSS lets you control the look and positioning of elements on a website with various “styles” or “style rules” that you define. The “sheets” part comes from the fact that in most cases, you put your list of style rules in its own document, which we refer to as a “stylesheet.” And the “cascading” part comes from the fact that when you’re working with CSS styles, they “cascade” into a hierarchy, so that certain styles are more important than others.

But enough with the semantics (which aren’t all that important anyway)! Let’s move on to the good stuff.

How You Can Use CSS to Beautify Your Site

Let’s say you set up a WordPress website or a Blogger blog, and after hours of diligent searching, you finally find a theme or template that uses the colors and general feel you’ve been envisioning. But while you’re pretty happy with it, you have to admit that it’s not totally perfect. There are subtle things you’d change — if you only knew how.

This is where CSS comes in. CSS gives you hands-on control over the look of virtually anything on your site. You can add more space around an area, change the color of things, add background textures and images and tons more. Those little tweaks that were once out of reach suddenly . . . aren’t. :)

To give you an idea of what I mean, check out this screenshot of the Better Than Chocolate website (the site for my web design & women’s web mastery company).

Here it is in its original state (this is the default, out-of-the-box look of the Thesis theme for WordPress):

And here it is after I spruced it up with CSS:

Obviously, the “before” and “after” versions are worlds apart. Here’s a breakdown of the things I changed using CSS:

  • Changed the background color to a rich, dark purple
  • Added a tower of brownies as a background image
  • Added some purple sparkles as another background image
  • Inserted a header graphic (containing my logo)
  • In the main content area, split the content into two columns (one for my text, one for the signup form for The Better Than Chocolate Society email list)
  • Spiced up the navigation bar by changing the font color and background color and removing the borders around it

Now that we have an idea of what we can do with CSS (hint: a lot!), let’s lay the groundwork for CSS by talking a bit about its best buddy, HTML.

CSS and HTML: Best Friends Forever?

CSS works hand-in-hand with HTML, the language that’s used to create webpages. HTML tells your web browser how to interpret things on a webpage (for example, is it a headline, a subheadline, a paragraph or a box?). It basically labels the stuff on a website semantically, using what are called “tags.”

A semantic element on a webpage is identified by enclosing it in tags, like this:

<h1>This is a headline</h1>

. . . Or this:

<h2>This is a slightly smaller headline</h2>

. . . Or this:

<p>This is a paragraph</p>

. . . Or this:

<div>This is a div</div>

Let’s Explain Those Tags in Simple Language

The <h1> tag is the tag for a level 1 headline (producing big, bold text that you might want to use at the top of a page).

The <h2> tag is the tag for a level 2 headline (producing slightly less big, bold text, which you might want to use to introduce a new topic in an article you’re publishing on your website, for example.

The <p> tag is the tag for paragraph text. This is just a chunk of regular old text.

The <div> tag is the tag for an area of space that you can fill with text and graphics (think of it as a “division.” Divs come in handy when you want to change the look of a chunk of content on a page because you can enclose that chunk with <div> and </div> tags and then use CSS to change the look of that div (more on this later).

In HTML, most tags need a corresponding closing tag. The closing tag is just the same as the opening tag, only with a slash after the initial pointy bracket.

So, if you introduce a level 1 headline with <h1>, you also need to indicate when the level 1 headline should end, using </h1>.

Similarly, when you introduce a paragraph with <p>, you need to indicate when the paragraph should end, using </p>.

There are quite a few HTML tags (for a complete list, check out this link), but for the most part, a website uses the same ones again and again, which makes it easier for you. :)

And the really great part is that because you’re learning to customize a website that’s already up and running, you won’t need to do much (if any) HTML coding to get your website looking stellar. You just need to be AWARE of HTML so that you can master CSS, because they work in tandem to glamorize your site.

So Now That I’m Pumped Full of HTML Knowledge, Where Does the CSS Come in?

Good question, young grasshopper! Here it is in a nutshell: CSS works by targeting specific HTML elements with your desired style rules, making those elements look the way you want them to look. Or, put another way, the CSS style rules change the default appearance of the HTML element, fancifying them however you see fit.

A bit later, I’ll explain how to figure out what HTML tag or element corresponds with something you want to change on your site. But for now, let’s look at the basic structure of a CSS style rule.

Anatomy of a CSS Style Rule

Things are going to get a little crazy here, but bear with me.

A CSS rule consists of three parts: the element, the property and the value (don’t worry – you don’t need to know the names for the parts). Every CSS rule also needs a colon, a semicolon and some curly brackets.

The structure of a CSS style rule looks like this:

element {property:value;}

Here’s how it breaks down:

  • The element is the thing you’re assigning the CSS style rule to.
  • The property is the aspect of the element that you want to control with the style rule. This must be followed by a colon.
  • The value is what you want to do to that property of the element. This must be followed by a semicolon.
  • And finally, in a fun, girly twist, the whole rule is surrounded by curly brackets (so much more enjoyable than regular brackets, don’t you think?).

To get you familiar with their structure, here are some examples of style rules:

a {color:pink;}

p {width:200px;}

h1 {font-size:300%;}

div {background-color:black;}

Alrighty then — let’s take a closer look at an example of a CSS rule. Say you want all the paragraphs of text on your site to show up in blue instead of the default black text. You know that in HTML, a paragraph is represented by the <p> tag, so the “p” goes in the “element” position at the very beginning of the style rule.

And the property that you want to control with the style rule is “color”, so that goes in the “property” position in the style rule, after the opening curly bracket and with a colon following it.

And the value that you want to assign to the property of “color” is “blue” because you want to turn the text in your paragraphs blue. So this goes in your “value” position, followed by a semicolon and a closing curly bracket.

The CSS style rule for your blue paragraphs would therefore look like this:

p {color:blue;}

With this style rule in place, all paragraphs of text on your site will be blue. But maybe you’re not such a fan of blue. Maybe you’d rather use chartreuse or bisque. Well, here’s a hot tip: there are 147 color names you can use in your style rules (for a full list, click here). As someone who loves color, I find this to be pretty awesome.

But while color may be fun, it’s not the only thing you can play with when writing style rules. Perhaps you’d like to take your h1 element (remember: h1 is a top-level headline) and make it appear even bigger than it normally would — say, 300% bigger. Here’s how the style rule for that would look:

h1 {font-size:300%;}

Or, to take a third example, maybe you want to give all the links on your site a pink background color, as though you’d highlighted the words with a pink highlighter. In HTML, a link corresponds with the <a> tag, which stands for “anchor” (think of the links on the chain of an anchor, if that makes it easier to remember). Here’s how that CSS style rule would look:

a {background-color:pink;}

What CSS Properties Do I Have to Work with?

At this point, we’ve looked at three different examples that use three different properties (color, font-size and background color) and three different values (blue, 300% and pink). There’s a ton more that’s available to you through the magic of CSS, though!

Here’s a sampling:

background-image

border

height

font-weight

margin

padding

letter-spacing

For a complete list (and an in-depth explanation of the properties listed above), I recommend consulting this page on the W3 Schools site. They make it their business to keep up-to-date, accurate information about HTML and CSS. So whenever you want to change the look of something on your site, you can go through their list to see if there’s a CSS property that will do it.

Other Stuff to Know about Writing CSS Style Rules

You can also combine CSS style rules, assigning several rules to the same element. All you have to do is list them one after the other, separating them by a semicolon. The last rule in the list will conclude with a semicolon as well. As an example of this, let’s take our h1 and make it extra-big AND blue, like this:

h3 {color:blue; font-size:300%;}

As you can see, we just listed the font-size rule after the color rule, separating them by a semicolon and a space.

There’s no limit to the number of rules you can assign to an element, but if you’re assigning more than a couple of rules to an element, you might want to put the rules on different lines, like this:

h3 {

color:blue;

font-size:300%;

}

It’s not mandatory, but it makes them easier to read this way, especially when you’ve written a lot of style rules. Which brings us to . . .

Where Do Our CSS Style Rules Go?

So you’ve got your style rules written, but where do you put them? The short answer is that you put them in your site’s stylesheet. Most site or blog themes or templates have a stylesheet that contains all the style rules that the designer set up when he/she designed and coded the theme/template/site.

In order to tweak the look of your site, you just need to find the stylesheet and replace the designer’s original style rules with your own style rules – or you can add new ones of your own.

The stylesheet is simply a file that you can open and edit with either a plain text editor (such as NotePad), or a website building program (such as Dreamweaver). Or, in many cases, you can access the stylesheet via a link in your website’s dashboard or main control panel, editing it like it’s a regular old document, and then clicking a button to save your changes.

Depending on the type of website you have, you’ll probably access your stylesheet in a different way.

If you have a self-hosted WordPress site (i.e., a site that runs on WordPress on your own domain – NOT on wordpress.com): Depending on the theme you’re using, you may be able to access your theme’s stylesheet right from your WordPress dashboard. Premium themes such as Thesis let you do this very easily. If you’re not sure if your theme offers easy stylesheet editing, try Googling “how to edit the CSS for <your theme name here>”. If you have a free WordPress theme (i.e., a non-premium theme), you will probably need to use FTP to find your stylesheet on your web server, make changes to it and re-upload it to the directory that your theme is in. Your web host’s technical support department can help you with this, or you can check out one of my other Biz Ladies articles for instructions on how to use FTP.

If you have a WordPress.com blog (i.e., a blog that is housed at yourblogname.wordpress.com): You can only edit the stylesheet for your theme if you’ve purchased the Custom CSS Upgrade. Once you buy the upgrade, you can access the stylesheet for your theme under Appearance/Edit CSS in your WordPress dashboard.

If you have a Blogger blog: Log into Blogger and click the “Template” link under the name of your blog. You will be taken to a page with a bunch of code in a scrollable window. Scroll down a bit and look for this line of code:

<style type=”text/css”>

Highlight everything from the beginning of that line of code down to the end of this line of code:

</style>

Copy the code you’ve highlighted and paste it into a plain text editor such as NotePad (for PC) or Text Edit (for Mac). Do NOT paste the code into Microsoft Word or another word processing program because the formatting could get messed up.

Once you’ve got the code in your text editor, you can change the style rules or add your own and paste them back into your Blogger template code, overwriting the original ones. Then save your template, and you’re done!

If you have a Squarespace site: Look for the Custom CSS tab within the Style Editor, and add your style rules there.

If you have a Tumblr blog: Check out this site for some info on how to access your stylesheet.

If your site type isn’t listed above, try Googling “where is the stylesheet for _____” or “how to edit css in _____,” filling in your site type where you see the blank, and you should find the information you need.

So you’ve tracked down your stylesheet, and now it’s a matter of slotting in your style rules. All you have to do is add them to the stylesheet. Click to put your cursor at the end of the last style rule you see there, hit enter a few times, paste in the rules you’ve written and save your stylesheet. Easy as that.

If there’s already another style rule in the stylesheet that addresses the element you wrote your style rule for, the last rule in the stylesheet is the one that will be observed. So just keep adding your new style rules to the bottom of the stylesheet, and you should be good to go.

Here’s Where Things Get Really Good: Assigning Style Rules to Classes

The real power of CSS comes in when you start working with “classes.”

As we’ve discussed, you can assign a CSS rule to any HTML element, whether it’s a paragraph, an h1, h2, h3 or a div. But what if you want to control the look of only a specific occurrence of an element on your site, instead of all of them? In other words, what if you only want one paragraph in one of your posts to use blue text, instead of every paragraph in every post? To handle scenarios like these, you assign a class to the paragraph you want to change.

Assigning a class to an HTML element involves adding a little something to your HTML and a little something to your stylesheet. The first thing to do is decide what to name your class. It makes sense to call it something logical that describes the CSS rule you’re writing, like “blueparagraph” or “reallybigtext”. Class names can only include letters, numbers, underscores and dashes, and they can’t have any spaces in them.

For this example, we’ll say you’re going to call your class “pinkandblack”, and you want to make the text inside it pink, add some padding to the top and put black highlighting behind it.

Here’s what you would add to the post or page that contains the paragraph whose appearance you want to modify:

<div class=”pinkandblack”>Here’s the content you want to change the look of</div>

And here’s what you would add to your stylesheet:

.pinkandblack {color:pink; padding-top:10px; background-color: black;}

There are a couple of things to notice here:

  • The class name you chose (pinkandblack) appears both in the HTML on the post/page and in the stylesheet. This is how the post or page and the stylesheet communicate and know to assign your chosen style rules to the class you set up.
  • In the stylesheet, the class name is preceded by a period.

You can add a class to any HTML element, so the possibilities really are endless. For example, you could have assigned the “pinkandblack” class to any other element on your site to give it a pink font color, upper padding and black background color, like this:

<p class=”pinkandblack”>Here’s the content you want to change the look of</p>

. . . Or this:

<h1 class=”pinkandblack”>Here’s the content you want to change the look of</h1>.

Now, here’s a crucial point that is especially important to you, the girl who’s tweaking an existing site design:

Classes are super important because chances are, the person who designed and coded your site design, theme or template did so using a bunch of CSS classes.

So in order to change the look of most of the stuff on your site, you need to be able to a) find out what those classes are and b) manipulate them by changing the style rules that the designer wrote.

Which begs the question: How are we going to do that? With an ingenious little tool called Firebug, of course!

Looking Under the Hood of Your Site with Firebug

First things first: time to grab Firebug. FireBug is an add-on for the Firefox browser. You can download Firefox for free whether you’re on a PC or Mac (visit http://www.mozilla.com/en-US/firefox/new/), and then it’s just a matter of downloading Firebug at http://getfirebug.com/.

The great thing about Firebug is that it lifts the curtain on the inner workings on your site. It shows you the HTML and the CSS that are making your site look the way it does.

Here’s how to use it:

  • Once you’ve got Firebug installed, open up Firefox and go to your site.
  • Now click the Firebug “on” button at the bottom right of the browser (it looks like a little gray scarab insect), and a window will open across the lower half of your screen.
  • Look at the top left of the Firebug window, and click the button that looks like a blue rectangle with an arrow pointing to it.
  • Move your cursor around the screen in the upper half of your browser window. You’ll see that as you highlight different items on your site, the code showing in the Firebug panes (on the lower half of your browser window) change. On the left, you have your HTML, and on your right, you have the CSS style rules associated with the HTML elements.
  • To see the style rules associated with an element on your site, click once on the part of the site you’re interested in, and look at the code in the right Firebug pane. You’ll see the CSS rules associated with the element.

If you want to see how it would look if you changed some of those rules, all you have to do is highlight the style rule you want to change in the bottom right pane of Firebug and type the new rule over top of what’s there. And the really great thing about Firebug is that it will instantaneously show you the result of the change you made in the main browser window. If you don’t like how it looks, adjust the style rule until it does. This kind of real-time previewing will save you a ton of time as you’re working on getting your site to look just right.

You can also add new style rules to HTML elements and classes in the bottom right pane. To do this, simply right click to the immediate right of the last style rule you see listed for the element or class you want to change, and choose “New Property”. Then you can type your rule and watch it take effect in the main browser window.

Next: Adding Your New Style Rules to Your Stylesheet

Once you’ve changed the style rules or added new ones to your liking in Firebug, copy the code to your clipboard, close Firebug with the “deactivate” button at the top right of the bottom right pane and paste the code into your stylesheet. Then save your stylesheet and refresh your site in another browser window to see how your changes have taken effect. You should see the same result that you saw when you were previewing your changes in Firebug.

If You Don’t Like Firebug . . .

It’s okay if you don’t like Firebug. You don’t need it to customize your site. As long as you’ve grasped the concepts I’ve covered in this article about how to write CSS style rules, you’re in business. You can simply add your new style rules to your stylesheet, save the stylesheet, and your changes will take effect on your site. Firebug just shows you what style rules are already associated with elements on your site and makes it easy to manipulate them and add new ones. Plus, it’s got the benefit of the preview functionality, so it saves you time. But if you’re not a Firebug fan, it’s not the end of the world.

In fact, sometimes Firebug is simply unnecessary. If you want to change the appearance of a standard HTML element throughout your site, like the way all paragraphs look, then you already know that you’re dealing with the <p> tag. You don’t need Firebug to tell you that.

In cases like these, you can just go right ahead and plug your CSS style rules right into your stylesheet.

Another situation in which you can avoid using Firebug is as follows: If you’ve made changes to a page or post on your site in the past by assigning a class to an element on that page or post, you can just go into “HTML” or “code view” for the post or page to see the class associated with that element. Once in HTML or code view, you’ll be able to see that you assigned that div a class of “pinkandblack” or that paragraph a class of “extrabig”.

Simply going into HTML/code view won’t help you to change the appearance of elements outside of the area that your page or post appears in, however. So if you want to change the look of something in your header, sidebar or footer, you’re going to have a hard time doing that without the use of Firebug. Good thing it’s free, right? :)

How It All Comes Together

At this point, we’ve looked at the relationship between HTML and CSS, the general structure of CSS style rules and how to implement style rules on your site. You’ve taken in a lot of information, and I realize you might be feeling overwhelmed, so at this point, I want to review (in very simple terms!) the steps you’ll need to take to customize the look of your site with CSS.

If you ever find yourself staring at your website, feeling freaked out about how and where to begin making changes to its appearance, this list should bring you back to reality and calm you down.

So, here goes. If you really think about it, there are just three simple steps involved in changing the look of something on your site:

1. Decide what you want to change.

2. Identify the HTML tag or CSS class for the element you want to change, or assign a class to the element so that you can target it with a style rule.

3. Write the CSS rule to make the change and add it to your stylesheet.

    Let’s take a look at each step individually.

    Step 1: Decide what you want to change

    This is the fun part. For example, do you want to make all your page titles purple, or do you want to set up a new type of paragraph that has a light gray background? Do you want to make your sidebar wider, or do you want to add some extra space between your header area and your nav bar? Decide what you want to do and write it down so that you’re clear on it.

    Step 2: Identify the HTML tag or class for the element you want to change, or assign a class to the element so that you can target it with a style rule

    This is the part where you look for the tag or CSS class that’s linked to the element you want to change. There are two easy ways to do this:

    1. Go into code or HTML view when you’re editing a post or page on your site or blog and visually look for the tag or class that’s associated with the element you want to change the look of.

    2. Open up Firebug and use the pointer tool (as explained earlier) to highlight the element you want to change so that you can see the HTML tag and/or class associated with it in the bottom left pane and the style rule(s) associated with it in the bottom right pane.

      If the element you want to change the appearance of doesn’t yet have a class associated with it, and you want to control it separately from the other elements on the site with the same HTML tag linked to them, then you will need to assign a new class to the element. For example, if you want to give a specific paragraph on a specific page a light gray background color, you can’t just write a style rule for <p> because it will give ALL the paragraphs on your site a light gray background. Instead, you’ll need to go into HTML or code mode when editing your page or post and wrap your paragraph in tags that assign a special class to it, like this:

      <p class=”lightgraybackground”>Here’s where your paragraph text goes</p>

      If the area on the page whose appearance you want to control is not associated with an HTML tag, you might need to wrap it in <div> tags and assign a class to that div. For example, let’s say you want to left-indent a chunk of text and an image by 100 pixels. You could wrap both the chunk of text and the image in a div, assign that div a class of “leftindent”, and then write a style rule for that class in your stylesheet. Here’s how that would look in your HTML (i.e., the code you see when in HTML/code view for your page or post):

      <div class=”leftindent>

      <img src=”http://yoursite.com/images/bizladies.gif”><br />

      This is text that appears under the image

      </div>

      Step 3: Write the CSS rule to make the change and add it to your stylesheet

      Now it’s time to open up your stylesheet and write the style rule that’s going to change the appearance of the HTML element or class that you’re dealing with.

      Using the example above, here’s what you would add to your stylesheet to give the div the left indent of 100 pixels:

      .leftindent {margin-left:100px;}

      CSS Customizations – Making It Easy

      If you don’t yet have a website or blog (or if you’re thinking of starting a new one), you’ll greatly improve your ability to control the look of it if you start off with the right framework. The most customizations are possible with self-hosted WordPress and the Thesis theme. Thesis is designed to FACILITATE your CSS customizations with an easy-to-access stylesheet and a huge support community, so if you’re a design-minded gal, I’d highly recommend checking it out.

      And In Conclusion . . .

      There’s so much to learn about CSS – and if I covered it all here, this might just turn into the world’s longest Biz Ladies article. But unless you’re building sites from scratch with CSS, the basics will serve you well for now. I suggest getting your feet wet with the topics we’ve discussed here today, and if you decide you want to expand your knowledge, you can go out there and get more information whenever you’re ready.

      Chomping at the bit for more webby goodness? Then I’d like to personally invite you to sign up to get my free CSS cheat sheet that reveals two of my most powerful site-transforming tricks that you can put into place right now to pretty up your site:

      1. How to make super simple, on-the-fly CSS tweaks to your site without needing to mess with your stylesheet! GREAT for busy blog and site owners with an eye for style.

      2. How to add a background image to your site to totally transform its look and feel (and ditch your boring, plain old background forever).

      By signing up, you’ll also be the first to know when I release my women’s web mastery course, which will teach you everything you need to know if you want to up your web savvy and create a beautiful, love-every-last-detail website for yourself. If you’ve ever dreamed of running your own Design*Sponge but felt intimidated by all the technical know-how you’d need to get it up and running, this course is for you. It combines all my best training, tips and tricks, and it’s totally geared toward women (especially creative types). Because maybe you need a web designer . . . or MAYBE you can do it yourself! ;)

      Click here to grab the CSS cheat sheet and sign up now!

      Note: The links to the Thesis WordPress theme in this article are affiliate links. This means that if you click them and sign up with that service provider, Amanda will receive a commission for referring you.

      Caroline

      Thank you SO MUCH for this. It is unbelievably helpful!
      I’m a graphic design student but I also have a website for my webcomic so any CSS/HTML advice is super helpful for me. I taught myself HTML and the basics of how it works when I was younger but CSS is still kinda tricky for me. This really helps! :)

      Emily Rose

      This is really awesome. I have been learning how to use css more effectively, and this really explains the whole process clearly. My website shall be gorgeous shortly!

      Amanda

      You’re so welcome, ladies! If you have any questions, feel free to leave them in the comments. I’ll check back often to answer them. :)

      name (required)

      you must be psychic because i was just searching css how-to’s this morning in desperate need!!! and now…here it is! i can’t wait to read this, and finally learn what means…instead of what I *think* it *might* mean. : ) thanks!

      Nicole

      Thank you for all of the information! I do have one question if you have a minute: I just bought a domain name and was starting to look into web hosting and had narrowed it down to Media Temple (recommended by designer friends). My website is going to act as my shop & portfolio with a link to my blog as well. Is this something you would recommend doing in WordPress instead as I’m a beginner with CSS/HTML? Or is going with Media Temple or something similar better because I need a full site with a shop? I’m trying to find something that is professional, but where I can build it and update on my own! Thank you so much, I’ve loved all of your posts with Biz Ladies!

      Tony Brown

      Yall are so very talented ,I would love to customize my website but I’m affraid to touch it ,I can upload photos but changing the design or adding buttons like traffic counter or a samples box,I freeze at the thought of it glitching on me ,yall are very talented in deed ,yall simply rock.

      kelly : pinetothepacific

      this is the best yet of the biz ladies series!! thank you SO much for such a clear & helpful guide. bookmarked & ready to share with all my blogging ladies!

      Kat

      AWESOME! Thank you so much for introducing Firebug to me! I love him. He’s so cute. ;) I’ll be signing up for sure!!

      Stephanie W.

      Yay Amanda!! Love that you’re putting all this good info out into the world for all of us to soak in and learn from. Thank you!! :)

      TeelaC

      What a blessing this is! I’ve been wavering on the fence for quite some time with starting a bigcartel store, but any customizations HAVE to be done with css..so I’ve been frightened to sign up for fear of looking awful! I really thought my only option to play around was buying cssedit for mac, so thank you SO much for the firebug tip! I’ll definitely be trying it out!

      Amanda

      Nicole: I think you’d be very happy with self-hosted WordPress (wordpress.org). It’s easy to get up and running, and you can easily add an e-commerce plugin to allow you to have your online shop. I’m not sure what kind of package you were looking at with Media Temple, but as long as they offer one-click installation of WordPress, it should be painless to set up. Just follow my instructions in my other Biz Ladies post for that (http://www.designsponge.com/2010/06/biz-ladies-get-a-website-in-a-weekend.html).

      In terms of e-commerce plugins that you could look into, WP E-commerce is a very popular one.

      Nadia

      I am so inspired to revamp my whole site, thank you so much!

      Jan May

      Excellent article. I’m still baffled, but know my husband will get his teeth into it. Thank you for such comprehensive info.

      Leah

      This is fantastic info! Thank you! I’ve been wanting to learn more about this. I’m totally signing up for your women’s web mastery course when it becomes available!

      Redlilocks {Swoon Worthy}

      Wow, what fabulous info! I have a bit of HTML knowledge just by messing around a bit with it but this will really help me take it to the next level. THANK YOU!!!

      Dayna

      THANK YOU for this super-informative post!! There are a few elements on my blog that REALLY bug me (i.e. green bullets) and I am now armed with the knowledge to fix them! Wish me luck!

      tatum

      amazing, thanks so much for this. i love how you guys (D*S and friends) provide us readers with such helpful info we didn’t even know we wanted/needed.

      Michelle

      This is truly a wealth of knowledge. I have been afraid to dive into coding or any aspect of design – I now have the courage to approach my blog and take control of the design. THANK YOU!!!!

      Shawna

      What perfect timing!!! I’m a freelance print designer ‘dipping’ into the web world and this is just the encouragement I needed. **SPLASH**

      Erin

      I was just thinking about a couple things I want to change on my new blog. The timing of this post (and the content!) is impeccable. Thanks!

      Amanda

      Kat and Teelac: Firebug is quite the lovable little fellow, isn’t he? Glad I could introduce you to him!

      Leah: would LOVE to have you in the course! As long as you’re on the list (look for the “Click here to grab the CSS cheat sheet and sign up now!” at the bottom of the article), you’ll be the first to know when registration opens. :)

      Stacey

      Wonderful piece. Clearly written and easy to follow. I can’t wait to try these tips out on my blog. Thank you.

      Amy

      Thank you for all of this! I just saved all three of your posts and will be plowing through them today. I’ve wanted to set up just a basic little blog, but have been frustrated by not being able to make it look the way I want. I’m excited to get going now!

      Jenn

      Fantastic! I just finished my basic website and this will help me tweak all the details. It is so challenging to digest a lot of this stuff the first round. Thank you!

      Lisa M

      Finally, a CSS guide I can actually understand. This will be such a help — thanks!

      @MichelleDrewes

      Where have you been all of my life?? I am so, so excited about all of this! Thank you so much for taking the time to share your expertise with all of us ladies. I am really happy I discovered this. I have always wondered how to do this, but never even knew what CSS was.

      xo
      Michelle

      Amanda

      Michelle, you’re not alone! It’s a weird abbreviation. It should just be called “stuff to make your website pretty” instead of CSS, if you ask me!

      Alisa

      Amanda and Grace – from a print designer nearly left behind in the digital dust, THANK YOU!!

      Elisabeth

      Wow, I feel like I just took a class! I can’t thank you enough for such incredibly helpful information. I can’t wait to attack my site!

      Janet

      Thank you so much! I haven’t launched my site yet – but hope to this month.

      caitlin

      this is amazingggg!! thank you thank you for breaking it all up and making it easy to swallow!! you are an awesome designer and an inspiring teacher!

      Beckie@Cubicle57

      I know I’m a bit late on this one. But I’ll have you know that I actually scheduled a day off this week and bookmarked this post specifically so I could read and play with my blog and CSS. Firebug just rocked my world. Miniscule things that have always bothered me about the set theme on my site I can now (semi-easily) change. Sometimes 2px makes all the difference! I am grateful for your ability to put forth such a tutorial in a manner that doesn’t sound like gobbly-gook to me! Thank you thank you thank you!

      Amanda

      Woohoo, Beckie! It’s so true – in design, the little things make ALL the difference – and how amazing to be able to change them yourself now!

      Karen

      wow wish I saw this site a year ago! I’m a graphic designer/fine artist (not coder) for 25 years and I decided to train myself in WordPress and even managed to change up some WordPress sites for clients who did not want to pay a coder every time they wanted to change content. I’ve taught myself some html and css. Great site and I’ll visit often! I think any woman can code ( if I can do it – you you can too!) you take the “scary” out of it.
      k

      Lisa Harper

      I can’t explain how much this post means to me right now. I just took the plunge on consolidating my website and blog from two locations (Vistaprint and TypePad) to one location on wordpress.org. Got a premium theme and thought things would be easy. Boy was I wrong. I’ve been in tears these past few days. But thankfully, I found this article and now I feel like I can actually DO this. Whew. What a relief. I’ll be signing up for your free gift and possibly your other classes. Finally… some tech stuff I can actually understand. : )

      Vivi

      Amen to Lisa’s comment! I am a total newbie & don’t have a clue what I’m doing w/my website/blog. It was supposed to be SO easy. Tears? You betcha! Thanks for this incredible info.!

      Amanda

      I’m so proud of you ladies and your can-do attitudes! Coding isn’t exactly “easy”, but it’s definitely learnable, and you guys are proof of that! :)

      Jen at The Wholehearted Life

      Man oh man (lol) do I wish I’d found this a week ago! I spent Mon and Tues in the dregs of CSS and had a ton of fun doing it! I haven’t coded in 15+ years (just left my job in corporate IT) but spending time elbows deep in it whet my appetite for more. I’ll leave the more complex to designers but it’s nice knowing how to do some things on my own and I do believe will be a differentiating factor someday!

      seo

      I think this is one of the most vital information for me. And i’m glad reading your article. But should remark on some general things, The site style is ideal, the articles is really excellent : D. Good job, cheers

      Kristen

      Just came across this, much later than it was posted, but what a fantastic article! I’ve been wanting to change up my blog for months but haven’t had the guts to dive in. This gave me just what I needed! Thanks :)

      LEAVE A COMMENT