Sorry for my bad english. In order to learn css, I wrote a page where I can see what happens changing commands (js).
I’m not sure it is well done. Anyone can tell me if there are errors, or what is missing?
http://www.ristomagic.com/ristomagic/picker/index.php
thanks
For me it would just be easier to make changes in the CSS file adn hit F5 (refresh) to see changes.
Though there are many CSS properties that are difficult to “see” always.
I dislike w3schools.com, but they do have a “TryIt” editor. Where you can write real CSS and HTML and see the results immediately.
JSfiddle would be another pre-built tool that immediately shows you results of your code.
Later you will write CSS and when you don’t see what you are trying to make, you come here and post the code and ask “why am I not getting (x)?” and we can explain what your code is doing and why you don’t see x.
I dont know if you meant that you are trying to create an online tool or not. If you are, I guess I just find the UI confusing, even if teh features promise to be robust. Do look at w3schools.com, “tryIT” UI.
If what you are trying to do is to be able to see for your self what each propriety does, I would think it would think a good tool would be FIREBUG. FIREBUG lets you add/remove/disable/enable code live onscreen! There a quite a few advantages to Firebug that come to mind
It does what you are intending, on any piece of code. So you could start with a simple HTML document you made yourself and use Firebug to inspect it… and move up to inspecting complex coding masterpieces. This allows you to learn formulaically, that is you can come in with your own assumption of how the property behaves, and then have a sample ( and a calculated value).
Firebug show you which rules are overriding which… so along with a property you get to see HOW THE CASCADE works. This is just as important in CSS as knowing what “command” does what
Because you can tweak style sheets live and non-destructively you can test out your hypothesis’ of how rules behave. Personally I find that to be a great learning aid… beign able to to confirm if the way I THINK something should work is teh way it ACTUALLY does work.
Firebug is already a great debugging tool for experts, so once you do master CSS you have also become familiar with a great way to DEBUG your work ( as opposed to going through the effort of coding a learning tool which you intend to abandon once you’re semi-comfortable with CSS)
Think you both are right. I know w3schools.com, and less Firebug. I’m lazy. I tought in w3schools.com I have to write code, while in my page with only 2 clicks I can see float:left and float:right, but unfortunally css is not so simple. Probably best to do is to follow Firebug. I will do it.
thanks a lot
Writing code by hand is the slow but best way to learn. And guess what? I’m still writing code by hand. You learn to see how terrible the code is from machines that write it for you. When you’re new you don’t see how bad it is : )
Although I totally agree with poes and dresden_phoenix, it just so happened that Nettuts+ posted an article today on how to do what you want to do: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-inject-custom-html-and-css-into-an-iframe/
It’s the technique that’s probably also used on w3schools.
Ah, yeah, they mention JSBin which sounds like JSFiddle. Which also do the same thing except those are on other’s servers instead of your own machine.
w3schools site is best site for learn the CSS quickly for beginners…
sitepoint css books are also very good and practial…
They worth reading