Cascading Style Sheets (CSS)






Google Chrome Web Developer Tools shows how CSS is separate from the HTML content.


View source screenshot for the fsp.css file in index.html.

CSS预处理器 preprocessors


  • Sass 是流行的预处理器,也被认为是最强大的预处理器。
  • LESS 是另一种预处理器,因为Bootstrap Framework 采用LESS,带动LESS快速流行。
  • Stylus 被认为是第三大流行的CSS预处理器。


  • The Advanced Guide to HTML and CSS book has a well-written chapter on preprocessors.
  • Sass vs LESS provides a short answer on which framework to use then a longer more detailed response for those interested in understanding the details.
  • How to choose the right CSS preprocessor has a comparison of Sass, LESS and Stylus.
  • Musings on CSS preprocessors contains helpful advice ranging from how to work with preprocessors in a team environment to what apps you can use to aid your workflow.




  1. Create a simple HTML file with basic elements in it. Use the python -m SimpleHTTPServer command to serve it up. Create a <style></style> element within the <head> section in the HTML markup. Play with CSS within that style element to change the look and feel of the page.
  2. Check out front end frameworks such as Bootstrap and Foundation and integrate one of those into the HTML page.
  3. Work through the framework’s grid system, styling options and customization so you get comfortable with how to use the framework.
  4. Apply the framework to your web application and tweak the design until you have something that looks much better than generic HTML.