How Would You Recommend a Novice Get Started Using CSS? [closed] - css

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
As web based designer who has designed web sites using tables but never with css, how can a novice get started with css?
Related SO posts
SO - Css Book & website for CSS
SO - Css blog

Get started by reading tutorial web site first. This way, he will see how to create simple CSS and see the benefits.
http://www.w3schools.com/css/
http://www.echoecho.com/css.htm
http://www.csstutorial.net/
http://www.w3.org/Style/Examples/011/firstcss
http://www.westciv.com/style_master/academy/css_tutorial/
Than, I suggest since he knows how to design website to check other website source and see their CSS files. Zen Garden is a good start.
If he requires more information, he can always get a book (I do not think it's necessary but if he wants a book), he could try Core-Css.

Definitely get the Firebug plugin for Firefox. Go to a site you like and check out the CSS for it. Turn some off and on, change things, just get a feel for how it all comes together. Great learning tool.

Read CSS: The Definitive Guide, Third Edition by Eric A. Meyer. It's one of the best technical books I've read.

To all the other suggestions I would add Smashing Magazine's list of CSS articles.

I recommend Transcending CSS: The Fine Art of Web Design by Andy Clarke. It's less about the technical aspects of CSS and more about the mindset switch that needs to happen when moving from tables based design to separating content from design.
When I started learning CSS, I found myself coding pretty much the same way. Instead of tables and tds, I was using divs and spans. Still working from the outside (design) inward (toward the content) and designing my markup and contents around the look of the page, locking it into the design. Transcending CSS gets into the process of going from the inside (content and markup) out (design) leaving the site's appearance flexible.
Technical info is easy enough to find. I tend to frequent W3Schools.

I'm a big fan of reading tech books, so I learned from Beginning CSS Web Development: From Novice to Professional

I learned a lot from Eric Meyer on CSS and More Eric Meyer on CSS. The books take you through several examples step-by-step, starting with unstyled pages and explain the purpose for each step along the way. They would only be a starting point though, since they're a little bit dated. Sites like A List Apart will give you the most up-to-date information.

Start simple. Read a few sites like A List Apart and Position Is Everything.
Don't try to replace your whole site at once - change one piece at a time.
Keep testing it in different browsers - the earlier you find out it looks different in one (or all!) the better.

The book that got me started was Web Standards Solutions: The Markup and Style Handbook. by Dan Cederholm It is not a reference, but gives you a good start with real-world examples. Dan does a good job of holding your hand, taking it slow and not boring you. I bought it several years ago and still refer to it on occasion.
This is the only CSS book I own. I use the web as my CSS reference.

SitePoint have a large amount of tutorials and reference on this. They even have a book that sound like it would answer your question directly!
HTML Utopia: Designing Without Tables Using CSS, 2nd Edition
http://www.sitepoint.com/books/css2/
with 4 chapters available free

For French there is a good site : http://www.alsacreations.com/ there is tutorials on HTML, xHTML and CSS and many examples (how to create "pretty" menus etc...)

I learned a lot of CSS by downloading free site designs from http://www.oswd.org/ and trying to implement the same effects on my own. It also gave me some insights into ideas for site-wide design patterns in CSS.

I'm a fan of the brute-force approach. Learn a few basics then start trying to recode your HTML using pure CSS. Every time you need a new technique, google it. You may want to subscribe to the CSS-discuss mailing list or read the wiki.

http://www.w3.org/Style/CSS/#specs
Someone already listed a w3c link. This link goes to the specs which is how I learned what I know about css. Anyway, start with level 1 then move on to the other levels. Well, level 1 should get you most of what you'll use so you may just want to learn level 1 then google the other things you want to do as needed.

I have found that using a DreamWeaver template is a good first place to start when creating a new page. They have made some very simple templates that allow you add any formatting you want, you just need to know things like 2 or 3 columns or elastic or fixed. Before I started doing this, I was constantly trying to figure out how to position stuff, but this has helped a lot, at least giving me a start.
Also consider a reset CSS file. It really helps dealing with browser differences.
Along with this, of course read tutorials and search the net.

Have a look at the Web Design From Scratch website. It has been really useful to me.

One important concept that most references are missing is that the CSS attributes aren't independent or cumulative. The most important properties, 'display' and 'position' react to each other and even change the behavior of other attributes. They interact in such a way that any guide that tries to teach these attributes independently is fail.
Most people doing HTML/CSS don't understand this, and are stuck fiddling without a real clue.
The only book I've found that relates these attributes at all is "Pro CSS and HTML Design Patterns". Eric Meyers book might... Personally I hate the style "Pro CSS and HTML Design Patterns" is written in, but its still the most effective guide to CSS that I have found.

I wrote an overall intro guide including some good CSS links elsewhere (see the comments too)... might be useful.

Related

Learn how to arrange elements correctly using CSS [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to be a back-end web developer. But learning a little of CSS just to put it in my toolbox if i needed it someday.
I know about CSS properties and stuff. All what i really "suck" in is arranging elements in CSS. I really waste so much time trying to figure out why does this element behaves in weird manner like this, or how to get that element to the left, or how to align elements the way i have in my mind.
I don't want to take much time learning it as i'm moving forward for what i'm going to be specialized in. So if there're videos or a crash courses on arranging elements using floats or position property or any other good technique to achieve that i would be grateful.
I started experimenting with CSS by downloading some free templates available. Just try searching in Google. There are plenty of.
Creating a CSS layout from scratch is a nice place to start your journey. You may understand CSS by going through SIMPLE, beginner level tutotal from W3Schools.
You may have a look at CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices to get some inspiration and to develop some ideas by your own.
You may also try a couple of CSS softwares like Westciv Style Master and Top Style (but they dont come free). The Resource section in westciv site is really helpful for beginners. It has got Guide, Tools, Tutorials etc. Also you may have a look at complete css guide in their site.
Finally, you may experiment CSS with the help of 11 Useful Online Tools for Better CSS Development
Hope this helps.
No videos, but two other suggestions:
1) You should take a little time (a few hours maybe) and get used to the CSS box model. It is worth getting a precise idea of how CSS works. fa(You know, a few hours of trying out can save you a few minutes of reading what's going on ;-))
2) Get yourself a suitable tool (I recommend Firebug for Firefox) and play around a little with the CSS properties of your favorite page "in real time". Very convenient and efficient to get used to the topic.
I got to learn css pretty fast by study other people CSS and tinkling with it using firebug trying all sort... the more advance the CSS the more you learn, i think you should pretty try the same thing too
I learned most of my CSS knowledge between W3Schools, questions on this site, and Google searches.
Honestly, the only way to absorb any real knowledge is to actually USE what you're learning. Just as you probably couldn't walk if you only ever heard what walking was like, you probably won't develop the skills to be a good CSS coder(or any type of coder for that matter) if you don't practice what you're learning.
That's why I like W3Schools, since they put examples into their tutorials to let you practice what they are trying to show you.
Good positioning reference:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Good Float reference:
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

CSS Guides for improving skills

Hi for the last month I have started to learn CSS.Fist thing I did is read everything i could find on www.w3school.com , after that I started reading CSS Mastery 2nd edition.I have build a couple of my own websites with succes but I'm still not happy with what I know , I even practiced with the new CSS3 elements.
I've seen alot of cool stuff build using css especialy on http://www.cssplay.co.uk/ but the only problem is the source code is not displayed and I don't know how the bloody things are.A good example is this:
http://www.cssplay.co.uk/menu/tilt.html
And these is only one of the things that I've seen on this website and would like o learn how to build them.
So anyone know any other similar sites that ofer a good explanation on the more advanced stuff about css(not beginer stuff like building some drop down menus , rollover or hover efects )?Any advice is much apreciated thank you!
As already mentioned, tools like Firebug/Chrome Inspector are definite must haves.
I gained the most experience from real world problems with various different browsers. You make a site, it doesn't look so good in a particular browser. So you search on the internet. Find a solution and memorize it. I think that CSS in itself is a fairly simple tool, I class 'advanced' CSS as mastering the various techniques required to make sites work cross browser and in browsers like IE6/IE7+.
Also, Never give up with CSS, if you find a problem try and find an answer. Most of the time, there will be a simple solution.
In general, make sure your CSS is as simple as can be. I generally find that most complicated CSS can be replaced with relatively simple code, and find people get carried away and forget simple techniques to achieve similar solutions. One such problem, would be putting a button on the right hand side of a div, like below:
-----------------------------------------------
| Button |
-----------------------------------------------
You may see that some people will float the button right, adding more complexity than necessary. What ever happened to text-align:right? :-)
Finally, make sure you find a couple of blogs you like, for example http://csstricks.com and read them, taking note of new techniques. Try and master a '2 column layout', understand the difference between block/inline-block/inline, margin collapsing, tables, html forms, IE6/7 hasLayout, the list goes on. Most of which you will cover if you try and make a website template from scratch. Maybe start with an existing site and see if you can achieve the same layout.
I'm not sure with CSS how to learn it's pitfalls without encountering them mistakenly.
It looks like the stylesheet for the maze is located at: http://www.cssplay.co.uk/menu/candr/tilt.css. You can use that against the source code to figure it out.
One of my favorite is A List Apart. Great articles, not only about CSS like I linked, but about web design and more.
Also HTML Dog has some nice CSS entries.
Then, you can find great CSS resources on the w3 site.

