Loading...

Create Custom CSS Class Styles for HTML5

You can create custom PSD to CSS3 classes and styles directly in your Photoshop document. Export Kit will translate your parent-child relationship in your folders, to give you full control over your PSD to CSS classes in your output.


Your PSD to CSS3 Class Styles can be used to customize run-time designs to add different styles and effects, themes and skins, reusable images, and more.

Learn more about CSS Styles Folder Tag and your custom CSS classes.
Learn more about CSS Style Tag and adding CSS classes to layers.

Step-By-Step Video


Need a visual? Watch our step-by-step tutorial!

Watch more video tutorials.

Step 1: Create a Basic Element

Create a shape or text layer.

CSS classes in your PSD are applied directly to your Photoshop layer elements regardless of the layer type. This allows you to create global PSD to CSS styles that you can apply to any element in your HTML output.

Our CSS Styles Folder supports all HTML and CSS elements - beyond those found in Photoshop.  
You can customize the CSS style for any external CSS Library by using the CSS class name as the layer name in your CSS Styles Folder.

K.I.S.S. Basic

We support wireframe designs also to map your class elements.

Keep the basic design of your PSD layers simple. We support full Photoshop wireframe designs, as you do not need to add additional styles or effects to the element.

NOTE: All element styles will override with the CSS class style.

Step 2: Create Your Styles Group

Add layers to your ${css|styles} folder to create custom CSS classes based on the layer. All layer will maintain effects and styles in the output.

You should use "_" (underscore) with layer names and NOT " " (space).  CSS classes will output following our Layer Naming Rules.

Keep your styles visible in your PSD document so the end-designer can see what options they have in the output, and skip any labels or guides with ${skip} tag.

CSS Styles Folder

Your ${css|styles} folder will contain all the custom CSS class styles to reuse in your document. All elements added to this folder will render as a CSS class in the output using the element name, styles and effects.

Learn more about CSS Styles Folder tag.

Reuse Images

Make sure you have CSS Images enabled if you want to use custom CSS class images.

You can reuse the same image class an unlimited number of times in your PSD design and Export Kit will load only one image.

Step 3: Add Your Custom Style

Use ${css|style} tag with your basic element in Step 1 to customize your element. You can now use your custom CSS style anywhere in your PSD document and Export Kit will translate the custom class to that element.

Note: The name you use with your layer element, is the same name you should use with your custom style.  

Eg. If your custom CSS class name is blue_glow then your CSS style tag should be ${css|style:blue_glow}.
Learn more about CSS Style tag.
LOGIN NOW: You need to login so your progress is tracked with Online Training - click here.

Products For Android Professionals


android_pack

Android Pack

android_pack

Android Pack (6 Months)

android_pack

Android Pack

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Advanced Website

A professional multi-page website design with dynamic height.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top