NOTE: As with all web pages, they are often in a state of evolution. Within a couple of months of producing these pages giving the specifications of our Website design, we made a few changes. Most of these were cosmetic, changing a background color or font. We’ll list these changes soon. In the interim, there is still a lot to learn from our web page styles no matter what they look like.
In 1999 it was official. Web pages were to be designed using an innovative combination of HTML pages to hold the structure of the web page and an attached Cascading Style Sheet (CSS) file to hold the presentation elements. For consistency, one style sheet could be linked to hundreds of HTML pages. Until this point, the layout design relied upon by most designers was the table, a grid layout resembling graph paper. While it did the job, it was clumsy, confining, code heavy, and easy to screw up. By going tableless with style sheets, designers entered a new realm of creativity.
In 2003, our site, Taking Your Camera on the Road, finally got on the CSS band wagon and we completely eliminated our tables layout. The results are incredible. Our pages are easy to update and maintain, we have greater control, and they load incredibly fast.
More specifically, the benefits of using style sheets are:
- Faster Access to Content
- The loading time for a web page is based upon several factors, most importantly on the size of the files coming into the user’s computer. When a visitor comes to a CSS supported site, the first page loads into their browser along with the style sheet. During the rest of their visit, only the html page loads as the style sheet is already in the memory, reducing the load capacity. This gives faster access to the content and speeds up the whole process.
- Search Engines Get Content Faster
- A search engine isn’t looking at your pretty code. It wants the data to fill its database and help people find your site. The more code it has to plow through to get to the content, the harder the search engine has to work. CSS reduces the code and allows the search engine to get to the meat of your page. Some search engines also give points for pages which are web standard compliant with style sheets, which helps you move up through the ranks.
- Browsers Love It
- The majority of Internet browsing software recognizes Cascading Style Sheets. Instead of designing a page to accommodate all the different types of browsers and computers (Netscape, Microsoft Internet Explorer, Opera, Macintosh, etc), compliance with web standards creates a uniform set of code recognized by all the programmers. Bold will be bold no matter which program you are using. Any code not recognized by a browser is ignored without crashing or scrambling the page. The designers save time, and browsers can interpret the page with less stress and faster speeds.
- Designers Love It: Easy Update – Easy Maintenance
- Using CSS, instead of plowing through a couple hundred lines of code, I can get right to the content for easy updating and changes. Separating the design from the form means working with less code, but also more precise code. With less presentation code within the HTML page, there is less chance of slipping and deleting a little letter here or there and ending up with a scrambled web page. The less fuss you have to spend to create your pages, the easier they are to update and maintain.
- Greater Control Over Design
- Instead of tediously changing all the code on every page, a major task as our site totals over 500 pages and growing, we can change the design of our pages from one file. Using style sheets also gives the designer more control over layout, positioning, fonts, colors, backgrounds, and other effects than ever before.
- Accessibility: Looks Better to Non-Graphic Users
- Almost a quarter of all Internet users have special software that allows them to use a page without the pretty layout or displayed to control the background, foreground, and text size, overriding the designer’s elements. This includes the blind, visually impaired, physically impaired, and no-nonsense users. Add to that number of users viewing web pages on handheld computers and cell phones, miniaturizing and scrambling your lovely layout. The simpler your page layout is when stripped of the presentation code, absent the style sheet, the easier they can access your page.
- The Real Benefit They Don’t Tell You About
- After a year with a web standard compliant Website, there is a benefit that no one seems to mention. For the HTML and CSS writer and designer, this benefit is the BEST part of having a tableless web page. When you make a goof in a table layout, things go screwy and you have to plow through tons of code to find the goof. With a CSS based design, every little glitch is almost immediately obvious. Miss an end tag for a division, everything is a mess from that point down. Miss an anchor tag
and everything on your page becomes a link from that point on. The smallest glitch in the code is visible right away, giving you the clues to where the mistake began, making the job of HTML and CSS detective and problem solver fast and easy. In the graphic to the left, one span end tag was missing and everything below the “made easy” went screwy. Instantly, I knew where to start hunting. The more compliant your page is, honestly, the easier it is to maintain and spot those slips of the finger.
We’ve listed some links and resources below to help you better understand how HTML and CSS works. Our goal on this page is not to teach you HTML or CSS but to show off what we’ve come up with. The Web is a wonderful place to learn and exchange information. We borrowed many of our ideas from other people, and then begged others to help us create and fix what we wanted to design when we couldn’t find similar code. Currently, HTML and CSS designed code is not protected by copyright or trademark. The results are, but the underlying code is open source. When you find something you like, copy the code, but add in your own content, and see how it works for you. This means you can’t copy graphics, but you can copy colors, layout, and text styles. Then make them your own because no one likes a plagiarizer.
CSS For Beginners
- CSS: No Crap Primer
- CSS101: Beginners Course
- HTML Dog CSS Beginners Guide
- Tutorials: What On Earth is CSS?
- CSS From the Ground Up
- CSS Generator – Do It Yourself Starter CSS
- A Roadmap to Standards
- Selectoracle – Enter CSS Style Sheet and All is Explained *****
- NWE Help’s CSS DIV Instead of Tables ***
- Imaginary World’s Internet Brain CSS Layout Templates
- Adding A Touch of Style ***
- The Basics of Positioning
- W3 Organization’s School *****
- NYPL Style Guide
- Web Developer’s Virtual Library of Authoring Tutorials
- Webmonkey, The Web Developer’s Resource
- CodeMoose Tutorials and References on CSS
- Pageresource.com – Web Development Tutorial and Information Site