The practice or profession of designing print or electronic forms of visual information
It is at it’s most simple, communication. At it’s most complex it is knowledge of hardware, software, and their specifications mixed with artistic inspiration, combined to communicate a message. People who are good at it can merge these different aspects until it look effortless. Good design is a delight to the eye.
Seth Grodin is writing about “The two things that kill marketing creativity” today.
The first is fear.
The fear that you’ll have to implement whatever you dream up.
The fear that you will fail…
The second is a lack of imagination.
He may be writing about about marketing, but the same two things could be applied to design. Do you hold back because you fear the outcome? Do you settle for routine solution, when you should strive for the right solution? Fear and lack of imagination affect all of us in the creativity fields. Knowing that they do may not be half the battle, but it’s a huge step in the right direction.
Here is a short list of the most common problems I see people having with CSS. This is by no means a complete list, just what I see in my day to day work.
Padding and Margins: Padding pads the inside of an element. Margins define space outside the element. These are easy to confuse, and easier to mess up. One of the most often problems people have with both of these attribute is this: By default, these attributes are not zero. If you want them to be zero, make them so.
Nesting: A DIV is just a container. It is easy and often beneficial to nest DIVs one inside another. Each can contribute attributes to the overall layout or style of a page, making attractive and complex layouts much, much easier. Don’t try to do to much with a single DIV, it might be easier to get what you want by nesting a couple of DIVs and applying different properties to each.
Borders: You’d think that borders would be straightforward, but a lot of people have trouble with them. The confusing part is that a problem with the border, which should appear between the margin and the padding of a container, is often just a symptom of the real problem. If you have a border issue, make sure that your DIVs are nesting properly, and that your margins and padding are correct. Those two issues will solve a lot of border problems.
Positioning and Floats: Used in the layout of a page, both positioning and floats can control the positioning of objects, DIVs, images, etc. If left to their own devices, objects on your webpage would flow sequentially down the page in the order they are listed in the HTML. These properties allow you to change that. The positioning property contains the attributes: Static, Relative, Absolute, Fixed, and Inherit. The Static attribute allows an object to fit into the flow a page normally, with the flow of the content. The Relative attribute bases its’ position on the flow of content, but allows you to move an object “relative” to that normal position. In contrast to those, the Absolute attribute allows you to place the object outside of the flow of content. The Fixed attribute (not widely supported at this time) takes that one step further and “fixes” the position of the object independent of both flow and scrolling. The Inherit attribute does just that, it tells the object to inherit it’s position attribute from it’s parent container. The float property also allows you to take an object out of the general flow, but in a subtle fashion. With float you can move an object left or right until it hits the edge of the containing object. Float is more subtle that position in that, while it is removed from the flow, text will flow around it. This makes it ideal for placing things like sidebars, photos, and small text boxes that you want independent of the content flow, but not conflicting with it either. - This is obviously just a rough outline of these complex properties, but more information is available at BrainJar.com: CSS Positioning.
The other problem areas I see I have covered before in other writing. They are Selectors and Sequence. Taking the time to learn a basic understanding of these two last concepts will go a long way towards mastering CSS.
IEBlog : IE7 Is Coming This Month… Are you Ready?
The final release of IE7 is fast approaching - and I mean really fast… and will be delivered to customers via Automatic Updates a few weeks after it’s available for download.
Actually, I think I’m ready. After a lot of testing with the newest version of IE7 available, I only had a few minor CSS issues to deal with. Pending major changes the way IE7 reads CSS between now and it’s release of course. While I’m not exactly thrilled with the changeover being included in an automatic update, I think everything should go smoothly.
An aspect of CSS that that I often see overlooked is sequence. The order of your styles can be very important. Web browsers read CSS files from top to bottom, with later styles taking priority over earlier ones. Consider a web page containing the code:
<a href="home">standard link</a>
<div id="control1"><a href="home">link control 1</a>
<div id="control2"><a href="home">link control 2</a>
</div></div>
This hypothetical web page containing the div “control2″ nested within the div “control1″ is using CSS containing these styles:
#control2 a {color:#000000;}
#control1 a {color:#660000;}
a {color:#FFFFFF;}
At first glance, this looks straight forward. Standard links are white (#FFFFFF), control1 links are maroon (#660000), and control2 links are black (#000000). Except if you tried this experiment as shown, it wouldn’t work. Both control1 and control2 links would be maroon. In the order the styles have been placed, the style #control1 follows #control2, and takes priority over it. This problem can be resolved by simply reordering the styles:
a {color:#FFFFFF;}
#control1 a {color:#660000;}
#control2 a {color:#000000;}
For clarity I’ve put the default style first, but the important part of this demonstration is the next two lines. #control1 above #control2. Because #control2 is an exception to #control1, it needs to be below it in the CSS sequence. Think of it this way, each style is a rule which can be modified only by rules that follow it. The default link style “a” is defined as having white links. Then there is an exception to this rule, #control1 links are maroon. Then an exception to that rule is made and #control2 links are made black. In this example, the proper sequence is everything. In the wrong order, the style #control2 is never seen, but always overwritten by #control1. In the proper order, each style is reflected in the appropriate links.