Top 10 CSS and HTML questions to ask interviewee? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
What should be the top 10 CSS and HTML questions to ask an interviewee? To test his level of knowledge if interviewee mentioned 2 yrs. experience in XHTML and CSS.
Edit:
how we can know interviewee's cross browser layout making capability? My question is only related to xhtml css coding not about design ability
What is the CSS box model?
What is the difference between quirks mode, standards mode and almost standards mode?
Tell me about hasLayout.
What would be the most appropriate markup for: a navigation menu; a picture gallery; a blog post. (Why? Can you think of some alternatives? Might be good to draw these up on a whiteboard or something)
What's the difference between <p class="main_header">Foo</p> and <h1 class="main_header">Foo</h1>?
Why is this a bad idea?: <span class="red">Bar</span>
Describe how to set opacity and how will it appear in Gecko, WebKit and IE.
How can you set few properties on to textboxes as default?
A design calls for png files with alpha transparency, what issues might you encounter?
Some of these are the same as zoul's questions except from a slightly different angle - I was aiming for questions that would lead to a bit of a discussion.
Why is it a good idea to split HTML and CSS?
What is the difference between inline and block elements?
What is a doctype good for?
What is the difference between classes and ids?
What is the difference between margin and padding?
These should be more than plenty to see how much candidate knows about browsers, standards and the reasoning behind HTML and CSS. Maybe you could throw in some floats, positioning and similar stuff if you want to test detailed CSS knowledge.
Update: The point is the kind of answer you are going to get, of course. If you ask about margin and padding and you get a clean drawing of box content, added padding, border line and margin, possibly collapsing against another box, you know the guy knows what he is talking about. Same goes for all the other questions.
No amount of questions in a short interview would establish a person's skill level. And there is the question of innovative qualities of a person which may not reveal itself in an interview. Some people may be introverted and shy or suffer from interview jitters others may be smooth talkers with little substance. There is also the challenge of asking objective questions not opinions.
If I show up for an audition to join a symphonic orchestra and tell them I have been playing the violin for 20 years they will not ask me about the construction of the bridge or the best material for bow strings. They give me a music score and ask me to play.
I suggest creating a simple web page that requires the techniques mentioned in the answers above, showing it to the candidate and asking the candidate to re-produce it in 30 minutes using the notepad. This will sort out the experienced from the novice.
Apart from HTML/CSS/JS specific or problem-solving questions, I would also ask what sort of tools she/he is using to get a task done. It often gives good insights about 'how' someone works and gives good/relaxed room for discussion. Good developers always have good and sharp tools.
I've taken a number of tests over the past couple of years and in all honesty there are really no questions one can ask to judge how great someone is at coding in HTML and/or CSS.
First, if the interviewee claims to have written web pages over the past couple of years ask for a couple of examples. If possible get him/her to email you them, print them out and get the user to explain and critique everything about them. Completely tear through everything regarding their previous work and get them to explain everything they can about it.
Once this is done, the user should be given a small task involving the development of a web page. Give them a networked computer and clear the history, then give them a couple of web pages to be built over the space of n minutes. Tell them to document what they decide to do and what resources they'll be using and just let them get on with it. After a while check their references and look at the outcome. The user will never be able to perform their best work in such a short time but you'll be able to see how efficient they are by the quality of their work.
Once this is done, give them a broken web page and give them a small amount of time to fix it to the point of it being standards-compliant. This should be an easy task to perform for most given good use of their tools.
It's obviously not an exact science, but a range of these methods have always found suitable candidates for many companies and it seems that a lot of Web Design places rarely ask questions nowadays and will move onto simple practical exercises to ensure that the interviewee can do what is asked of them.
What do you see as the main differences between html and xhtml?
Are there benefits to using one over the other?
Technical
Ask the person to make a simple page with a header, a two column layout, and a footer with each column having a different background color extending to the footer. Get them to flip the columns around on completion.
A couple of questions that are tricky.
How do absolutes affect the flow?
How do floats affect the flow?
(they don't)
What are two practical difference between a relative and static?
Determine their interest in CSS and HTML with 'What is the semantic web and why is it important?' People should be able to speak with enthusiasm about bring information to the blind for example. People who really work in HTML and CSS and know their stuff tend to be quite passionate about how information is there for all.
IMO, Cross browser issues are becoming less important now as more people are using modern browsers that obey standards.
Ask about their interest in design. A good sense of design concepts tends to be important when working in a team - a programmer with a sense of design can communicate why such a design may not work well within a website and can explain better some of the limitations.
Ask: what do you think of flash :-)
Below are 40 questions you can ask a person specifically from HTML 5 perspective.
http://www.codeproject.com/Articles/702051/important-HTML-Interview-questions-with-answe
What is the relationship between SGML,HTML , XML and HTML ?
In HTML 5 we do not need DTD why?
If I do not put will HTML 5 work?
Which browsers support HTML 5?
How is the page structure of HTML 5 different from HTML 4 or previous HTML?
What is datalist in HTML 5 ?
What are the different new form element types in HTML 5?
What is output element in HTML 5?
What is SVG?
Can we see a simple example of SVG using HTML 5?
What is canvas in HTML 5?
So how can we draw a simple line on Canvas?
What is the difference between Canvas and SVG graphics?
How to draw rectangle using Canvas and SVG using HTML 5 ?
What are selectors in CSS?
How can you apply CSS style using ID value?
What is the use of column layout in CSS?
Can you explain CSS box model?
Can you explain some text effects in CSS 3?
What are web workers and why do we need them ?
What are the restrictions of Web Worker thread ?
So how do we create a worker thread in JavaScript?
How to terminate a web worker
Why do we need HTML 5 server-sent events?
What is local storage concept in HTML 5?
How can we add and remove data from local storage?
What is the lifetime of local storage?
What is the difference between local storage and cookies?
What is session storage and how can you create one?
What is difference between session storage and local storage?
What is WebSQL?
Is WebSQL a part of HTML 5 specification?
So how can we use WebSQL ?
What is application cache in HTML5?
So how do we implement application cache in HTML 5 ?
So how do we refresh the application cache of the browser?
What is fallback in Application cache?
What is network in application cache ?
What are different ways to apply styles to a Web page?
What is grouping in CSS?
What is the Contextual Selector?
What are the limitations in the use of CSS?
like the above there are 50+ awesome questions that are available here through
which any CSS related interview can get cracked. Top CSS interview
questions and answers
This also help to clear the concept of CSS.
Some good questions to ask are:
Describe how to set opacity.
What is the box model in CSS?
How do you add a CSS to a HTML?
Describe the difference between a class and an element.
What is the Doctype for?
Odd no one mentioned this yet...
Since the person claims to have two years of experience, they should have something to show for it - so ask to see recent works. Even if some of their work was internal or protected by NDA or such, if they are any good, they ought to have something they've done just to try out new things or such.
I believe real examples would be the best gauge for actual skill in this case. People can easily learn various details about HTML and CSS, but being able to apply them is a totally different matter. It should also demonstrate their ability to write cross-browser compatible code (Just open their examples in IE, FF, Opera, Safari/Chrome)
Do you know how to clear floats?
Write a simple nested list.
Ask them to make a simple layout (header, 2 col, footer) and include table data. See if they go div crazy, table crazy, or stick to what's correct.
What's the difference between a class and an element?
When they make a layout, look closely at what they name their classes. If they are layout-specific ("left-column", "bottom-section", "red-box") and not structure-specific ("column", "header", "footer", "navigation"), they're doing it wrong.
If the answer to 1. is "by using clearing divs", hit them across the face with a bat before you send them out the door.
The fancy button question seen here is the best question I've seen. It covers a range of topics without making it a written test. It's much more valuable to have them implement something like this on a whiteboard or paper to avoid getting bogged down in MDN-searchable details. Even if they don't come up with a perfect solution, you will find out how intelligently they can speak on a range of topics.
Remember, you want someone who can think and come up with creative and effective solutions. Not someone who has memorized the MDN.
About HTML5 and its features .
method of adding CSS to HTML.
New Features of CSS3.
Browser Compatibility of CSS3.
Different type of selector in CSS.
Different between class and id selector .
Different type of measuring unit in CSS
HTML5 form and different type of input type option.
HTML check box,select,radio ,button tags and its use.
Styling the simple page

