In my work,I often use the css to make the page layout,however I found that I can not make it well beacuse of the css position.
I know the float/absolute/releative and etc.
But when I use them I often can not get what I wanted. Expecially when I use the nested layout,for example,using a absoluted position element within a float element and etc.
I have read the w3cschool tutorial,but I also can not exactly sure I understand it.
So I wonder if there is any detailed css guide? Or some common rules when I layout the element?
I was also always looking for a definitive guide to css, but never found it. I think the best way to learn how css works and really understand it, is to look things up in a good reference and read it very carefully.
I think the Mozilla Developer Network is great, and they have a nice css reference.
Reading articles on websites like Smashing Magazine is also a good way to get your head around some of the more advanced or complicated concepts. Their article on floats has helped me in particular.
I find Sitepoint's reference to be fairly useful: http://reference.sitepoint.com/css. I also second #Basil's recommendations of MDN and Smashing Magazine. A List Apart, while not really a reference site per se, is also a good place to find tutorials or informative articles: http://www.alistapart.com/topics/topic/css/.
Related
I have taken the time to carefully learn the syntax of HTML5, CSS3, and JQuery.
I would now like to find a good resource that will help me develop a solid "design process." In what little design I've done up to this point, I've usually ended up with a pretty nasty looking .css style sheet with a lot of one-off-isms.
I'm open to any suggestions of a good resource or just some pointers that will help toward a good HTML/CSS design strategy.
Thanks
Break up your stylesheet into modules: Navigation, content types, header, footer, etc.
Don't use ids for assigning styles. This gives some more information on why that is, and more helpful tips http://oli.jp/2011/ids/
Read http://css-tricks.com/, Chris Coyier always has helpful tips on his site
Group your CSS styles, like #DevonRW said above.
Comment your CSS, just like you'd comment longer bits of code. It will help you and other team members in later maintenance.
Be careful, though, of doing something like creating a style definition that just defines the color of something. When using jQuery, you often end up needing to add classes, so that an element can have three or four classes at a given time...but you don't want to start out with three or four. Troubleshooting and making instant sweeping changes to your site styles can get really sticky that way.
One thing I've tried is coming up with a nomenclature for class names: sClassName for regular classes, jqClassName for classes that will be added (or removed) by jQuery. That may or may not be helpful to you, though.
I'm joining together a huge list of CSS3 shadows that will include tutorials, plugins, scripts and more. I have discarded all the other search methods and I have found some pretty cool things, but still I'm sure that I can find even greater things here, thanks :)...
This is a good one
Maybe this tool is useful: http://www.css3.me/
You can do some nice css3 stuff on an html div with some sliders and options. You can see right away what you are doing. When your done you can generate the source code and use it on your own website.
I know that is a very embracing question, but I have just started with Ruby on Rails, and still have a long way with CSS and HTML.
There are lots of books about CSS and HTML patterns, but I would like to know what is really applied to actual webpages.
For example, what's the best way of doing a simple webpage with a lateral menu, a logo on the top, and some text below?
Ok, it seems stupid, but there's lot of ways of doing that, or not ?
So, how can I learn this patterns and what are the real patterns ?
Would appreciate suggestions of books, articles, etc.
you can find some good css templates here:
http://www.csszengarden.com/
Actually in html and css there are not patterns in the oo sense.
I find this tutorial very useful:
Design and Code your first website
The nettuts website has a lot af very good free tutorials.
A very good book to begin is:
Head First HTML with CSS and XHTML
It varies from developer to developer. So I'll just tell you what I'm doing!
I'm actually following a very common pattern - separate ANY layout from the contents!
Into the HTML goes...
Text
<div/> containers with IDs to be layouted
And in the CSS goes...
Layout for the ID'd and class'ed <div/> layout containers
Colors, Background images
Fonts
It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!
The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!
This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!
You might want to check out some CSS libraries.
I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.
An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".
Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.
The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.
A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/
This is a site I used often as I learned the ins and outs of CSS design.
I am a web Developer. Even I do web design but I use the TABLE method for HTML, I want to learn Tableless coding (Div based).
Can anybody suggest me Few Best sites for learn Div Based Coding.
A List Apart archives
W3 Schools
These would be my two recommendations to start. A List Apart does a good job explaining more about why it's important to markup this way.
I tried to come up with a big list of things you should know, but I couldn't; it's not that much you need to know at all...
First learn how to use CSS
It's useful to know how to use the CSS float-property
And of course you may want to look at an example layout
Is there any fast guide for web application programmer regarding CSS. From my experiece, if one coder with no graphic design background but good in css can use div and span to create a nice looking page. any such 'quick guide' available for coder?
http://www.csstutorial.net/
http://htmlhelp.com/reference/css/quick-tutorial.html
There are plenty of quick guides on the staples of CSS, but they're more of an implementation perspective rather than a guide to aesthetic qualities (which I think is what you're asking).
To me most, one of the most authoritative sources for this subject is A List Apart. I suggest you start there.
I think what you want to read is "The Principles of Beautiful Web Design". It's a pretty light read, and give you insight in some designer concepts to get you along the way pretty fast.
If you want to learn css to put a nice page together I'd use a framework like 960gs. This won't help you in the context of working in a non-frameworked environment. But if you want to knock up a nice looking page from scratch without doing anything exotic with the layout and get it to work with a load of browsers 960 is the way to go.
Still go through some basics in css though.