CSS Shorthand Cheat Sheet

csstypeset

CSS Frame Generator

CSS Quick Reference Guide

HTML Cheat Sheet

Grid Designer

HTML5 Canvas Cheat Sheet

CSS 2 – Quick Reference Guide – PDF

CSS Quick Reference

Cascading Style Sheets Level 1 properties Cheat Sheet

CSS Cheat Sheet

Dev Guru : CSS Quick Reference Guide

CSS Property Index

RGB Hex Colour Chart

MoreCSS

Cheat Sheet CSS Shorthand Codes

Elizabeth Castro : CSS Properties and Values

How to Add Variables to Your CSS Files

YAML Builder

Drawter

5 Techniques to Acquaint You With CSS 3

CSS fix for the double margin float bug in IE6

IFSkinZone: CSS Cheat Sheet (HTML)

Deploy

Fun With CSS Shapes

Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework

Creating a CSS layout from scratch

Prototyping With The Grid 960 CSS Framework

Advanced Typography techniques using CSS

Absolute Positioning Inside Relative Positioning

Gosquared CSS help sheets

CSS Cheat Sheet (V2)

Core css

Blueprint CSS Cheat Sheet

lesliefranke.com

Related Articles

• 35+ Useful Ajax Tutorials for Web Developers
• Amazing Collection of CSS Based Professional Form Design Tutorials
• Useful and Practical CSS Tips and Tricks for Web Designers and Developers
• How to Apply Conditional Styling for Internet Explorer
• 15+ Website Design Converting PSD to HTML/CSS Tutorials

Turn postcard photo into a stunning comment form using CSS

Adding Style with CSS

Fancy Form Design Using CSS

Make your forms beautiful with CSS

A Simple Tableless Form

How To Create a Good Looking Form

Formy-CSS-Framework

Niceforms

CSS Styling of Forms

Styling Even More Form Controls

Trimming Form Fields

A List Apart: Articles: Prettier Accessible Forms

5 Uniquely Designed and Coded Web Form Styles

Background Images into Form Fields with CSS

Semantic Horizontal Forms

Designing Simple & Beautiful CSS Based Forms

How to Create a Perfect Form Markup and Style it with CSS

Enhance your input fields with simple CSS tricks

Validation best practices

Make image buttons a part of input fields

How to deal with large webforms

Related Articles

• Useful and Practical CSS Tips and Tricks for Web Designers and Developers
• 35+ Useful Ajax Tutorials for Web Developers
• Simplify Web Development Using Ultimate CSS Cheats
• How to Apply Conditional Styling for Internet Explorer
• 15+ Website Design Converting PSD to HTML/CSS Tutorials

CSS-Based Tables: Techniques

Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

Image Floats without the Text Wrap

Dynamic Piechart with CSS

Creating rounded corners (the “Deviant art’s” way)

How To Create an IE-Only Stylesheet

Figures & captions

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

Get a Consistent Base Font Size

Avoid CSS hacks, use future proof method

Nifty Corners: rounded corners without images

CSS Sprites

The CSS Overflow Property

Poll Results: Hyphens, Underscores, or camelCase?

A pinned-down menu

The CSS Box Model

Alternative style sheets

CSS Ratings Selector

A confetti menu

Rational Z-Index Values

CSS Tabs

CSS For Bar Graphs

Even/odd: coloring every other row

Adam’s Radio & Checkbox Customisation Method

The ‘:target’ pseudo-class

5 Techniques to Style Buttons using Images and CSS

CSS Image Replacement for Buttons

CSS Unordered List Calender

Drop shadows (using css)

CSS-Based Forms: Techniques

Rounded corners and shadowed boxes

Related Articles

• Amazing Collection of CSS Based Professional Form Design Tutorials
• 15+ Website Design Converting PSD to HTML/CSS Tutorials
• 20+ Ultimate Collection of PSD to HTML Tutorials
• 35+ Useful Ajax Tutorials for Web Developers
• How to Applying CSS with Different Methods

The example below shows how to target ALL versions of IE.

<!--[if IE]>  
        <link type="text/css" rel="stylesheet" href="IE-only.css" />  
<![endif]-->

It is also possible to simply write the CSS for IE right in the conditional stylesheets.

<!--[if IE]>    
<style type="text/css">     
#div_outer { margin-left: 20px; }    
</style>       
<![endif]-->

Here’s how to target all versions BEFORE IE 8. The “lt” stands for Less Than.

<!--[if lt IE 8]>  
        <link type="text/css" rel="stylesheet" href="IE_lessThan8.css" />  
<![endif]-->

Here’s how to target all versions ABOVE IE 6. The “gt” stands for Greater Than.

<!--[if gt IE 6]>  
        <link type="text/css" rel="stylesheet" href="IE_greaterThan6.css" />  
<![endif]-->

Anyone with previos programming knowledge knows that an an exclamation point “!” means NOT. So to target everything EXCEPT Internet Explorer:

<!--[if !IE]><!-->  
        <link type="text/css" rel="stylesheet" href="noIE.css" />  
<!--<![endif]-->

Related Articles

• 35+ Useful Ajax Tutorials for Web Developers
• Simplify Web Development Using Ultimate CSS Cheats
• Amazing Collection of CSS Based Professional Form Design Tutorials
• Useful and Practical CSS Tips and Tricks for Web Designers and Developers
• 15+ Website Design Converting PSD to HTML/CSS Tutorials

First create a PHP file that will display your contact form, name it index.php. Then create another PHP file and name it contact.php; this is where it will take the information the user entered and send it to an email of your choice.

So in the index.php, we’ll set up the form:

<form method="post" action="contact.php" id="comm_form">

   <fieldset>

   <label for="name">Name : </label> 
   <input type="text" name="name" id="name" class="required" minlength="2" />

   <div class="push_down"> 
   <label for="email">E-Mail : </label> 
   <input type="text" name="email" id="email" class="required email" /> 
   </div>

   <div class="push_down"> 
   <label for="subject">Subject : </label> 
   <input type="text" name="subject" id="subject" /> 
   </div>

   <div class="push_down"> 
   <textarea name="message" id="message" rows="8" cols="66" class="required"></textarea>    
   </div>

   <input type="submit" id="button" name="submit" value="Submit"/>

   </fieldset> 
</form>

So we create a <form> and set its method to POST and its action is “contact.php” because that is where we will actually do the email setup and sending. Then we create a <fieldset>, and what this basically does is group all our next elements together so it looks neater and more like a contact form.

Our first label is “name”, and this is where the user enters their name. You don’t want to receive an email without a name, so that is why we set our class to required and so now if the user doesn’t enter a name before they click submit, they’ll receive an error. The ID of the elements is important, so remember that the ID for our label name, is name.