Free tools to speed up web development [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
As a little side project, I am starting to build a new website for a certain organization I am affiliated to, which current site is simply outdated.
I am regularly a Java developer, and last time I really did some web development was back in the late 90s, when <p> was still more popular than <div> and Javascript was cutting-edge technology (JQuery is for lazy bums these days :) ).
Anyway, I feel really outdated. The website basically is going to be:
Django based
mostly serve static information pages
it will have a dynamic news and updates page (based on Django admin capabilites)
and some basic apps I'll develop myself (polls, small registration app, etc...)
My problem is designing the whole thing. I found some nice web-based CSS layout generators that got me going, but I still feel I'm wasting my time smoothing out the CSS files and aligning <div>s.
Are there any tools - the simpler and faster, the better - that you recommend I can use to speed up the design part of the site so I can concentrate on the real work?
I don't need anything fancy, just a nice looking layout and design that I can tweak a bit so the site will look presentable.
I second Brandon's suggestion to use a CSS framework. It won't give you 100% freedom to design anything you like, but it can speed up your design process greatly and free up your hands to do the coding you really want.
Suggestions Updated July 2013:
Twitter Bootstrap http://twitter.github.io/bootstrap/ - complete grid, typo, UI widget prototyping framework
ZURB Foundation http://foundation.zurb.com/ - responsive grid, type, UI widget prototyping framework (similar in scope to Twitter Bootstrap, but feels 'cleaner' in some ways)
960 http://960.gs/ - grid layout system
Tripoli http://devkick.com/lab/tripoli/ - really good typography, but no grid system
YUI Grids http://developer.yahoo.com/yui/grids/ - very customizable (to the point of overkill) grid system
Blueprint http://www.blueprintcss.org/ - grid system and basic typography
BlueTrip http://www.bluetrip.org - a hybrid system, mixing the best of the Blueprint grid with the best of the Tripoli typography
I won't lie to you. This website isn't the best place to go if you're looking for reliable Web Design advice. Stack Overflow is a programming community and programmers rarely know anything about design. If you want to get some real advice then I would strongly recommend the main Web Design/Development forums on the Internet, especially SitePoint.
That being said, as a former freelance Web Designer/Developer I'll offer my input on the issue. Not that you should value it, of course. After all, this is a programming website.
NEVER EVER SAY CSS LAYOUT GENERATOR EVER AGAIN! If you're going to seriously get into designing web pages then you need to learn semantic XHTML and CSS first. Whilst many people tout W3Schools as the definitive resource I see it as a programmers answer (i.e. not very good) and would prefer that you read up on the subject using...Google. There are countless examples of great websites to pick up the basics of Web Design/Development that Google is probably the best website for the job. Also, with a plethora of new websites offering this information you know it's going to be more improved than W3Schools. You'll seriously want to get clued-up on writing your design because it'll be much harder to fix things later on in the project.
If you're going to be designing web pages it would be a good idea to learn what actually makes a good design. Check out CSS Vault for a fantastic resource of some of the best-designed web pages around, of course with all the source code intact so you can have a play around with their code and see how they've managed some of the wonderful effects they've produced. I've learnt more than a thing or two from websites that have been featured on CSS Vault. On top of that you should read up on Web Design from the big Web Design/Development sites. Two of my favourites are SitePoint and A List Apart, two names that you'll near time and time again when you hear people talk about resources. Browse those websites, check their forums, see what REAL Web Designers/Developers are using, not what programmers are using.
On the subject of CSS Frameworks; they do help! The problem with using them is that you'll often spend so much time looking for a worthwhile framework that you could have finished most of the CSS for your website yourself. You'll either love them or hate them, but many people will say that they're not necessary.
Once you've got your mind set on what a good design looks like and you've got the resources you need to make something of value I suggest that you get to work! In reality when you're designing a web page all you really need is a text editor with a save function, an image manipulation program, a browser window and FireBug. An IDE helps a lot of people, but if you do use one then you'll definitely want to work in its text mode. I use NotePad++ or Emacs exclusively but a lot of people like to use Aptana Studio, so it may be worth a look.
When you're getting to actually building the code behind your website you can't really go much worse than your favourite IDE/Text Editor and a source control tool. As a Java programmer you're better suited to talk about programming so I won't lecture you on a subject you already know.
In the end, Web Design is going to take time and many of the tools that we choose to use that we claim will "save time" save very little in reality. If you're not a design guru then it will take you a substantial amount of time to create a great-looking website. It's a fact of life. Call me old-fashioned (a funny word coming from a 21 year old) but I still think that the quickest way is to sketch a design out on a piece of paper (a image program if really necessary) and to just get out there and make the damn thing! Again, I'll have to take this hunting for the silver bullet mentality as a programmers trait, one that really won't help that much when designing, because designing a web page is vastly different to writing a Java program.
In short, ignore everything you read here, read what REAL designers are doing and just make the damn thing!
There's one piece of advice that saves more time than any other when it comes to rapid development of CSS styled sites and that's KEEP IT SIMPLE
Use an attractive simple layout that doesn't require pixel perfection and that can 'gracefully' degrade in less compliant browsers (IE6). Minimise the amount of CSS and fix the basic bugs mentioned by meouw above. Then get on an concentrate on content and functionality...the real work
In my previous employment I created dozens of templates for websites.
The most useful too I ever discovered is the Firefox Web Developer Toolbar.
It has a wealth of small useful tools. My favorite feature is the ability to edit the CSS and see the results in real-time. This saves on the whole edit - upload - refresh cycle. Watch out for ie CSS inconsistencies though!
Off the top of my head, these are the most important gotchas.
double margin bug [google: double margin bug]
incorrect (but more intuitive) box model [google: box model]
incorrect (but more intuitive) float clearing [google: clearfix]
FireBug is another really usefull Firefox plugin for more in depth analysis.
I've always found Open Source Web Design to be a good resource when looking to get started trying to design something.
- http://patterntap.com/
- http://www.dotemplate.com/ (interesting concept of customizing template)
- http://www.templatemonster.com/
- http://www.freelayouts.com/websites/html-templates
- http://www.templateyes.com/
No idea what the site is going to be, but have you thought of using a pre-build CMS like Drupal, Joomla etc etc.? You can then tweak templates etc, rather than worrying about making it from scratch.
This question is pretty old, but since we're in 2012, it's only proper that I answer my own question with the exact thing I was looking for, back in 2009.
Twitter Bootstrap
Have you looked into any CSS frameworks? If you are competent enough with CSS something like a framework could help speed things up.
Don't forget firebug :) if you're worried about tweaking the design it's really great. With the inspect feature allowing you to real-time edit the CSS of your page.
https://addons.mozilla.org/en-US/firefox/addon/1843
I second Jens Roland's list of CSS frameworks.
But I would also suggest you have a look at websites such as Smashing Magazine. You might find this article of interest, amongst a lot of others. They tend to do a lot of nice and long mash-ups for the web developers that will at least give you inspiration if not a direct solution.
A colleague of mine has been trying to convince me all week that Dreamweaver, 5 years after I was last forced to use it at gunpoint, is actually now worthwhile for knocking up a design quickly and painlessly, and is also now competent at producing the HTML for that design.
I refuse to invest the 10 minutes it would take to find out based on my previous experiences of it, but you might like to give the demo a quick run around the block :)
I'd recommend finding a CMS package, since you're using Django, look into django-cms. It has TinyMCE and Markdown Support so updating your pages should be easy. Also django-cms integrates well with the Django admin interface.
A piece of paper to sketch your design
A text editor (preferably set up to save directly to a development server local or otherwise) to write up the initial HTML/CSS
FireBug/IEDeveloperToolbar to inspect each element that looks wrong and edit its CSS directly in the browser until it looks fine, followed by commits with the text editor
If you're doing any JavaScript development, use an advanced editor that highlights errors and warnings as you type. This kind of functionality has until recently been the province of static language editors only, but the free NetBeans 6 achieves this amazing feat. Traditionally, you first discovered JavaScript typos and simple bugs when first loading the parent page into a browser. The speed-up you get from being able to short-cut these iterations is profound.
NetBeans 6 also highlights CSS errors and is a more than capable editor for most all languages a web developer is likely to use these days.
You can also use www.zbugs.com - it will help you speed up a process of compressing and gzipping your CSS and Javascript files

