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?
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:
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:
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.<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).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.
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).
Some guidelines in addition to all the other advices:
li.special-class not applied? Ah, there is #my-wrapper li somewhere else). You could apply SMACSS methodology or object oriented C4S.
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/.
