Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I have a website to design. I have information on how the page should look and interact. The problem is I'm not good in front-end design, and have put many many hours to get the hang of the stuff. Currently I use the CSS from sample sites in github to style my site, which seems to be an un-ethical way.

Question: how do you style webpages?

  • Are there some really good tools?
  • I would be deeply appreciated if a detailed answer will be provided or link to wiki will work as well.
share|improve this question

closed as off-topic by ChrisF Nov 18 '13 at 15:28

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions asking us to recommend a tool, library or favorite off-site resource are off-topic for Programmers as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – ChrisF
If this question can be reworded to fit the rules in the help center, please edit the question.

    
JqueryUI it provides a very nice customizable canned UI and functionality –  Chad Jul 6 '12 at 12:59
    
It depends on the site. What kind of site are you making? Data-driven web-app, e-commerce, blog, portfolio, creative "pretty" site. –  Jason Holland Jul 6 '12 at 14:07
    
Do yourself a favor and look at themeforest.net. Secondly, lynda.com has the only video tutorial I know that goes through taking a Photoshop mock-up and converting it to HTML/CSS. It is only a small part of the tutorial but at least you can see one way of converting a PSD to HTML/CSS. The tutorial is WordPress 3: Creating and Editing Custom Themes by Chris Coyier –  Jason Holland Jul 6 '12 at 14:18
    
@JasonHolland Thanks for the links. I'm doing a data-driven web-app, and I'm looking to make an unique design. As I said I'm not good with design, and I'm trying to figure out best possible ways to code css. By the looks from the answers and comments, I have to either go for templates or toil more to learn css. :) –  adifire Jul 6 '12 at 15:04
add comment

5 Answers

up vote 8 down vote accepted

It is really an ART to write your own CSS and it may take a lot of time to master. However, there are some quick shortcuts. Basically, re-using existing templates and modifying them slightly can produce results in less time. There are some Free tools to work with CSS - 50 Extremely Useful And Powerful CSS Tools.

Thus, starting from a template is the easiest and fastest way for web-developer. There are some good FREE template sites that are very handy. In addition, there a decent css styles for few bucks. Here is a list of template sites i prefer to visit when good css styling is required.

Here are some good places to learn CSS. I took them from the W3Tools link in my comment:

share|improve this answer
    
Apart from reset stylesheets, I haven't found a good, clean, extensible general-purpose stylesheet yet. –  tdammers Jul 6 '12 at 13:34
    
@tdammers, I hate resets, they add too much noise to firebug when I'm trying to debug CSS. Have you found any way to deal with that? I too, have not found any clean and logical/extensible stylesheets either. –  Jason Holland Jul 6 '12 at 14:22
1  
+1 for the smashingmagazine.com link, a great place to keep up with web design/front-end development. –  Jason Holland Jul 6 '12 at 14:25
    
That is not the W3 CSS tutorial, W3Schools is not affiliated in any way with the W3, and it is not a good site for several reasons. See w3fools.com for more information and w3fools.com/#what-should-be-done specifically for other places to learn about CSS. –  Elias Zamaria Jul 6 '12 at 16:52
add comment

Most web developers will use a combination of some editor (whether that be a tool like Dreamweaver or something as simple as notepad) and a web browser. They go through a process of building up the markup and style rules piece by piece, refreshing the browser at each stage to see if it looks and behaves how they're intending. Outside of an editor and a browser, there aren't really any special tools required for frontend web development, however there are tools like Firebug which are extremely helpful.

It sounds like you need to properly learn CSS, so you can write it yourself. There are loads of good places to learn and reference on the internet, but my personal favourite is http://www.w3schools.com/css/.

share|improve this answer
5  
Intervention! w3fools.com –  tdammers Jul 6 '12 at 12:38
    
It's still a decent reference point for rule names, property lists etc –  AndyBursh Jul 6 '12 at 12:40
2  
And w3fools.com lists several better reference points. –  tdammers Jul 6 '12 at 12:45
add comment

Most true web developers will be writing their own CSS and HTML from scratch. Tools can be useful in testing or tuning CSS rules, but anything that claims to do it for you is more trouble than it's worth.

Learning to properly use HTML and CSS is something that takes time, just like learning any other technology. There's no shortcut; practice will get you there.

With that said, some WYSIWYG editors, like Dreamweaver, have support for editing CSS rules which provides autocomplete. I found this very useful when I was first starting off (hit ctrl + space to see a list of all possible CSS rules).