Could I get in legal trouble for copying a website's stylesheet? [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I like the simplistic look and design of some of the Microsoft blogs. Alas, I can't join the Microsoft dev party and create my own development blog on the blogs.msdn.com page because I don't work at Microsoft, and I already have my own wordpress blog.
I was looking to have my blog styled to one of the default looking themes shown here: http://blogs.msdn.com/jmeier/default.aspx
Could Microsoft take legal action against me if I used a stylesheet from their page? If I made my page 'based' off their stylesheet, e.g. written from the ground up, would that be copyright infringement?
Could Microsoft take legal action against me if I used a stylesheet from their page?
Absolutely, since you infringed their copyright. On the other hand, it's debatable whether the stylesheet alone constitues a sufficient threshold of originality to justify legal actions1. At the least, taking without asking is often considered rude. ;-)
1) No. It certainly doesn't. A sophisticated design however will.
Yes, you can get in legal trouble for copying a site's stylesheet since it's typically a copyright violation. Worse, you could get publicly bashed on blogs like youthoughtwewouldntnotice.com, making such blog posts about you high-ranked Google results for your name, thus tarnishing your reputation irreversibly.
Don't do it, it's not worth the risks.
You could. You probably wont.
Most importantly: Why bother? CSS is pretty simple, it's essentially positioning a bunch of boxes around, and colouring them..
Just look at their CSS files and layout, and reimplement it yourself.. It'll probably end up easier than reworking their CSS to work with your site (unless you completely copy their site, including the CSS, HTML and layout images), plus you'll learn a lot about CSS while you do it.
AFAIK, and IANAL, and all those other useful acronyms....
Under UK law, I believe you can get away with this kind of thing as long as there are at least 6 demonstrable and obvious differences between the copied article and the copy. Since I'm not a lawyer, I'm not going to go into what constitutes a demonstrable and obvious difference, but I would imagine a colour change would count as one...
You would obviously have to check the laws of your region before taking this advice.
Of course you will, Microsoft China was in a similar situation back when their Juku Blogging Service was found out to be a rip-off of Plurk, and yes, line by line code copying.
Microsoft responded with: “Microsoft takes intellectual property seriously, and we are currently investigating these allegations. It may take some time due to the time zone differences with Beijing.” when they were asked about it.
Here's a link to that article I was referring to.
I think Microsoft uses one of the templates that come out of the box with community server. But even if they didn't, I haven't heard of a case of someone having a cease and desist based on leveraging someone else's css.
Technically, they could. It is a violation of their copyright. If they exercised this right, however, it would likely be a PR disaster.
I think you're probably safe if you use it.
This would be a horrible idea, but you couldn't get into any trouble if you simply linked to their css.
You could also link to a copy of their css that was located somewhere else that is not associated with your website ;o)
Just some thoughts ...

Resources