Archive for the ‘design’ Category
Getting Comfortable with CSS
CSS and standards compliant web design might be old news for some of you, but for others it might be something you keep reading about, yet are afraid to try.
I thought it might be helpful to write a couple of CSS tutorials to aid in getting some of you to a point where you’re ready to “jump in”.
I mean, if I can help to make one web site on the web look a little better, I’ve done my part right?
So what is CSS anyway?
CSS stands for Cascading Style Sheets. Cascading style sheets are pages we author, which tell the browser how to display content. Many of you have relied on WYSIWYG editors to do all of the page layout for you, but what some of you don’t know, is that many of these spit out horrible code. Others of you are savvy enough to code things by hand, but are utilizing the old <table> tag to control page layout.
*hand slap* No! *hand slap* No!
If you plan on using <table> tags to control page layout, read no further.
CSS draws back the shades and lets the light in. It allows us to control page layout in an intuitive (sometimes) way that is extremely easy to change.
First of all, somewhere in the <head> of our HTML page, we need something telling the browser to go and grab the CSS page.
<link xhref=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”>
Now, your style sheet can be created in any text editor. For now, just use whatever text editor you’re comfy with, and then experiment once you’ve gotten a pretty good idea of how this all works.
Before we get into the meat of it, let’s get an understanding of selectors and classes.
Classes and Selectors
All HTML elements can be used as selectors in CSS. For example, <P> is a commonly used element in HTML. Well P can be a selector in CSS, and can be given it’s own properties (everything between the { and } )
This might look something like:
P { font-size:15px;}
So we can use any HTML element as a selector, and then define whatever properties we want – cool.
Classes
.h {font-family:Verdana; font-size:20px; font-weight:bold;}
In this example, we’re naming the class “h”. In CSS we always put a “.” before whatever class we’re describing. We can call our class whatever we want, and we can give it whatever attributes we want. The HTML calling the class might look something like this:
<span class=”h”>text here</span>
We have two basic declarations in CSS:
Properties (things like font-family, margin, and color)
Values (things like 500px or #000000)
So properties are the parts of the element we’re going to manipulate with CSS, and values are how far we are going to manipulate it.
Looking back at our .h class we see the property “font-family”, denoting what font to use, whose value is going to be “Verdana”.
ID Selector
The ID selector references a specific part of an HTML element, and is called with the # sign.
An example of this would be:
#Left {font-family:Verdana;}
This means that an HTML element calling the ID #Left will have the Verdana font (or whatever other properties and values you’d like to assign).
In the HTML this would be called like so:
<div id=”Left”>
Phew! Is that confusing enough yet?
We then get into parent/child relationships between classes and selectors. I will go into this further along the line (perhaps in part 2 or 3).
An example of this though, would be:
P.h {font-family:Courier; font-size:10px;}
in this example, we’ve taken the selector P, and have said that anytime the class ‘h’ is called within a P tag, it should have the above attributes … but only within that <P>. Other instances of ‘.h’ will be treated as described in the .h class declaration.
In the HTML this would be called like this:
<p class=”h”>
The goal here is to get some of you comfortable enough with this that you can use it to save time, and increase ability to turn out decent pages. More importantly though, is to achieve and maintain a higher standard for your work.
So are you ready to play?
Emil Stenström has a wonderful tutorial (way better than mine), and some great examples of CSS in action.
CSS Zen Garden is also a must see – with some pretty amazing examples of how CSS can manipulate a chunk of HTML into just about anything you want.
A List Apart will also get you on your way with lots of helpful tips and tricks for CSS.
In fact, I don’t even know what I’m doing trying to write a tutorial on CSS – all of the above mentioned resources have WAY more info than I do. While I’ve been utilizing CSS for a few years, it’s only been in the last year or so that I’ve started to see what it can really do. Start playing with it though, and you’ll be hooked.
I promise.
But now dialysis is over – sorry, no more for today.
Check out the links I gave you and have fun.
Long Time No See
I think I’ve posted before with the “long time no see” title, which tells you that too often I don’t have time to post here like I’d like to. So ist das Leben.
So here I am, with plenty to say, and a brand new design to the site. Hopefully things will start rolling along with my design ambitions, my blogging ambitions, and our local community.
So please get comfy, grab a coffee, and stay for awhile.
I’d appreciate comments on the new design, and any comments or suggestions in terms of content and/or navigation.