Then we create another label called email, and this is where the user will enter their own email. You also don’t want to receive an email without a returning email, so we set our class to required email. The ID for this label is email. Then we enclose all of this within a div of class “push_down”, which will basically just push down this label to give some space between the other labels around it. In the CSS file: .push_down { padding-top: 10px; } This spacing should be suitable enough.

We do the same for Subject as we did for Email, except we don’t any requirements in its class because the subject of an email isn’t really of high importance.

Then we add a <textarea> and this is where the user will create their message. We set the ID to message, its rows to 8 and its columns to 66, and then we also set the class to “required” because you can’t get an email without any sort of actual message (disregarding attachments). Finally add an input type of submit and give it an ID of button. This will be our submit button that the user presses.

Now that we have the HTML part setup, we need to allow Javascript to validate our forms in the fields we marked as required. So add the jQuery AND jQuery Validate Libraries.

<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>      
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>   

Then to allow validation of the required fields write:

<script type="text/javascript">

$(document).ready(function(){

$("#comm_form").validate(); /* this is the ID you gave to your form */

});

</script>

This is how your form should look like. Now the form, jQuery validation, and minor CSS are setup, let’s setup the contact.php file.

In the contact.php file, our PHP syntax will have to be within <?php and ?>, just like any other PHP file. So the first thing we’ll do is get the user’s name, setup where the email is being sent to, and what the subject is. These are the three things you must first enter when sending an email through any email client: yahoo, gmail, etc. So we’ll set it up the same way.

$Email_from = $_POST['email'];     /* we set our variable $Email_from to equal whatever information was in the form with the ID of 'email' (this was the user's own email) */  
$Email_to = "yourname@webmaster.com";  /* this is where you enter YOUR OWN email. It's where the email will be sent to when the user presses submit */   
$Subject = $_POST['subject'];         /* we declare a variable for the email's subject */         

$Message = trim(stripslashes($_POST['message']));     /* this is the actual message now. This is what the user entered in the textarea in the form. */       

/* email body text. we set it to be blank, then we set it to say "Message: users message will go here."        
$Body = ""; 
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

/* send email */
$send = mail($EmailTo, $Subject, $Body, "From: <$Email_from>");

/* if it's successful */
if ($send) {
print " <meta http-equiv=\"refresh\" content=\"0;URL=index.php\"> ";  /* it will reload the index page if the sending was successful */ 
}

And that’s all it takes to setup a contact form! You can now style the form in the HTML page however you would like. All the necessary components of setting up a contact form were all covered here though. I hope this was helpful!

Random Posts

• Convert a Photo into Pencil Sketch using Photoshop
• jQuery Simple UI Slider Tutorial
• How to Create Wallpapers in Photoshop
• Difficulty: Intermediate
• 30 Tutorials for Improve your Graphical Skills

Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Visual Walkthrough of @font-face CSS Code

Free CSS3 Site Under construction Templates

PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

Rounded Corners, Drop Shadows, Opacity & CSS3

Zebra-striping rows and columns

CSS3 Media Queries

Media Queries in CSS3

Advanced CSS3 Techniques You Should Learn

CSS3 Gradient Image Masks

A CSS3 Enhanced Photo Gallery

Lightbox effect in CSS3 using transition

This is a french tutorial. Use Google’s translate service to translate this tutorial to your preferred language.

Sexy Sliding Image Gallery in Pure CSS3

The CSS3 Carousel Experiment

CSS Flip Experiment

CSS3 Tile Flip Animation Tutorial

Create Animated Price Grid Using CSS3

Animated Sprites with CSS3 Transitions

Simple animated backgrounds using CSS3

OSX Fan Effect Using CSS3 Animations

A Dropdown Menu with CSS3 enhancements

Fading Button Background Images With CSS3 Transitions

CSS Captcha 0.2 beta

CSS Tooltips with the Pseudo Element

Webkit Animated Loading Indicator

How to Draw a Smiley Face with CSS3

CSS3 Lasers

Coding Colors Easily Using CSS3 hsl() Notation

Recreating YouTube Search Form and Other Buttons Using CSS3

Quick and easy way to make cool buttons using CSS3

A CSS3 Shiny Button

CSS3 Buttons with Icons

Quick Tips: Sexy Buttons in Just CSS3

Creating the Perfect CSS3 Buttons

Make CSS3 buttons that are extremely fancy

CSS3 Glass Text

Related Articles

• 40+ Outstanding CSS3 Tutorials for Web Development

1: Always Close Your Tags

view plaincopy to clipboardprint?

<li>Some text here. 
<li>Some new text here. 
<li>You get the idea. 

Notice how the wrapping UL/OL tag was absent. Additionally, many chose to leave off the closing LI tags as well. By today’s standards, this is just bad practice and should be 100% avoided. Always, always close your tags. Otherwise, you’ll encounter corroboration and malfunction issues at every turn.

Better

view plaincopy to clipboardprint?

<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>
  

2: Declare the Correct DocType

When I was younger, I participated quite a bit in CSS forums. Whenever a user had an issue, before we would look at their situation, they HAD to perform two things first:

1. Validate the CSS file. Fix any necessary errors.
2. Add a doctype.

Most of us choose between four dissimilar doctypes when creating new websites.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

There’s a big discussion currently going on about the correct choice here. At one point, it was measured to be best practice to use the XHTML Strict version. Though, after some research, it was realized that most browsers relapse back to regular HTML when interpreting it. For that reason, many have selected to use HTML 4.01 Strict instead. The bottom line is that any of these will keep you in check. Do some examine and make up your own mind.

3: Never Use Inline Styles

When you’re hard at work on your markup, sometimes it can be alluring to take the easy route and sneak in a bit of styling.

• <p style=”color: red;”>I’m going to make this text red so that it really stands out and makes people take notice! </p>

Instead, finish your markup, and then reference that P tag from your external stylesheet.

Better

view plaincopy to clipboardprint?

#someElement > p { 
 color: red; 
}

4: Place all External CSS Files Within the Head Tag

Technically?, you can place stylesheets wherever you like. Though, the HTML requirement recommends that they be placed within the document HEAD tag. The primary advantage is that your pages will apparently load faster.

view plaincopy to clipboardprint?

<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet"type="text/css"media="screen"href="path/to/file.css"/>
<link rel="stylesheet"type="text/css"media="screen"href="path/to/anotherFile.css"/>
</head>
  

5: Consider Placing Javascript Files at the Bottom

Remember – the prime goal is to make the page load as rapidly as likely for the user. When loading a script, the browser can’t continue on until the entire file has been loaded. Thus, the user will have to wait longer before noticing any development.

