As is the case with any technology field, the web design industry is constantly being updated with more efficient and effective tools and practices. One of the newest upgrades for HTML/CSS designers is CSS3. CSS, Cascading Style Sheets, is the code that stylizes an .html page. CSS styles can be either internal to the .html page, or external. I design almost exclusively with an external CSS file, to keep myself and my websites organized. Below are a few examples (after the jump).
The new CSS3 updates offer more easily executed design options, as well as more useful methods for current practices. The main difference in structure since CSS2 is the introduction of Modules. The Modules structure has broken elements of CSS into various groups, such as Text, Fonts, Colors and Backgrounds, Columns and many more. The main reason for breaking down all of CSS into many units is to allow updates and changes to be made more easily and more frequently. Instead of waiting until every aspect of CSS is ready for an upgrade, Font changes, for example, can be made at any given time and will therefore be updated on a more regular basis.
Some of the more noticeable changes for web viewers will be those that improve the look of sites. Rounded borders, drop shadows, multiple background images, and more web fonts are just the beginning of a list of effects that will be easily executed with CSS3. For the most part all of these effects were possible in some way previously, but extensive steps and hacks were usually required, whereas now a simple ‘box-shadow:’ or equivalent command will get the job done. This means not only improved results for viewers, but also more streamlined behind-the-scenes actions for designers. Design Shack has a great series of posts outlining and demonstrating some of the new effects in CSS3.
One of the caveats of CSS3, so far, is its limited browser support. Browsers must pick up the new changes in order for them to go into effect. So far, Safari and Chrome are supporting CSS3 almost completely, while Internet Explorer has not made much progress at all in conforming to these new standards. IE9 shows more promise, with the plan to pick up most of the modules when it is released (expected sometime in 2011). Firefox is supporting some modules, though not all. For updates and to continue to follow CSS3 news, CSS3.info is a great resource.
I have seen that IE9 will not run with XP …. and the purge begins.
How are CSS definitions, separated from the objects they control, better than having all style controls and commands in the same line with the objects and script they define, “better” (http://getcreativewebdesign.com/htmlcss.jpg)”?
Hey Mo…I too have heard that ugly rumor about IE9, what a mess!
As for CSS placement, there are so many ways to do it and really the “best” one is whichever you feel most comfortable with. I use an external stylesheet so that I can apply the CSS to more than one page (i.e. all the pages of a website). If I am creating a quick one page site (such as a “coming soon” or other temporary page), I will sometimes place the CSS within the html page, as seen above. Because I am used to using an external stylesheet, I prefer my CSS and my HTML codes to remain separate. It is purely an organizational preference. If you typically write your CSS within HTML files then there is absolutely no reason not to put the styling on the same line as your elements, like this.
Great question, thanks for pointing that out!
Thanks Elise,
I’ve done “simple” stuff over the years and have not yet adopted the CSS concept. Since I “design” by “code & view”, I just massage a line ’till it looks somewhat like I envisioned, move on to the next element and cut & paste stuff I can live with. I like it organized that way, in order of appearance, defined accordingly all in “one place”. I’m not really anal, just too old (stubborn?), to change …
“Websters” are cowboys (and cowgirls), … do what is needed, with what they have. CSS is fencing in the range.
:^)