Web Stack Series Part 6: Cascading Style Sheets

August 13, 2007 | Filed Under Design, Web Site Development

CakePart 6 of our journey through the Web Stack brings us into the design realm. In the world of web design, HTML is the cake and Cascading Style Sheets, or CSS, is the decorative icing on top. CSS is responsible for making your web site look delicious.

Cascading Style Sheets didn’t get a lot of attention until about 5 years ago, when web standardistas such as Jeffery Zeldman and Eric Meyer started encouraging designers and developers to separate stylistic elements from semantic, structural elements. Doing so makes web sites consumable by a wide array of different applications.

CSS is a way of separating the look and feel of your website from the underling function of the data an content. This gives you the ability to apply several different style sheets to the same HTML to achieve wildly different results. For example, the following 5 links all point to the same HTML document, but each one uses a different style sheet to drastically change the appearance of that HTML

  1. http://www.csszengarden.com/?cssfile=201/201.css
  2. http://www.csszengarden.com/?cssfile=199/199.css
  3. http://www.csszengarden.com/?cssfile=194/194.css
  4. http://www.csszengarden.com/?cssfile=185/185.css
  5. http://www.csszengarden.com/?cssfile=189/189.css

Here is the same HTML document without any style sheets: CSS Zen Garden Sample HTML

Quite a difference! The possibilities that this flexibility affords are endless. You could create a style sheet that renders your web site one way for regular web browsers, and another style sheet that renders your web site in a more compact view for mobile phones. You could even provide different designs for different types of users - and you can do this without ever touching the underlying content or HTML.

I want to illustrate this concept with an example. Here is a small snippet of HTML:

<h1>Hello World!</h1>
<p>Nice to meet you!</p>

Now, let’s write some CSS to add some pizazz. This is what a typical style sheet rule might look like:

h1 { color: red; font-size: 32px; }
p { font-weight: bold; }

Hello World!

Nice to meet you!

Here, I am setting the size and color of all text inside of h1 tags. I am also making all paragraph text bold. Now let’s say I want to change the style of all the headings across my entire site. All that needs to be changed is the single CSS rule.

h1 { color: blue; font-size: 28px; }

Hello World!

Nice to meet you!

Now, on every page of my web site, h1 tags will appear blue and in a slightly smaller font size. Notice that I did not change the underlying structure of the HTML. This illustrates the flexibility that separating structure and style provide to us.

CSS is still maturing and being improved. The W3C issues specifications that browser makers use when creating their software. The specifications layout rules for rendering different elements of CSS. Despite these specifications, however, many browsers still render the same rules differently, creating big headaches for designers.

It is not uncommon for larger web design shops to have a person who is dedicated entirely to creating HTML and CSS, although this is a luxury that most can’t afford. In most situations, it is the graphic designer who will be responsible for creating the CSS for your website. Make sure that the person designing your website is knowledgeable regarding the use of style sheets. A good way to test your site is to view it without the CSS file. Is the site still usable? If so, then your designer has done a good job.

In the next part of this series I will explain graphic design and how it can be integrated with CSS to create spectacular web sites. Stay tuned!

Like This Article?

Subscribe Subscribe to the RSS Feed
Add Your Comments 3 Comments - Add Yours!

Related articles:
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • Digg
  • Reddit
  • del.icio.us
  • Technorati
  • Ma.gnolia
  • Furl
  • Simpy
  • Netscape
  • YahooMyWeb

Tagged:
, , , , , ,

Comments

Web Stack Series Part 5: HTML and Markup

July 17, 2007 | Filed Under Web Site Development, Technology

HTMLHow do web developers create the layouts of web pages? How do they tell the browser to arrange images around the copy in just the right fashion? How do web browsers know that one paragraph of text should be italic, while the other should be bold? The secret sauce behind all this magic is a markup language known as HTML.

