![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-3.41.48-PM.png\" "\\"Screen")
<\/a>CSSedit<\/p><\/div>\n
I usually use CSSedit because this is the software that allows me to code CSS the fastest. Through out this article, you will get to see what this software can do.<\/p>\n
If you are not using CSSedit, I recommend that you work with either Safari or Chrome <\/strong>in your CSS projects, this can save you a lot of hassle when you check other browsers later on.<\/p>\n So what I usually do is code my WordPress theme or website theme in PHP & HTML first. I layout everything properly in divs without worrying about CSS.<\/p>\n CSSedit's override function. Just open any website in the live preview and you can now override any CSS on the fly!<\/p><\/div>\n Every good website need at least 2 starting CSS file. You need a reset.css<\/strong>, this is basically a bunch of CSS codes that tells every browser out there to behave the same. You will spend less time writing different codes for other browsers if you have a good reset.css.<\/strong><\/p>\n Get your reset.css from either of these coders, that or write your own. Its just a one time thing. \ud83d\ude42<\/p>\n After throwing in the reset, you need your base CSS. By saying base, it means you need the essentials to style all the common attributes for today’s web. You may want to have different ones for certain CMS like for instance if you are on WordPress, you need to include styling for their post gallery and sticky posts.<\/p>\n An example of the base CSS that you can use to start up your CSS project each time<\/p><\/div>\n This would be good enough to start you on any CSS project, try not to be too specific when it comes to this or else it will be hell of a ride to customize them. Keep them light with only some font styling and floats. As long as they are easy to change.<\/p>\n Don't forget to include base CSS for form styling<\/p><\/div>\n Live Preview on the left, Style.css override on the right<\/p><\/div>\n Once you are proper, you can fire up CSSedit and open up your live website on the left (in this case, art.hazelong.com) and override the main CSS file that you want to change. The funky thing about CSSedit is as you code, you can see the website transform automagically!<\/p>\n As you can see, the website is now very bare but it looks simple enough for us to work on.<\/p>\n Each topic comes with a set of Covered CSS elements that you can research and learn more about them<\/a> before you continue.<\/p>\n Covered CSS elements :<\/strong><\/p>\n First thing I like to do is establish the mood for the website, since we do not have a design to go with this time. The very first thing is to give it a nice font for all the headings and body text. This can determine the direction of the design.<\/p>\n Instant fonts for your website<\/p><\/div>\n It’s 2011, unless you are still stuck in 2005 you can continue to use SIFR<\/strong> or images for fonts but all the cool dudes are using Google Font Api<\/a><\/strong> now. Make the switch!<\/p>\n Decide on the fonts and the design that you are going for.<\/p><\/div>\n This is what I get after I have decided on the font families. I am not too worried about size or colors yet.<\/p>\n Covered CSS elements :<\/strong><\/p>\n Next comes the fun part. Push your divs up, down, left, right to get the layout that you want. Amend your code to allow for further CSS customization if need be.<\/p>\n At this stage, I only worry about positioning and making sure everything is the correct size. <\/p><\/div>\n I don’t really care about colors for now but I block in some colors to get the feel that I want. I may change everything in the next step. Note that the number 5 in red aligns with the picture’s top. This is all about alignment, top, middle or bottom. Pick one that makes the design look clean.<\/p>\n Generous padding around text doesn't hurt your users' eyes<\/p><\/div>\n Learn the difference between padding and margin<\/a>. I usually have a rule when I am working with paddings, I don’t declare padding on elements that has a declared width. <\/strong>This prevent a lot of browser conflicts with their different rendering of box-model<\/strong>.<\/a><\/p>\n Don’t do this :<\/p>\n [css]div{width:500px; padding:20px}[\/css]<\/p>\n Do this instead :<\/p>\n [css]div{width:500px;} Buttons and links are given the proper padding and sizing. Grid layouts have to have the same margin horizontally and vertically<\/p><\/div>\n I repeat this for all pages and make sure everything is in order before I continue to the next step. Here is a list of troubleshooting that might help you :<\/p>\n Covered CSS elements :<\/strong><\/p>\n CSS3 generators that you will love:<\/strong><\/p>\n Note the icons for the search bar, email icon in the social sharing area and the number 5 background<\/p><\/div>\n Icons and background images do a hell lot of difference. The first thing you gotta do is throw in a background image and then work on your icons. This is where you finalize your design, I have decided to change the Heading’s font. Pick a color scheme and stick to it. This is the final round.<\/p>\n Icons are all lumped into ONE single png file. (Yes you need the PNG fix plugin\/script)<\/p><\/div>\n Before you save your icons separately one by one, note that the standard now allows us to put everything into one file, I usually call this the sprite.png. Loading this one time is better than requesting every single icon or background image. To use this file, you have to set the background-position<\/strong> so that the correct icon shows up.<\/p>\n [css]#element{background-image:\/sprite.png; Buttons and background images clean up the design<\/p><\/div>\n Now it is also time to do all the CSS3, so put in all the rounded corners and gradients that you want.<\/p>\n This current stage is also the only set of codes you need to change when you want to revamp your website according to trend.<\/p><\/div>\n All these pretty stuff are dependent on trend, doing this at one go with one group of CSS separate from the positioning CSS makes it easier to change and amend when you decide to give your website a haul next time.<\/p>\n This is the deciding step that separates the awesome design from the good design. You need user friendly stuff and also some easter eggs here and there. \u00a0For this step, you need to learn jQuery<\/strong>, HTML5<\/strong> or master CSS3 animation properties.<\/strong> Finishing touches does what it is called, it finishes a piece of creative work. If you skip this part, your design will lack the funk that it needs to have.<\/p>\n Clicking on the form's input selects it and gives it a glow. (from Twitter trend)<\/p><\/div>\n This is very subjective and depends on what you like after browsing the net every day. I have my own default set of finishing touches, and I add on to them in every website.<\/p>\nCoding the theme core<\/h3>\n
Base CSS<\/h3>\n
![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-3.42.05-PM-500x251.png\" "\\"Screen")
<\/a>\n
![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-3.49.45-PM-180x500.png\" "\\"Screen")
<\/a>![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-3.49.53-PM.png\" "\\"Screen")
<\/a>![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-3.43.31-PM-500x301.png\" "\\"Screen")
<\/a>Headings is important<\/h3>\n
\n
![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/googlefont-500x261.jpg\" "\\"googlefont\\"")
<\/a>![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-3.52.02-PM-418x500.png\" "\\"Screen")
<\/a>Position & Size makes everything nice!<\/h3>\n
\n
![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-7.12.28-PM-500x358.png\" "\\"Screen")
<\/a>![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-7.12.42-PM-500x281.png\" "\\"Screen")
<\/a>
\ndiv #element-inside-div{padding:20px}[\/css]<\/p>\n![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-7.12.52-PM-500x390.png\" "\\"Screen")
<\/a>\n
Pretty things and CSS3<\/h3>\n
\n
\n
![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-10.19.23-PM-500x352.png\" "\\"Screen")
<\/a>![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/sprite.png\" "\\"sprite\\""){kind=icon}
<\/a>
\nbackground-repeat:no-repeat;
\nbackground-position: 30px 120px; \/* this finds the correct icon *\/ [\/css]<\/p>\n![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-10.19.50-PM-500x406.png\" "\\"Screen")
<\/a>![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-10.20.18-PM-500x390.png\" "\\"Screen")
<\/a>The Polishing and Finishing<\/h3>\n
![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-10.21.24-PM.png\" "\\"Screen")
<\/a>
![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-10.22.38-PM.png\" "\\"Screen")
<\/a>![\"\"](\"http:\/\/hazelong.com\/wp-content\/uploads\/2011\/08\/Screen-Shot-2011-08-14-at-11.31.02-PM.png\" "\\"Screen")
<\/a>