If you have JS files whose only purpose is to add functionality – for example, after a button is clicked – go ahead and place those files at the bottom, just before the closing body tag. This is completely a best practice.

Better

view plaincopy to clipboardprint?

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript"src="path/to/file.js"></script>
<script type="text/javascript"src="path/to/anotherFile.js"></script>
</body>
</html>
  

6: Never Use Inline Javascript. It’s not 1996!

Another ordinary practice years ago was to place JS commands straight within tags. This was very ordinary with simple image galleries. Essentially, a “onclick” attribute was appended to the tag. The value would then be equal to some JS method. Unnecessary to say, you should never, ever do this. Instead, transfer this code to an external JS file and use “addEventListener/attachEvent” to “listen” for your preferred event. Or, if using a framework like jQuery, just use the “click” method.

view plaincopy to clipboardprint?

$('a#moreCornInfoLink').click(function() { 
 alert('Want to learn more about corn?'); 
});
  

7: Validate Continuously

I recently blogged about how the idea of validation has been completely misconstrued by those who don’t completely understand its purpose. As I mention in the article, “validation should work for you, not against.”

However, especially when first getting started, I highly recommend that you download the Web Developer Toolbar and use the “Validate HTML” and “Validate CSS” options continuously. While CSS is a somewhat easy to language to learn, it can also make you tear your hair out. As you’ll find, many times, it’s your shabby markup that’s causing that strange whitespace issue on the page. Validate, validate, validate.

8: Download Firebug

I can’t recommend this one sufficient. Firebug is, without doubt, the best plugin you’ll ever use when creating websites. Not only does it provide unbelievable Javascript debugging, but you’ll also learn how to pinpoint which elements are inheriting that extra padding that you were unaware of. Download it!

9: Use Firebug!

From my experiences, many users only take benefit of about 20% of Firebug’s capabilities. You’re truly doing yourself a disservice. Take a couple hours and scour the web for every commendable tutorial you can find on the subject.

Resources

• Overview of Firebug
• Debug Javascript With Firebug – video tutorial

10: Keep Your Tag Names Lowercase

Technically, you can get away with capitalizing your tag names.

view plaincopy to clipboardprint?

<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>

<DIV> <P>Here's an interesting fact about corn. </P> </DIV>

Having said that, please don’t. It serves no purpose and hurts my eyes – not to mention the fact that it reminds me of Microsoft Word’s html function!

Better

view plaincopy to clipboardprint?

<div>
<p>Here's an interesting fact about corn. </p>
</div>

11: Use H1 – H6 Tags

Admittedly, this is something I tend to relaxed on. It’s best practice to use all six of these tags. If I’m honest, I frequently only execute the top four; but I’m working on it! For semantic and SEO reasons, force yourself to replace that P tag with an H6 when appropriate.

view plaincopy to clipboardprint?

<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>
  

12: If Building a Blog, Save the H1 for the Article Title

Just this morning, on Twitter, I asked our followers whether they felt it was smartest to place the H1 tag as the logo, or to instead use it as the article’s title. Around 80% of the returned tweets were in errand of the latter method.

As with anything, decide what’s best for your own website. Though, if building a blog, I’d recommend that you save your H1 tags for your article title. For SEO purposes, this is a better practice – in my opinion.

13: Download ySlow

Particularly in the last few years, the Yahoo team has been doing some really great work in our field. Not too long ago, they released an extension for Firebug called ySlow. When activated, it will examine the given website and return a “report card” of sorts which details the areas where your site needs enhancement. It can be a bit harsh, but it’s all for the greater good. I extremely recommend it.

14: Wrap Navigation with an Unordered List

Each and every website has a navigation section of some sort. While you can definitely get away with formatting it like so:

view plaincopy to clipboardprint?

<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>


 <div id="nav">   <a href="#">Home </a> <a href="#">About </a> <a href="#">Contact </a>  </div>

I’d encourage you not to use this method, for semantic reasons. Your job is to write the best possible code that you’re capable of.

The UL tag is meant to contain a list of items.

Better

view plaincopy to clipboardprint?

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
  

15: Learn How to Target IE

You’ll certainly find yourself screaming at IE during some point or another. It’s actually become a bonding knowledge for the community. When I read on Twitter how one of my buddies is battling the forces of IE, I just smile and think, “I know how you feel, pal.”

The first step, once you’ve completed your primary CSS file, is to create a unique “ie.css” file. You can then orientation it only for IE by using the following code.

view plaincopy to clipboardprint?

<!-[if lt IE 7]>
<link rel="stylesheet"type="text/css"media="screen"href="path/to/ie.css"/>
<![endif]->


<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->

This code says, “If the user’s browser is Internet Explorer 6 or lower, import this stylesheet. Otherwise, do nothing.” If you need to compensate for IE7 as well, simply replace “lt” with “lte” (less than or equal to).

16: Choose a Great Code Editor

Whether you’re on Windows or a Mac, there are plenty of fantastic code editors that will work wonderfully for you. Personally, I have a Mac and PC side-by-side that I use throughout my day. As a result, I’ve developed a pretty good knowledge of what’s available. Here are my top choices/recommendations in order:

Mac Lovers

• Coda
• Espresso
• TextMate
• Aptana
• DreamWeaver CS4

PC Lovers

• InType
• E-Text Editor
• Notepad++
• Aptana
• Dreamweaver CS4

17: Once the Website is Complete, Compress!

By zipping your CSS and Javascript files, you can reduce the size of each file by a substantial 25% or so. Please don’t bother doing this while still in development. However, once the site is, more-or-less, complete, utilize a few online compression programs to save yourself some bandwidth.

Javascript Compression Services

• Javascript Compressor
• JS Compressor

CSS Compression Services

• CSS Optimiser
• CSS Compressor
• Clean CSS

18: Cut, Cut, Cut

Looking back on my first website, I must have had a SEVERE case of divitis. Your natural instinct is to safely wrap each paragraph with a div, and then wrap it with one more div for good measure. As you’ll quickly learn, this is highly inefficient.

19: All Images Require “Alt” Attributes

It’s easy to ignore the necessity for alt attributes within image tags. Nevertheless, it’s very important, for accessibility and validation reasons, that you take an extra moment to fill these sections in.

Bad

view plaincopy to clipboardprint?

<IMG SRC="cornImage.jpg"/>


<IMG SRC="cornImage.jpg" />

Better

view plaincopy to clipboardprint?

<img src="cornImage.jpg"alt="A corn field I visited."/

20: Stay up Late