share|improve this answer
    
-1 for Most true web developers will be writing their own CSS and HTML from scratch. Why would you write your own if there is something out there already. Most developers I know borrow styles liberally from other sites and customize them. –  Chad Jul 6 '12 at 12:56
    
+1 for tools are more trouble than they're worth. –  ajax81 Jul 6 '12 at 19:21
add comment

There are several different approaches, each with its up- and downsides, and most of them are tied to a particular workflow.

In large teams, where the work is divided into 'graphics design', 'interaction design', 'slicing', 'front-end scripting', and 'back-end coding', each job performed by a different person, the CSS part is the job of the person who does the slicing, and because that person controls both the HTML and the CSS, they can do it pretty much as they like. Often, they use tools like Dreamweaver; this allows for WYSIWYG editing, but the resulting HTML/CSS is often kind of messy and hard to maintain - which is OK if the process demands setting the design in stone before writing any code: once handed to the coders, the design isn't going to change, so there is little point in spending extra effort on maintainability.

Often, however, teams are smaller, and the site needs to be more dynamic and more maintainable. In such a situation, it is important to write scalable and adaptable CSS. What I found works reasonably well is this:

  • Start with a few 'reset' rules. You can use a pre-written general-purpose reset stylesheet (google for them, there are a bunch of good ones available on the net), or you can write some simple rules yourself. Some people don't believe in reset stylesheets; it's a matter of taste and philosophy really, so you may want to just overrule the default appearance of those elements that you don't like.
  • Keep your HTML semantic, that is, write it so that it reflects the structure of your document, not the appearance. Load the HTML without any stylesheet at all. It doesn't have to look as intended yet, but it should present itself in a logical structure.
  • Create the general style by writing rules matching on element names (div, dd, input, a, ...) and, where needed, pseudo-elements / pseudo-classes (a:hover, a:visited, ...), and attribute selectors (you need those to distinguish between different types of inputs, e.g. input[type=text]). Try them out on a generic piece of HTML, e.g. the output of http://loripsum.net/. This is going to be your default appearance; most of your site should look good with these rules alone.
  • Now you have some site elements left that don't look as you want them yet. For those, add class names that describe, semantically, what the element is (or one aspect of what it is). Examples are things like <input type="submit" class="default-button"/>, <div class="validation-errors">, etc. Don't use class names to describe presentational properties (<span class="red large">, <div class="float-right">): those tend to diverge from the actual rules over time, and then you end up with class float-right being floated to the left or some such nonsense. Style those elements based on their class names. For example, if your default button should be larger, you'd use .default-button { font-size: larger; } (or a percentage if you like those better).
  • Avoid inline styles at all costs.

Develop on a sane browser (firefox, or anything webkit-based); once you have it all working, test it on at least Firefox, Webkit, and Opera. It's probably going to break on IE; use conditional comments to include extra stylesheets for various IE versions you have to support, adding whatever hacks you need to make it work.

As far as tools go; you don't really need more than a text editor and a browser to test in. Firebug or an equivalent document inspector plugin is a great help (Google Chrome / Chromium has a similar tool built into it), especially since it allows you to modify styles inside the browser - they won't persist, but you can quickly try out things to see what works.

On the server side, there are a few technologies that allow you to take shortcuts - basically, they take a stylesheet written in a superset of CSS, adding things like variables, nested rules, etc., and transform it into regular CSS before sending it to the browser. The cassius and lucius template languages (for Haskell) are nice examples, but solutions exist for many programming languages.

share|improve this answer
add comment

Some guidelines in addition to all the other advices:

  1. Use a reset stylesheet to achieve the same basic look and feel across all browsers, e.g. HTML5 Reset.
  2. Give elements "ugly" color backgrounds, when you start working with box sizes / margins / paddings to see the workings of the box model. It helps, especially when you are starting with CSS.
  3. Use some generic values for your CSS and tweak those values using Firebug or something else.
  4. Try to keep your CSS modular instead of getting into "specificity wars" (hmm, why is my style li.special-class not applied? Ah, there is #my-wrapper li somewhere else). You could apply SMACSS methodology or object oriented C4S.
  5. Do not overestimate the necessity of the same look across all browsers. Serve rounded corners that understand them, but do not use graphics to serve those to IE6. Websites are not like magazines, but more like TV channels.
share|improve this answer
add comment

protected by MichaelT Nov 18 '13 at 15:15

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.