Learn CSS in style

Using Firebug Force State To Work On :hover Styles In Your Browser

You don’t have to waste time switching between CSS and browser, and having to wait for the page to reload.

You can simply use the force state feature and figure out all the styles that you need to with out even leaving the page or having to reload.

Inside of firebug, right click on any element that you wish to apply the state to, and select force state, then select :hover, or any of the other states.

Once you figure out how to solve our problem you can apply the changes to your CSS and move onto the next problem 🙂

Clearing Floated Elements

When a floating element is bigger than the containing element, some pretty weird things can happen.

To avoid layout errors, make sure to put this line of code before the closing tag of the containing element.

<br style="clear:both;" />

for example,

<img src="myimg.jpg" alt="my  image" style="float:left;" />
<p>just some example text to get my point across.</p>
<br style="clear:both;" />

How To Wrap Text Around Images

Okay so today someone asked me how to get text to wrap around an image on a website. This is yet another very common feature that can be used on almost every single website, so get ready to learn this easy trick!

Let’s say we have an image. The code would look like

<img src="this_awesome_image.jpg" alt="" />

First we ad a class to the image so that we can style it from our CSS file. I’m going to call this class “about_image”, it’s a good idea to create two classes, one “alignleft” and one “alignright” so that you can apply them to any elements that you wish on your site. I’ll reference that later.

Now our html looks like

<img src="this_awesome_image.jpg" alt="" class="about_image" />

Opening up your CSS file (style.css normally, could be something else though) we want to declare our new class, and define some style properties. Specifically, the float: property, and margin: property.

.about_image {
float: right;
margin: 10px;

You can either float the image to the right, or to the left. Which ever you prefer. They both behave the same.

You want to give your image a margin so that it doesn’t push up against your text, and that theres a clear separation from the surrounding elements.

Setting up 2 classes that allow you to float any element to the left or right is insanely worth while.

.align_right { float: right; }
.align_left { float: left; }

Now all you have to do is apply those classes to any and every element on your website, and things will start floating all over!