I highly doubt that I’m the only one who, at one point while learning, looked up and realized that I was in a pitch-dark room well into the early, early morning. If you’ve found yourself in a similar situation, rest assured that you’ve chosen the right field.

The amazing “AHHA” moments, at least for me, always occur late at night. This was the case when I first began to understand exactly what Javascript closures were. It’s a great feeling that you need to experience, if you haven’t already.

21: View Source

What better way to learn HTML than to copy your heroes? Initially, we’re all copiers! Then slowly, you begin to develop your own styles/methods. So visit the websites of those you respect. How did they code this and that section? Learn and copy from them. We all did it, and you should too. (Don’t steal the design; just learn from the coding style.)

Notice any cool Javascript effects that you’d like to learn? It’s likely that he’s using a plugin to accomplish the effect. View the source and search the HEAD tag for the name of the script. Then Google it and implement it into your own site! Yay.

22: Style ALL Elements

This best practice is especially true when designing for clients. Just because you haven’t use a blockquote doesn’t mean that the client won’t. Never use ordered lists? That doesn’t mean he won’t! Do yourself a service and create a special page specifically to show off the styling of every element: ul, ol, p, h1-h6, blockquotes, etc.

23: Use Twitter

Lately, I can’t turn on the TV without hearing a reference to Twitter; it’s really become rather obnoxious. I don’t have a desire to listen to Larry King advertise his Twitter account – which we all know he doesn’t manually update. Yay for assistants! Also, how many moms signed up for accounts after Oprah’s approval? We can only long for the day when it was just a few of us who were aware of the service and its “water cooler” potential.

Initially, the idea behind Twitter was to post “what you were doing.” Though this still holds true to a small extent, it’s become much more of a networking tool in our industry. If a web dev writer that I admire posts a link to an article he found interesting, you better believe that I’m going to check it out as well – and you should too! This is the reason why sites like Digg are quickly becoming more and more nervous.

24: Learn Photoshop

A recent commenter on Nettuts+ attacked us for posting a few recommendations from Psdtuts+. He argued that Photoshop tutorials have no business on a web development blog. I’m not sure about him, but Photoshop is open pretty much 24/7 on my computer.

In fact, Photoshop may very well become the more important tool you have. Once you’ve learned HTML and CSS, I would personally recommend that you then learn as many Photoshop techniques as possible.

1. Visit the Videos section at Psdtuts+
2. Fork over $25 to sign up for a one-month membership to Lynda.com. Watch every video you can find.
3. Enjoy the “You Suck at Photoshop” series.
4. Take a few hours to memorize as many PS keyboard shortcuts as you can.

25: Learn Each HTML Tag

There are literally dozens of HTML tags that you won’t come across every day. Nevertheless, that doesn’t mean you shouldn’t learn them! Are you familiar with the “abbr” tag? What about “cite”? These two alone deserve a spot in your tool-chest. Learn all of them!

By the way, in case you’re unfamiliar with the two listed above:

• abbr does pretty much what you’d expect. It refers to an abbreviation. “Blvd” could be wrapped in a <abbr> tag because it’s an abbreviation for “boulevard”.
• cite is used to reference the title of some work. For example, if you reference this article on your own blog, you could put “30 HTML Best Practices for Beginners” within a <cite> tag. Note that it shouldn’t be used to reference the author of a quote. This is a common misconception.

26: Use a CSS Reset

This is another area that’s been debated to death. CSS resets: to use or not to use; that is the question. If I were to offer my own personal advice, I’d 100% recommend that you create your own reset file. Begin by downloading a popular one, like Eric Meyer’s, and then slowly, as you learn more, begin to modify it into your own. If you don’t do this, you won’t truly understand why your list items are receiving that extra bit of padding when you didn’t specify it anywhere in your CSS file. Save yourself the anger and reset everything! This one should get you started.

view plaincopy to clipboardprint?

html, body, div, span, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
img, ins, kbd, q, s, samp, 
small, strike, strong, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
 margin: 0; 
 padding: 0; 
 border: 0; 
 outline: 0; 
 font-size: 100%; 
 vertical-align: baselinebaseline; 
 background: transparent; 
} 
body { 
 line-height: 1; 
} 
ol, ul { 
 list-style: none; 
} 
blockquote, q { 
 quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
 content: "; 
 content: none; 
} 

table { 
 border-collapse: collapse; 
 border-spacing: 0; 
} 

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-size: 100%; 	vertical-align: baseline; 	background: transparent; } body { 	line-height: 1; } ol, ul { 	list-style: none; } blockquote, q { 	quotes: none; } blockquote:before, blockquote:after, q:before, q:after { 	content: ''; 	content: none; }  table { 	border-collapse: collapse; 	border-spacing: 0; }

27: Line ‘em Up!

Generally speaking, you should strive to line up your elements as best as possible. Take a look at you favorite designs. Did you notice how each heading, icon, paragraph, and logo lines up with something else on the page? Not doing this is one of the biggest signs of a beginner. Think of it this way: If I ask why you placed an element in that spot, you should be able to give me an exact reason.

28: Don’t Use a Framework…Yet

Frameworks, whether they be for Javascript or CSS are fantastic; but please don’t use them when first getting started. Though it could be argued that jQuery and Javascript can be learned simultaneously, the same can’t be made for CSS. I’ve personally promoted the 960 CSS Framework, and use it often. Having said that, if you’re still in the process of learning CSS – meaning the first year – you’ll only make yourself more confused if you use one.

CSS frameworks are for experienced developers who want to save themselves a bit of time. They’re not for beginners.

Related Articles

• 35+ Useful Ajax Tutorials for Web Developers
• Useful and Practical CSS Tips and Tricks for Web Designers and Developers
• 15+ Website Design Converting PSD to HTML/CSS Tutorials
• How to Applying CSS with Different Methods
• 20+ Ultimate Collection of PSD to HTML Tutorials

In this article more than 20+ Photoshop Tutorials showing you the tricks you need to convert you designs into HTML and CSS. Even with the paramount tutorials at hand cutting up designs isn’t a straightforward task. To make sure you get the job done tripwire magazine also provides a list of more…

PSD to HTML: Hawk Studios

Portfolio Layout Site Build

Download CSS

Build a Sleek Portfolio Site From Scratch

There’s nothing like building an complete site to show you a good impression of how a CSS layout should work. Over at PSDTUTS we’ve got a tutorial where you design up a sleek, high end web design. In this tutorial we’re going to take that PSD file and construct it with some nice clean HTML and CSS.

Source File

Encoding a Photoshop Mockup Into XHTML & CSS

