Introduction to CSS
CSS wan’t created with design principles in mind. It was created to give developers the ability to change the presentation of their HTML documents. I’ve tried to break the different types of CSS rules into design principles (color, dimension, visibility) and basic categories (typography, layout), so that they would, in general, be easier to remember.
Accessibility Considerations
When using CSS to change the presentation of your document you should carefully consider the impact of those changes. Changing the text and background colors may seem harmless, but certain color combinations are difficult to read for people with poor contrast vision or people with color blindness. Changing the visibility properties may have an impact for people who use screen readers. Changing the positioning of some elements may cause the text of your document to read out of order. I’ll try to highlight specific considerations in each section.
What is CSS?
Visibility Dimension Color
Typography
Layout
CSS In Motion CSS Design Patterns Writing CSS
Getting Better at Design
Styling is more of an art than a science. CSS can give you control over how your HTML looks, but it may take a while for you to develop a keen eye for good design.
If you want to become better at design, learn a set of design principles and practice them. I recommend starting with The Non-Designer’s Design Book by Robin Williams which goes into detail about the CRAP principles: contrast, repetition, alignment, proximity.
Also look into the Gestalt Theory Principles of Grouping . A good start to learn more is the 7 Gestalt principles of visual perception: cognitive psychology for UX article which covers: similarity, continuation, closure, proximity, figure/ground, symmetry, order.
Yes, making “pretty pictures” can be just as technical as writing code, but by practicing a set of design principles over time, your eye for design will become better.