how to CSS

Posts Tagged ‘CSS’

Screen Casts for beginners - soon

Wednesday, April 1st, 2009

There are a lot of good sites out there that offer tips, tricks, and how-tos for the mid to advanced level coders and designers. However, I haven’t found many great resources for people looking to start out fresh, from the beginning. This means learning HTML, and then learning CSS (or learning them together). I find that a lot of people at this level are interested in learning how to use Dreamweaver, and are more interested in the WYSIWYG editor in Dreamweaver then learning how to code by hand.

There is no substitute for hand written code. Something created in Dreamweaver’s design view will never equal the well structured code that can be done with a text editor. It doesn’t matter if you’re on Windows or a Mac, in Textmate or Notepad++ or even Dreamweaver’s code view. What matters is you learn the language and best practices.

I’m experimenting with some screencasting software. Look for new tutorials for the beginner starting hopefully next week. If you’re beyond the beginner level, my apologies, but head over and check out Chris Coyier’s CSS tricks or net tuts. We’ll work up to those levels on this site, but for a while, we’re going back to the basics, and we’re going to do it using a hands-on approach with the aid of a screencast.

Tags: CSS, screencast
Posted in CSS | No Comments »

The Art and Science of CSS

Tuesday, November 25th, 2008

For another week, if you follow Sitepoint on Twitter you can download The Art and Science of CSS for free. I glanced through the first chapter or so this morning and it looks like it has some good stuff in it. The bits that I looked at covered some text-replacement methods that works even when users have images turned off (something I haven’t looked at or really given much thought to in the past). So I’m going to dig a little deeper into it. It probably won’t be earth shattering for those versed in CSS, but if you’re starting out I’d recommend checking it out.

Sitepoint is often a good resource, but the 99designs thing they’ve got going has left a bad taste in my mouth. It really is just spec work, and spec work is bad for many reasons. The work is often just unskilled type treatments, done for hundreds of dollars below market value. Any real designer should frown on the idea of selling their service for less than it’s worth, it’s insulting. Most of the designs have little conceptual thought, and lack big picture thinking. Everyone loses with 99designs, except for 99designs itself which takes a cut off of the ignorance of the other two parties involved. If you’re so desperate for $200 that you’ll give away a $800 - $1200 logo then need to rethink your career path. Seriously, look at the big picture. Corporate America - 40 hours of work a week should provide a decent living. Now, would you work for 1/4 of that? Do you really want to work 160 hours in that week (which is barely possible) to maintain the same level of living?

Tags: CSS
Posted in CSS | No Comments »

Using CSS Sprites

Sunday, November 16th, 2008

What are Sprites in CSS?

Simply put when you use “sprites” in CSS it’s a way of using one background image, and then changing it’s position.

Why use Sprites?

It all boils down to load time and efficiency. If you use a sprite for a background for an image, then you cut down on the total file size, and the number of http requests. If you’ve ever seen an Apache server log, you’ll see what I’m talking about. When a client requests a page from a server, the server sends the requested page, and makes requests of its own, on itself. The server requests all the images, each one is a separate http request, and each one gets served separately. A single page could have many http requests.

So, let’s take a look at using a Sprite for a navigation. Here is the Sprite (you can get it, and all the other files needed by downloading the demo files. You can also view the demo.

So let’s look at the code.

The pages look like any other page, the navigation is simply an unordered list, each list item is floated left. We put an ID on the body tag, and a class on the navigation to show the active state, especially if we were looking to put our navigation in an include (which I do). For this little tutorial I’m using HTML pages instead of PHP so you can just open the page in your browser, no server required.

<ul id="mainNav"> <li><a class=”home” href=”index.html”>home</a></li> <li><a class=”page2″ href=”page2.html”>page 2</a></li> <li><a class=”page3″ href=”#”>page 3</a></li> <li><a class=”page4″ href=”#”>page 4</a></li> <li><a class=”page5″ href=”#”>page 5</a></li> <li><a class=”page6″ href=”#”>page 6</a></li> </ul>

So now let’s look at the CSS, which may be the tricky part (though not really). I normally write all my CSS on one line, and you’ll find it that way in the demo, but for readability here, I’ll write it block-style.

#mainNav { list-style: none; padding: 0; margin: 0; } #mainNav li { float: left; font-size: 20px; font-family: Verdana, Arial, Sans-Serif; letter-spacing: -1px; line-height: 30px; text-align: center; } #mainNav li a, #mainNav li a:visited { color: #fff; text-decoration: none; background: url(’../images/spriteBG.jpg’) 0 top; width: 130px; height: 30px; display: block; } #mainNav li a:hover { color: #fff; background: url(’../images/spriteBG.jpg’) 260px top; } #home li a.home, #page2 li a.page2, #page3 li a.page3, #page4 li a.page4, #page5 li a.page5, #page6 li a.page6 { color: #600; background: url(’../images/spriteBG.jpg’) 130px top; }

The styles look pretty normal for a navigation. But, look at the background. For a link, or a visited link, the position of the background is set for the top and 0. When you hover the button, the background shifts the x position to 260px. And when the link is active (the last style), the background is shifted over 130px.

That’s about it. If you get really creative you can animate your backgrounds with jquery.

Tags: CSS, navigation, Sprites
Posted in CSS | 3 Comments »