Enduring from a recent tutorial, Create a Vibrant Blog Design in Adobe Photoshop, we’ll now look at taking the concept and implementing it into an actual webpage constructed in xHTML and CSS. By exporting the imagery from Photoshop and coding up the page we’ll construct a working instance of the overall blog design.

The Design Lab: PSD Conversion

Hello, welcome to another layout coding tutorial. In this tutorial il show how to code my design lab layout tutorial. Make sure you have your PSD ready made in Photoshop.

Download PSD

Download CSS

Coding a Creative Design Layout

Welcome, in this tutorial il teach you how to convert my “creative design layout” into a working CSS/HTML valid website.

Download PSD

Download CSS

PSD to CSS/HTML In Easy Steps

This is the first in our 4 part series on how to take a PSD file and alter it into a fully CSS based html page. These are the first in a series of tutorials in which we construct a fully working Photography site, all in clean xHTML and CSS. All the code, templates and files are accessible for you to play with, and we encourage you to download and play with what is provided. The design template is licensed under the creative commons licence.

CSS Template Tutorial: Setting Up

Okay welcome to part one of the tutorial. What you will be doing in this part is setting everything up to begin coding your template for your website. This tutorial is for slicing a design made in Photoshop and coding it in Dreamweaver. You can also access example code at a variety of stages through the tutorial if you have any problems.

Web Design Layout: Site Build

Hello everybody today I’ll be showing you how to code the web design layout #9 PSD. I lately setup a poll to see which one you all required to see as a coded tutorial, and this one won. Thanks to everybody who took part in the obedience process.

Download CSS

BlooPRESS PSD to HTML

Download CSS

Converting a Design From PSD to HTML: Screencast

Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the attractiveness of that meticulous tutorial, I’ve determined to create a second series. Though, I’m not much of a designer. Instead, I asked Collis if he would allow me to use the design that he used for a recent tutorial for Web Design Week.

PSD to HTML Slicing Tutorial

Ok, as I’ve said HERE, my great psd slicing tutorial is done. Please note that it is my very first video tutorial so I’m sorry for this things:

1. If I cut out too much parts (yes, some parts like ALT-TAB window, start menu showing, and so on are missing). I considered that those parts are not essential so, to reduce size, I’ve cut them out.
2. If it’s taking too long. The tutorial consists in two parts, both are around 30 minutes. I wanted to play them at 150-200% speed, but I quit. I offer a download alternative (besides the online playing), so you can download files and play them in your favorite media player with higher speed.
3. If I have language errors. English is not my native language, so I made mistakes. Some mistakes I’ve seen, some not. But it takes way to long to edit the videos again and again. I consider that errors are acceptable because the final result (which is that you understand how it’s made) is more important.

Source Videos

Coding a Layout

Here is a basic design composition. The problem now becomes turning it into code while maintaining the style and arrangement that was determined upon as well as making sure that the site is reachable across browsers/platforms and is as light and graceful as possible.

Slice and Dice That PSD: Screencast

In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.

Portfolio Layout #4

Hello there, in this tutorial il show you the code behind my portfolio layout #4. You can also download the CSS template for free.

Download PSD

Download CSS

Related Articles

• Useful and Practical CSS Tips and Tricks for Web Designers and Developers
• 20+ Ultimate Collection of PSD to HTML Tutorials
• 35+ Useful Ajax Tutorials for Web Developers
• How to Applying CSS with Different Methods
• Simplify Web Development Using Ultimate CSS Cheats

1.  The Design Lab: PSD Conversion

Hello, welcome to another layout coding tutorial. In this tutorial il show how to code my design lab layout tutorial. Make sure you have your PSD ready made in photoshop.

Download CSS Download PSD

2. From PSD to HTML, Building a Set of Website Designs Step by Step

Today I’m going to take you through my entire procedure of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that ultimately will become a WordPress theme. It’s a huge tutorial, so if you’re going to follow through to the end, make sure you have a few hours to extra!

Source File

3.  Coding: Design Lab TV Styled Layout

in this tutorial you will learn how to code the Design Lab TV Styled layout into xhtml and css. If you have any questions about this tutorial are sure to ask in the explanation. Also, bear in mind with all the tutorials, the source files are obtainable for download.

4. PSD to CSS/HTML in Easy Steps – Part 1

This is the first in our 4 part series on how to take a PSD file and change it into a fully CSS based html page. These are the first in a series of tutorials in which we construct a completely working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and we give confidence you to download and play with what is provided. The design template is licenced under the creative commons licence.

5. Slice and Dice that PSD

In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and helping it on a temperate hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.

Source File

6.  Converting a Photoshop Mockup: Part Two, Episode One

There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is dissimilar will necessitate different conversion techniques so there will be abundance to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!

Download Files

7.  Build a Sleek Portfolio Site from Scratch

There’s nothing like building an whole site to show you a good impression of how a CSS layout should work. Over at PSDTUTS we’ve got a tutorial where you design up a sleek, high end web design. In this tutorial we’re going to take that PSD file and construct it with some nice spotless HTML and CSS.

Source File

8. Portfolio Layout – Learn To Code It

Hello, welcome to the coding tutorial of the portfolio #10 layout. In this tutorial il give details the steps to take in slicing and coding the layout. Before attempting this tutorial i highly propose you create the layout before hand and have it ready

Source File

9. Converting a Design From PSD to HTML

Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the fame of that exacting tutorial, I’ve decided to create a second series. However, I’m not much of a designer. Instead, I asked Collis if he would permit me to use the design that he used for a recent tutorial for Web Design Week.

10.  How to Convert a PSD to XHTML

I continue to be astonished by how well Collis’s “Build a Sleek Portfolio Site From Scratch” tutorial continues to execute. It’s been months, yet it still posts strong numbers every week. Bearing in mind that fact, I decided to create a screencast that shows you precisely how to convert a PSD into perfect XHTML/CSS.

Source File

11.  Creating a CSS Layout from scratch

Note: To follow this section, you’ll need to install the IE standalone versions. These are unconfirmed hacks of old IE versions that you can install along side your present IE version.
Let’s start the hacks at the current problem child, IE5.
Load up your IE5 browser. There are 2 things that I notice instantly that are wrong. The first is that the page isn’t centered in the browser like it should be, and the second is that the footer has a strange alignment issue.
The alignment issue is well known, so we’ll tackle that one first.
IE 5 and 5.5 do not recognize the margin: auto; css property like they should. To get around this we need to use the text-align: center; property on the body which will center the container div.

12. PSD > HTML/CSS

Download PSD

13. Encoding a Photoshop Mockup into XHTML & CSS

