When I started doing CSS I thought how can this really be better
than doing tables! It takes twice as long to get everything to line up
and then my pages won’t work in Firefox!... But after sitting down and
reading up and actually creating a few sites, things fell into place
and I realised actually its so much better than table based design and
how powerful CSS can be.. I thought I’d write a few minor tips and
tricks I learnt along the way…
The Wildcard:
When I see people posting at Cre8asite
with CSS problems, they are often to do with things not lining up… Or
spaces where there shouldn’t be. This is usually down to the person
not understanding that some elements have a default padding &
margins set before they even do anything…. A great way to wipe the
slate clean is to add the below ‘Wildcard’ character to the top of your
style sheet… This sets ALL padding and margins to nothing…
* {
margin:0;
padding:0;
}
Changing Form fields background colour on click / focus:
You
might have seen on some websites, they have a contact or feedback form
– When you click into one of the fields the background colour changes.
This is done using the pseudo-class :focus – although this is a
nice little addition, IE6 and below never supported it and you have to
use something called SuckerFish (Or another Javascript based function)
to make it work in those browsers.
Here’s an example of how to use the :focus psuedo-class
input:focus, textarea:focus {
background: #ECF5FD;
border-color:#000;
}
You can take this further and use the :hover
psuedo-class, changing the background colour (Or whatever you wish) on
hover - you can actually use this on anything not just form items.. Try
it on a DIV or Table Row.
input:hover, textarea:hover {
background: #ECF5FD;
border-color:#000;
}
Style for Firefox first, IE6 Second:
Sounds
a bit crazy since the major % of browser share is still IE6 BUT… Since
the release of IE7 we have seen a large increase in usage for the news
Microsoft browser and Firefox has always been making steady progress
with the market share. So because IE6 really screws your styles up, the
best way is to get your site working in FireFox (Or IE7) and then only
when it’s working properly then go to IE6 and see what it has screwed
up!
Now the best way in my opinion is to have a separate
stylesheet for IE6 and use a conditional statement in your (X)HTML to
check if the person browsing your site is using IE6 or earlier, and if
they are then include your IE6 stylesheet… If not it just gets ignored.
You
do this by using the below code, place it after your links to your
normal stylesheet… (Obviously change the folder path, and stylesheet
name accordingly)
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="styles/ie6styles.css">
<![endif]-->
Commenting:
As
with all types of web development/programming.. Don’t forget to comment
your code! Commenting makes it a lot easier to find sections within a
large stylesheet.. Here are a few examples of commenting your CSS to
make sections stand out.
/* ------------------------ A STYLE COMMENT ------------------- */
or
/* ###############################################
################ A STYLE COMMENT ##############
#################################################*/
Or
/* A boring comment */
I hope these do help someone beginning to do CSS …. And don’t give up it does geta lot easier!!