HyperText Markup Language, or HTML, is probably the most ubiquitous and well known language in the world of web development. It is the language that programmers use to describe a web page’s content and structure so that web browsers can display it correctly to the end user. Marking up a web page means wrapping all of the content in descriptive tags. These tags describe the content’s purpose and how it relates structurally to the rest of the web page.

HTML is used to create headings, paragraphs, tables, block quotes, and a lot more types of content. It is also used to insert images into a web page. Here are some examples of HTML:

HTML is usually created after the web site mock-up has been created by the graphic designer. After the mock-up is sliced up into the appropriate images, HTML is used to arrange those images around the content of your site. If you have a dynamic web site, the business logic programming will wrap the dynamic content with HTML so that it is displayed correctly in the browser.

Good vs Bad HTML

In the early days of the Web, HTML was used to add style to a web page. It could be used to make things bold and italic, big or small, and even colorful. Once the Web started to mature and gain popularity, a bunch of smart people decided that HTML was being used incorrectly and that standards should be created. Instead of defining the style of a web site, HTML should have been defining the structure. This approach to marking up a web site according to its function rather than its form is called using semantic HTML, or marking up the content to reflect only the author’s intentional meaning. Styling the content is something that should be left up to style sheets, which we will talk about in more detail in the next installment of this series.

Good HTML is the single best ingredient for good SEO. By using semantic HTML to describe the structure of your web site’s content, you make it easier for search engine robots to parse through your site. For example, using the appropriate level of heading to segment content based on importance will help the bots know what information is most important and which information it can ignore.

Traditional HTML did not enforce much discipline on programmers. If the HTML was slightly wrong or incomplete, most web browsers would automatically correct the problem. XHTML is a more recent version of HTML that specifically adheres to the strict standards set forth by XML. This version forces programmers to be disciplined in their syntax. By requiring strict syntax, web pages are more consistent and better prepared to be consumed by applications other than web browsers. For example, if a web site’s content is marked up semantically with XHTML, it can be consumed by feed readers, mobile devices, desktop software, and many other software environments.

There are several different versions of HTML, I recommend that you require your site to be marked up with XHTML 1.0 Strict; your developer should know what this means - if they don’t, find a new developer. the W3C provides specifications for all versions and even makes available a handy validation tool to ensure that your site adheres to the rules of your chosen HTML version. When you are working with a developer, make it a requirement that all pages pass W3C validation.

Browser Wars

Unfortunately, the browser wars that continue to rage on have left many battle scars along the way. As a result, none of the current web browsers render and display HTML in exactly the same way, creating huge headaches for developers. For example, a level 2 heading in Microsoft Internet Explorer may be displayed in 14pt font while the same heading in Mozilla Firefox may be displayed using 12pt font. This is another area where style sheets come into play - they help normalize differences between browsers so that web sites look consistent regardless of the browser in which they are rendered.

Additionally, in an attempt to out do one another, some browsers have included support for proprietary HTML tags. If your web site uses a proprietary tag that is only available in one browser, the site may break or be displayed incorrectly in other browsers. It is best to just stick with plain vanilla HTML as defined by the W3C to ensure maximum cross-browser compatibility.

Educate Yourself!

HTML is a very easy language to learn and understand. I recommend picking up a basic HTML book (for example: Learning Web Design: A Beginner’s Guide to HTML, Graphics, and Beyond) or reading through some online tutorials so that you have a good understanding of how HTML works and what its capabilities are. This will further arm you when discussing your site with designers and programmers. Additionally, a good knowledge of HTML will give you a greater appreciation of the planning and work that goes into creating a good, quality web site.

In the next part of this series, we will be discussing Cascading Style Sheets. Style sheets are the icing on the HTML cake - they add style and glamour to your semantically marked-up web site. Check back soon!

Like This Article?

Subscribe Subscribe to the RSS Feed
Add Your Comments Add Your Comments!

Related articles:
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • Digg
  • Reddit
  • del.icio.us
  • Technorati
  • Ma.gnolia
  • Furl
  • Simpy
  • Netscape
  • YahooMyWeb

Tagged:
, , , , , , , , ,

Comments