Continuing from a recent tutorial, Create a Vibrant Blog Design in Adobe Photoshop, we’ll now look at taking the concept and implementing it into an actual webpage constructed in xhtml and css. By exporting the imagery from Photoshop and coding up the page we’ll produce a working example of the overall blog design.

14.  Css Template Tutorial

welcome to part one of the tutorial. What you will be doing in this part is setting everything up to begin coding your template for your website. This tutorial is for slicing a design made in Photoshop and coding it in dreamweaver. You can also access instance code at a variety of stages through the tutorial if you have any problems.

15. Portfolio Layout 4: The Code

in this tutorial il show you the code behind my portfolio layout #4. You can also download the CSS template for free.

Download CSS Download PSD

16. Tutorial Coding a Layout

So, you’ve designed your next site but you’re having a little difficulty turning your lovely PSD into a coded layout. This tutorial should help you learn how to examine either a new template, or even your existing layout to find the best way to code it.

17.  Converting a Photoshop Mockup

In this first-ever video podcast, I start the conversion procedure of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is attractive rough here folks, I’m sure these will get more focused with time.

Download Photoshop File

Download Website Files

18.  Killer site – From Illustrator to Xhtm to Drubal

This tutorial is another particular series written guest author Sean Hodge from aiburn.com and Association Cube. He is an specialist in Drupal, which I am totally not familiar with. He intrigued me when he told me that the preponderance of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was concerned in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

Read the introduction – What’s Drupal and why?
Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin

19.  From PSD to HTML

In this tutorial I’m going to show you how to take the design created for my Fundamentals of Interface Design tutorial and turn that into a usable web interface.

20.  Coding a Car Sales Layout

Load my car sales layout into photoshop (if you haven’t got the layout already made, go here to make it). Once opened in photoshop we will need to assess what were going to need. The layout im using is pretty easy and most of it can be done in css.

Related Articles

• Best Ever Web Layout Designs Photoshop Tutorials
• 20+ GIMP Tutorials for Designers
• Extraordinarily Well Written Icon Design Tutorials

Design Dazzling

Tutorials Palace

Tutorialized

Tutorials Garden

Tutorial-Center

Hacker News

Tutorial Vault

Luxa

Graphic-Design-Links

FS Tutorials

Photoshop Road Map

Pxl Eyes

Tutorial Kit

PS Lover

Total Tutorial

Tutorial Man

CG-Links

Tutorio

Design Bump

Pixel Groovy

Vunky Search

Tip Clique

Tutorialing

Tutorial King

Faq Pal

Pixel2Life

Good-Tutorials

Share your work with others for learn about in following areas:

Adobe Illustrator , Adobe ImageReady , Adobe InDesign , Adobe PageMaker , Adobe Photoshop , Adobe Premiere , Apophysis, Application Skinning, ASP Coding , AutoCAD, Avid Xpress Pro, Bioshock, Blender 3D, BodyPaint, Bryce , C++ General, Cinema 4D, Corel Painter, CorelDraw and Corel PhotoPaint, CSS Stylesheets, General Website Development, Halo 2 Bridging , HTML Coding, Java Development, Javascript, Macromedia ColdFusion, Macromedia Dreamweaver, Macromedia Fireworks, Macromedia Flash, Macromedia FreeHand, Maya 3D, Microsoft Excel, Microsoft Powerpoint, Microsoft Word , PHP Coding , Pinnacle Hollywood FX , Pinnacle Studio , PSP Modding, Ruby On Rails, Sony Vegas, Swift, Terragen, Ulead Cool ,3D GameStudio , Delphi, Studio Max , Adobe After Effects , Adobe Audition , Adobe Flex Tutorials, Adobe GoLive , Windows XP…

Submission Resources for 3D Tutorials

http://www.3d-tutorials.com/submit.php

http://www.3d-tutorial.com/tutorialsub.php

http://www.tutcity.com/add_tutorial/

http://www.tutorialadvisor.com

http://www.infinitee-designs.com/Tutorial-Submisson.htm

Related Articles

• 120 Websites to Promote and Submit Your Tutorials and Design Articles
• Extraordinarily Well Written Icon Design Tutorials
• Best Resources for Submit Design Tutorials
• Best Ever Web Layout Designs Photoshop Tutorials
• Inventive Photoshop Tutorials on Fantasy Art

Today we will see that how to apply CSS in html. There are three ways to apply CSS to HTML. We will study these ways thoroughly and hopefully these would be help full for those who are beginner in this field. Must give your precious comments on this article.

In-line

In-line styles are plonked straight into the HTML tags using the style attribute.

They look something like this:

<p style="color: red">text</p>  

This will make that specific paragraph red.

But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.

Internal

Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.

This would look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>  
<style type="text/css">  	
	p {
		color: red;
		}    	
	a {
		color: blue;
		}
</style>  ...  

This will make all of the paragraphs in the page red and all of the links blue.

Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour…

External

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:

	p {
		color: red;  
		}
	a {
		color: blue;
	  }  

If this file is saved as "web.css" then it can be linked to in the HTML like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>  	
	<link rel="stylesheet" type="text/css" href="web.css" />  ...  

To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as "web.css" in the same directory as your HTML file.

Now change your HTML file so that it starts something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>  	
	<link rel="stylesheet" type="text/css" href="web.css" />
</head>  ...  

Save the HTML file. This now links to the CSS file, which is empty at the moment, so won’t change a thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did before.

Related Articles

• 35+ Useful Ajax Tutorials for Web Developers
• Useful and Practical CSS Tips and Tricks for Web Designers and Developers
• 15+ Website Design Converting PSD to HTML/CSS Tutorials
• 20+ Ultimate Collection of PSD to HTML Tutorials
• Simplify Web Development Using Ultimate CSS Cheats

In this aviator, I am listing downwards the 120 promotional websites where you can upgrade your designing tutorials and new articles. There are most of sites in which whatever sites are autonomous and many sites say ingress I m effort to listing descending all.

Hypesol | Registration Required

Tutorials Palace | Direct Submit

Design Dazzling | Direct Submit

W3Blend | Direct Submit

Designs Mag | Direct Submit

Smashing Buzz | Direct Submit

SlashDot | Direct Submit

WordTaps | Registration Required

faqpal | Registration Required

OurTuts | Direct Submit Middle Sidebar

webdesigntuts | Direct Submit Middle Sidebar

Psdtuts | Submit Link Page

NetTuts | Direct Submit

Vectortuts | Direct Submit

AeTuts | Direct Submit

cgtuts | Direct Submit

Activetuts | Direct Submit

WPArena | Direct Submit

Myinkblog | Direct Submit

Design Newz | Direct Submit

PsDeluxe | Direct Submit

Noupe | Direct Submit

10steps | Direct Submit

