Last month, in “What HTML5 Means for Ecommerce Merchants,” I described the aim of HyperText Markup Language, and the way HTML5 is best than earlier variations. In this text, I’ll assessment the position of Cascading Style Sheets.
HTML for Structure; CSS for Appearance
One solution to perceive CSS is to match it to HTML.
HTML organizes the content material of an internet site right into a logical construction. It may embrace parts like a header with a picture, a headline, and a paragraph to explain a product.
CSS defines the design, look, and positioning of all of these particular person parts. That header is perhaps 200 pixels tall with a light-weight blue colour. The headline could possibly be a big Museo serif font, and the product description might embrace a picture to the left.
CSS in Action
CSS is greatest proven in an instance. Here’s the straightforward menu from my HTML5 article, in HTML code.
<nav>
<a href="/">Home</a> |
<a href="/new">New Products</a> |
<a href="/all">All Products</a> |
<a href="/cart">Cart</a>
</nav>
And right here’s the identical menu as a screenshot of its entrance-finish, visible look.
A pattern web site menu, utilizing solely HTML5.
Now, I’ll apply some easy CSS to the menu.
nav a
shade: #FFFFFF;
background: #008000;
border-radius: 5px;
textual content-ornament: none;
padding: 5px;
nav a:hover
colour: #008000;
background: #ffffc2;
textual content-ornament: underline;
Notice how the CSS modifications the menu’s look.
Applying CSS to the HTML5 menu alters its look.
With simply two CSS type guidelines, a primary, flat navigation menu became one with inexperienced, rounded buttons, spaced out from one another. The buttons additionally change to yellow when a mouse strikes over them.
This instance is primary CSS. Most of it might work even on older net browsers and older computer systems, from way back to 2000 or so.
Older, Pre-CSS Styling
Speaking of 2000, understanding a little bit of net historical past will assist clarify why CSS has grow to be such a dominant know-how.
Design guidelines was utilized to every particular person aspect in an HTML doc. Using the instance above, every of the hyperlinks within the navigation menu would require guidelines added to them inside the HTML. That’s not an enormous deal for 4 hyperlinks. But it’s a large deal when there are a whole lot of parts on a single web page and hundreds of pages on an internet site.
In reality, right here is that instance menu with one rule utilized to every HTML component.
<nav> <a method="colour: #ffffff; background: #008000; border-radius: 5px; textual content-ornament: none; padding: 5px;" href="/">Home</a> | <a method="colour: #ffffff; background: #008000; border-radius: 5px; textual content-ornament: none; padding: 5px;" href="/new">New Products</a> | <a method="colour: #ffffff; background: #008000; border-radius: 5px; textual content-ornament: none; padding: 5px;" href="/all">All Products</a> | <a method="shade: #ffffff; background: #008000; border-radius: 5px; textual content-ornament: none; padding: 5px;" href="/cart">Cart</a> </nav>
That’s much more textual content. Notice how troublesome it’s to seek out the precise phrases — Home, New Products, All Products, Cart — used for the hyperlink names.
This made net design modifications extraordinarily troublesome and error-susceptible. A single typo on one web page might make that web page look totally different from each different web page, and you could not discover it for months.
If you needed to vary all of hyperlinks to be inexperienced, you’d edit, say, 10,000 parts throughout M,000 information.
Site-broad Design Consistency
CSS tremendously simplifies this. Using CSS, type guidelines might be outlined for the whole web site, or for as many pages as essential. Not solely does it make website-large modifications straightforward, nevertheless it additionally retains the design constant.
CSS does this by making use of the design guidelines to HTML parts via selectors. These selectors are a means of pointing to elements of the HTML doc that ought to use every type rule. In the instance above, I chosen hyperlinks (“a” factor) inside the navigation (“nav” component) for a mixed rule (“nav a”). By combining selectors like this, I can fashion solely the navigation hyperlinks and depart the opposite hyperlinks alone.
Notice, additionally, that the CSS instance above used a barely totally different selector (“nav a:hover”) to focus on the identical navigation hyperlinks, however solely when the mouse hovers over them (“:hover”).
Targeting Specific Pages and Elements
Combining selectors additionally lets CSS work additively. This means you possibly can add new issues to an present design with little work. If your retailer’s CSS is organized nicely and you employ good selectors, you may be assured that the brand new additions will solely have an effect on the pages and areas you need them to.
This additionally works on a web page-by-web page foundation, corresponding to touchdown pages or pages used for restricted-time gross sales, the place some elements of the general website design are used however different elements are utterly changed. You may, for instance, maintain the header and footer however take away the aspect navigation and focus your shopper’s consideration on the massive middle content material.
Using CSS, you’ll be able to even add one thing to your complete website briefly after which simply take away it later. For instance, throughout winter it’s widespread to see seasonal themes, colours, and designs seem on ecommerce websites. After the season is over, that winter-themed CSS may be eliminated and the location reverts to the unique design.
Challenges with CSS
When utilizing CSS, there are two vital issues that may happen within the lengthy-time period. Both are brought on by how the selectors are organized.
The first one is when CSS is concentrating on such particular parts that many single parts and pages find yourself having their very own customized design. This removes CSS’s benefit of giving your website a single, website-extensive set of design guidelines. Over the lengthy-time period, as the location grows and pages and types are added, this will grow to be a upkeep headache. I’ve labored on websites the place there have been a half-dozen alternative ways to type a button and every one was barely totally different than the others. It was painful to find out which one was right.
The second drawback is that CSS can develop into too generic. Instead of a targeted change affecting solely a selected aspect or a gaggle of parts, fashion guidelines can leak out and unintentionally have an effect on different parts. This drawback is compounded by the truth that you don’t know that this occurs until you see the unintentional impact your self. When this begins to happen, each design change turns into dangerous. It can take an enormous period of time to check different pages for the influence.
There isn’t one answer to those potential issues. CSS is just too helpful to cease utilizing. What has labored nicely for me is to deal with net design and CSS like typical software program improvement. Don’t leap in and make a fast change. Instead, assume by means of the change, make the change, check it on totally different pages, and clear up any bugs.
In brief, when used appropriately, CSS could make design modifications a lot simpler. It supplies a mechanism to let modifications evolve over time. From the tiny tweaks to a full redesign, CSS is a strong element of your ecommerce retailer’s know-how stack.
