Member Avatar for tian93

Hello everyone...
sorry,I just come and ask you something
hmmm...I'm still learning about css

my problem is I can't convert from psd to css

what should i do ? please tell me...

  • 3 Contributors
  • 2 Replies
  • 238 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

OP asked about converting a PSD into CSS. Building on points from and @&lt;M/&gt;, below is a focused, modern workflow with practical tips and a tiny starter stylesheet to make the task predictable and maintainable.

Start by preparing the design: give every layer sensible names and group related elements (header, nav, hero, content). Export icons as SVG and bitmaps at 1x and 2x, note type sizes and line-heights, and mark spacing. Create a semantic HTML skeleton next (section, header, nav, article) and use clear class names (BEM or simple descriptive names) so styles map directly to design blocks.

Apply a minimal base stylesheet and build up from there. Example starter rules:

html { font-size: 16px; }
*, *::before, *::after { box-sizing: border-box; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

Use rems for type and spacing (rem = px / 16, so 14px = 0.875rem). Prefer Flexbox or CSS Grid for layout rather than floats or absolute positioning. Adopt a mobile-first approach: write base styles for small screens, then layer in media queries for wider viewports.

Quick practical tips and common gotchas:

  • Unlabeled or flattened PSD layers make slicing and asset export slow — label everything.
  • Avoid building whole layouts with absolute positioning; it breaks responsiveness.
  • Use SVG where possible and export raster images optimized for web to avoid slow pages.

A good first exercise is to reproduce one section (header or hero) from the PSD end-to-end: export assets, write the HTML, then style and refine with the browser inspector. That single-section practice reveals most conversion challenges and builds the skills needed to complete the entire page.

Recommended Answers

All 2 Replies

Member Avatar for jparkton

If you come in Freenode IRC #CSS channel I can walk you through it but the basics are.

1: Layout the page elements in your HTML file
2: Add CSS to make it look like the PSD file
3: Deploy

It may be possible in some WYSIWYG editors to upload a PSD And convert it to a page template but I am not aware of any (I just use a basic editor [VIM])

Hope this helps

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.