Fuelyourcreativity | Direct Submit

InstantShift | Direct Submit

Colorburned | Direct Submit

SmashingPost | Direct Submit

Designm.ag | Direct Submit

Devsnippets | Direct Submit

Tripwiremagazine | Direct Submit

Psdfan | Direct Submit

WebandDesigners | Direct Submit

Psdlearning | Direct Submit

HelpDeveloper | Direct Submit

Kailoon | Direct Submit

CssStyleme | Direct Submit

Crazyleafdesign | Direct Submit

Script&Style | Direct Submit

CssDrive | Direct Submit

NikiBrown | Direct Submit

Knowtebook | Direct Submit

Thecreativitywall | Direct Submit

CssLeak | Direct Submit

EliteByDesign | Direct Submit

DesignYourWay | Direct Submit

FBrushes | Direct Submit

Speckyboy | Direct Submit

Hongkiat | Direct Submit

thedesignmag | Direct Submit Middle Sidebar

Designshard | Direct Submit

Desizntech | Direct Submit

Freelancefolder | Direct Submit

ChethStudios | Direct Submit

Softalize | Direct Submit

Webdevcodex | Direct Submit

Woork | Direct Submit

Dezinerfolio | Direct Submit

BrushKing | Direct Submit

Dzone | Registration Required

Designfloat | Registration Required

Propeller | Registration Required

Zabox | Registration Required

Joyoge | Registration Required

Stumbleupon | Registration Required

Reddit | Registration Required

Digg | Registration Required

Delicious | Registration Required

Graphic-design-links | Registration Required

Mixx | Registration Required

CssCreme | Registration Required

Designmoo | Registration Required

PixelGroovy | Registration Required

Deviantart | Registration Required

Devmarks | Registration Required

Cssglobe | Registration Required

Abduzeedo | Registration Required

Pixelelement | Direct Submit

Designbump | Registration Required

Design-Related | Registration Required

BoogiesBC| Direct Submit

Naldzgraphics | Direct Submit

Tutorio | Direct Submit

tipd | Registration Required

scarletbits | Direct Submit

favshare | Direct Submit

pvmgarage | Registration Required

tweako | Registration Required

bloground | Direct Submit

design-newz | Direct Submit

Creative Cox | Direct Submit

webdesign-ne | Direct Submit

Top Roundups | Registration Required

servefault | Registration Required

The Web Blend | Registration Required

DesignrFix | Direct Submit

Mister-Wong | Registration Required

pswish | Direct Submit

inspiredn | Registration Required

QuandtNet | Direct Submit

tutsaz | Direct Submit

GraphicMania | Direct Submit

ElitebyDesign | Direct Submit

AdmixWeb | Direct Submit

Design Jojo | Direct Submit

DeveloperFox | Direct Submit

visual-blast | Direct Submit

DesignsHards | Direct Submit

espreson | Direct Submit

pixelactic | Direct Submit

graphic-design-links | Registration Required

joyoge | Registration Required

indeziner | Registration Required

2twitt | Direct Submit

Tutorial Out Post | Registration Required

folkd | Registration Required

favtutorials | Registration Required

cypherbox | Registration Required

buildinternet | Direct Submit

blogengage | Registration Required

arbent | Direct Submit

Related Articles

• Greatest Resources of Tutorials Submission and Promotion
• Extraordinarily Well Written Icon Design Tutorials
• Best Resources for Submit Design Tutorials
• Best Ever Web Layout Designs Photoshop Tutorials
• Inventive Photoshop Tutorials on Fantasy Art

1. Slice your mock up to make website

I’m going to tell you how you can convert your Template into Website by using Slice and Dice technique in CSS. It will be very long tutorial, because I’m going to convert a whole project into Website. So get ready for that. Here is the part 1.

2. How to: CSS Large Background

This tutorial provides instructions on designing large background websites. In addition to the explanations of the techniques there are examples of creating large backgrounds using single and double images.

3. How To Create a Horizontally Scrolling Site

Conventionally, web pages scroll vertically, but this tutorial shows how to have content scrolling horizontally from left to right. The tutorial contains files for download, demos and enables users to add an unusual touch to their web design.

4. Slice And Dice That PSD

This tutorial shows how to slice and dice a PSD file and code it for the web. The tutorial, from Net Tuts, compares the HTML and PSD formats, and has a distinctive ‘Web 2.0′ feel.

5. How to Make Sexy Buttons with CSS

This neat tutorial explains how to make attractive buttons, with alternate ‘pressed’ states, coded with CSS.

6. Building a Website: HTML/CSS Conversion

This video screencast, part two of a three-part series, explains HTML/CSS conversion of Photoshop mockups. The tutorial begins by creating a skeletal project framework, moves onto Photoshop file layer organisation, and them describes writing the coding for the individual elements of the design.

7. Fixed Footer Backgrounds with CSS

This is a simple trick for using CSS to fix a background image to the bottom of a page design.

8. From PSD to HTML – How to Turn Your Designs into Usable Web Interfaces

This tutorial from Part Digital Design is a detailed look at slicing up PSD designs and creating powerful web interfaces using CSS and HTML.

9. CSS Gradient Text Effect

Web Designer Wall presents a tutorial explaining how to create fancy headings using pure CSS. The trick means that there’s no need for designers to render each heading in Photoshop

10. Tutorial: Coding a Layout

This is a relatively quick tutorial showing the necessary steps for analyzing PSD layouts for CSS/HTML conversion.

11. From PSD to HTML, Building a Set of Website Designs Step by Step

This is a top tutorial, taking an expansive view of the process from Photoshop to completed HTML products. The tutorial starts with four PSD mockups of a website that are eventually converted into a WordPress theme. It’s an impressively detailed tutorial, which covers almost everything users need to know to get started in converting PSD files.

12. From Photoshop to HTML

This tutorial explains how users can produce generic business templates from Photoshop files using CSS and HTML coding. The lesson includes demos along with PSD, CSS and HTML files available to download.

13. From PSD to CSS/HTML in Easy Steps

This four-part tutorial series covers easy steps on converting PSD designs into well-structured and semantically correct CSS/HTML layouts. The lessons explain the process set-by-step, including the correct procedural processes, and offers coding, templates and files to download.

14. Build A Sleek Portfolio Site From Scratch

This popular tutorial by Collis Ta’eed shows users the steps to coding a sleek portfolio, from the basic building blocks to a stylish finished page. The tutorial shows the whole procedure to create a homepage; from there the basic layout can be duplicated and adapted to construct the site’s interior pages.

15. Encoding a Photoshop Mockup into XHTML and CSS

Chris Spooner’s tutorial focuses on exporting Photoshop images and coding specifically for blog design.

16. Alternative Style: Working With Alternate Style Sheets

This ‘switcher’ tutorial explains how to create a cross-browser method for dynamically switching between style sheets, so alternate aesthetics can be quickly viewed.

17. Create a Killer Band Site with Drupal: A 6-part Tutorial Series

Gomediazine presents this series of six tutorials, explaining how to make band web sites using Illustrator files and coding with Drupal, open source CMS that’s popular in the music industry.

18. PSD To XHTML/CSS

This easy-to-follow tutorial explains the process of coding PSD files, and is aimed at web designers of all skill levels, from beginner to advanced.

19. Creating a CSS Layout from Scratch

This tutorial takes users through the process of constructing a functional CSS layout, and is aimed at those with a basic knowledge of using CSS.

20. Breaking Out of the Box With CSS Layouts

This guide encourages designers to think beyond the conventions of page layout, to employ creativity and experimentation.

21. Advanced CSS Menu

Code an advanced list menu utilising the CSS position property in this tutorial, which enables ‘hand-drawn’ or ‘painted’ style menus.

22. How to Convert a PSD to XHTML

This is another tutorial from Net Tuts, this time a screencast that explains how to convert a PSD file into perfect XHTML and CSS.

23. Making Simple Work of Complex CSS Layouts

This tutorial aims to create flexible layouts that can easily be adapted to meet the requirements of its content and surroundings, with graceful degradation in legacy browsers.

24. Blurry Background Effect

A simple and fun trick is covered in this tutorial, explaining how to create a ‘blurry background effect’.

25. CSS Slicing Guide: Picking The Right Layout

This is a guide to choosing the best template for headers, navigation areas, content areas and footers, and then slicing them for page layouts.

26. Lab TV Layout, PSD to HTML

PSD Vibe presents a tutorial showing how to code the Design Lab TV Styled layout into XHTML and CSS, including downloadable files.

Related Articles

• Useful and Practical CSS Tips and Tricks for Web Designers and Developers
• 15+ Website Design Converting PSD to HTML/CSS Tutorials
• 35+ Useful Ajax Tutorials for Web Developers
• How to Applying CSS with Different Methods
• Simplify Web Development Using Ultimate CSS Cheats

Another old-timer…HTML

HTML, a basic coding language used from day-one on the World Wide Web has very limited functionality in comparison to Flash, but as a base language for the web, it is widely used, and very fast in response. This is partially due to its inclusion in server-side languages like the very popular Apache. HTML still very much has its place in 21st Century code just like Visual Basic, whose ancestors were the Commodore Basic of the early eighties. A good structured language will stand up through time – as long as it does a necessary job well and is updated regularly.

“Add” infinitum

So back to those building websites with Flash, there are now so many possibilities for a unique website to be built due to the number of widgets and add-ons that can be programmed, it’s hard to know where to start. It is relatively simple to create your own site from a website building service such as wix.com, a Flash based website building software solution where free websites can be built with user-friendly online automated Flash website authoring tools. To get a full service to include ecommerce, use dedicated domains etc, a monthly subscription can be taken out… but full widget and HTML functionality is granted with the free sites so there is no limitation there. The site has an editing and publishing system that is written in Flash and comes complete with all kinds of available graphics, clip-art and styles to help users make fast and good looking sites very quickly indeed. At wix.com they have created a multitude of templates that are extremely configurable to allow users with no web design knowledge in particular, to create their own site that is appropriate to their intended content – for free.

“This is Flash calling HTML…”

Now there are a few sites that allow users to build websites and some have a few add-ons and widgets too, but none seem as easy to assemble pages and publish them as Wix. A major feature of the Wix site too is that they are the only one of the up-to-date online website builders so far to incorporate HTML widgets into its basic functionality. There are good reasons why this is a great feature to add if you are building a website using a Flash builder; widgets written in Flash are more complex to code and once coded, to make them customizable they are even more expensive and difficult to produce, never mind the difficulty of integration. In contrast, HTML is quite well developed for producing widgets and plug-ins/add-ons to a web page and because this type of programming is not complex and has been around for a long time, there are literally thousands and thousands of already coded accessories that can be found free online and added to a Flash-built website – the sky is the limit when it comes to the range of available already programmed features.

A Flash free website builder that has HTML support can offer an almost infinite number of uniquely featured websites that can be configured and modified without a Masters Degree in Computing. This opportunity offers website builders of all abilities immense scope – at a very modest budget too! Almost every HTML add-on/widget has already been coded, and if it hasn’t, a freelance HTML programmer is comparatively cheap to hire and easy to find. Anyone thinking of using an online website builder must take into account whether they can afford to not have HTML support available as standard. Flash and HTML go back a long way, like old friends, but in the world of online website building automation, they are very successful, new-found partners.

Random Posts

• The Pros and Cons of the Facebook Subscribe Feature
• Get Width and Height of an Image in PHP
• Looking After Your Digital Camera
• 50 Elegant Photo Manipulation Tutorials
• Layer Style Tutorials in 6 Steps

First Step:

Make flash file and use only bg color of stage. Don’t use any recangle there for background color.

Method 1: Using Flash

The HTML for a Flash movie can be created using the Publish Settings feature in Flash. The Publish Settings dialog box provides an option to affect the WMODE setting. The options selected in the Publish Settings will be added to the HTML source code automatically:

Step 1:

Choose File > Publish Settings. Select the HTML tab. or press Shift + F12.

Step 2:

Choose “Transparent” in the WMODE setting to make the Flash movie’s background disappear in browsers which support this feature.

Step 3:

Publish the document.

You will find this "wmode=transparent" code in html file which make swf file transparent.

Method 2: Editing HTML code manually for Wmode

To edit an existing HTML page, add the WMODE parameters to the HTML code.

Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

Add the following parameter to the EMBED tag:

wmode=transparent

Method 2: Using Dreamweaver

Follow the below steps, and Dreamweaver will insert the correct HTML code automatically.

Step 1:

In Dreamweaver, insert the Flash movie into an HTML page.

Step 2:

Select the Flash movie in the Design View.

Step 3:

In the Properties panel, choose Parameters.

Step 4:

For the Parameter, enter “wmode” (without quotes). For the Value, enter “transparent”.

or

In property panel choose wmode dropdown.

Step 5:

Save the document. The HTML page is complete.

Random Posts

• Outstanding Photoshop Retouching Tutorials Collection
• 65 Ultimate Round-Up of Illustrator Tutorials
• PHP Multiple Files Upload
• Best Online Printing Solution at UPrinting
• Collection of Professional Brochure Design Tutorials