{"id":141,"date":"2010-06-07T10:40:24","date_gmt":"2010-06-07T15:40:24","guid":{"rendered":"http:\/\/www.fantastic-realities.com\/studio_blog\/?p=141"},"modified":"2010-09-09T22:01:15","modified_gmt":"2010-09-10T03:01:15","slug":"why-css-matters-living-in-the-petri-dish","status":"publish","type":"post","link":"https:\/\/www.fantastic-realities.com\/studio_blog\/2010\/06\/why-css-matters-living-in-the-petri-dish\/","title":{"rendered":"Why CSS Matters – Living in The Petri Dish."},"content":{"rendered":"
\"Petri<\/a>
Taking Print content to the Web<\/figcaption><\/figure>\n

Yes, it’s been months since I’ve posted here. And haven’t been that active in my Live Journal or Facebook pages either. The Studio’s been busy, folks. And have been shoving a number of projects through the house.\u00a0 And when you’re a self employed Creative Pro, paid bookable hours trumps blogging. I had been tempted to rant on about the evolving throwdown between Adobe vs Apple vs Google (sort of) vs Mircosoft, centering around the mobile market, web standards, web video, HTML5 and Flash. But the simmering war of words, with flaming fanboy camps tossing off on each side has grumped me out, and it can wait.<\/p>\n

So I decided to talk about some of the under the hood tech that makes contemporary web sites work, with a bit of diversion about bringing print content online.\u00a0 I’m going to pitch this to the web user and business reader, so my fellow web pros will probably be bored to tears. But for the rest of you, we’ll demonstrate the main idea of the marriage of HTML and CSS by taking a look \u201cbackstage\u201d with a print and web design project called, Living in The Petri Dish. <\/em><\/strong><\/p>\n

The past few years, over the winter I have been designing and Art Directing an annual calendar for an Interfaith Sanctuary<\/a>, and in the 2010 Edition of the Wheel of the Year Calendar<\/em>, I wrote a short Editorial Article for their Earth Living\/ Earth Spirit section, focusing on global environmental, sustainability and climate issues. I wrote Living in the Petri Dish<\/em> under my “spiritual” name, referring my Native American (among others!) Ancestry.<\/p>\n

\"\"<\/a>
The Print Version from the Institutional Calendar<\/figcaption><\/figure>\n

PDF<\/h3>\n

In times gone by, the most direct way to get print content online was to post a PDF version of the document. This is quite straightforward in layout tools such as Adobe InDesign, with a powerful export PDF function. But many applications, including Microsoft Office now have similar capability. In Mac OS 10, any document that can be printed, can be output to a PDF file. And here is the PDF version of the article<\/a>. which is the print version of the Calendar Page. Depending on your browser settings and capabilities, the file will open in a new window, or download to your local drive. While PDF files preserve the formatting and structure of the original print document, and does not require the recipient to have the creating application, graphics or fonts, it does have some limitations for the web.<\/p>\n

Web Coding, Old and Modern.<\/h3>\n

The \u201cOld School\u201d method of laying out a web page involved rather intricate coding, and creating tables to arrange elements on the page, like a mosaic, which were not their intended purpose. In more contemporary coding, the HTML page contains the content, and it’s information structure. And the display and presentation information is contained in a separate CSS style sheet. CSS refers to Cascading Style Sheets, which is a powerful method for marking up how a page is displayed. The main advantage is that you can have a separate style sheet for every page in a site, or just one for ALL the pages in a site. Or individual style sheets for unique elements, such as the home page, and a general one for the site’s content. The HUGE advantage is that if you need to alter an aspect of the site’s visual design, I make the change in the style sheet, and the change will appear in the entire site, or every page that accesses that style sheet. This is a much more efficient approach than painstakingly re-coding every instance of the design element in every page individually!<\/p>\n

I recently had occasion to demonstrate the capabilities of CSS for a user group, in this particular\u00a0 case, I took the SAME page, and used three different Style Sheets to radically alter the layout and appearance of the page. So let’s build a web page version using XHTML and CSS. As the author, I have the original text of the article, and was able to quickly code it into a basic web page, and collect some relevant links.<\/p>\n

Coding HTML and CSS<\/h3>\n

The text is organized into paragraphs and headers. And I divided the page into logical sections using “Div” tags. Otherwise there is no layout markup.<\/p>\n

\"\"<\/a>
Original images for the "Petri Dish" article.<\/figcaption><\/figure>\n

I also had the original images used for the article, so I sized them for the web at 72dpi, and we’re good to go.<\/p>\n

Take a look at the “pure content” version of the page<\/a>,<\/em><\/strong> without any CSS Styling.<\/p>\n

it’s all there, but it’s sooooooo\u00a0 1998, and kind of boring.\u00a0 So lets build a CSS Style sheet and connect it to my HTML document.<\/p>\n

\"\"<\/a>
This is where the magic happens... <\/figcaption><\/figure>\n

The highlighted code is where the HTML page refers to the CSS style sheet file that tells the browser how to display the page.<\/p>\n

\"CSS<\/a>
The CSS that will style the Petri Dish article page.<\/figcaption><\/figure>\n

A portion of the CSS file.\u00a0 As you can see, I have started to define the look of the page. The overall typeface and size, background colors and the styling the headers. You can look at the full coding here<\/a>, if you’re geeky and curious.<\/p>\n

And the completed page now looks like this. Living in the Petri Dish<\/strong><\/em>. <\/a><\/p>\n

As you can see, it’s much cleaner and feels more like a contemporary web page.<\/p>\n

“Presto-Changeo”<\/h3>\n

But I am well aware that clients might want something different. So why not? I created another CSS document, and went back and changed just one line of the HTML to implement it.<\/p>\n

<link href=”styles2.css” rel=”stylesheet” type=”text\/css” \/><\/h4>\n

I added some alternate graphics and the page takes on a radically different appearance<\/a><\/strong>.<\/p>\n

Some clients might want a little more IMPACT… happy to make it “Pop”<\/a><\/strong>.<\/p>\n

<link href=”styles3.css”…<\/h4>\n

I call this version “Hot Head Red”. It’s probably not the most tasteful design, but it was meant to show variation for the demo. Also for the sake of the demo, I added the navigation bar across the top to easily swap across the versions. Note that I’ve set the nav bar to pick up the link styling in the three versions.<\/p>\n

Remember, no other code was changed in the HTML page other than the single line referring to the style sheet. Now there are a few caveats, older versions of some browsers have uneven support for CSS, most notably Internet Explorer Version 6 which handles CSS in a non-standard manner. But modern browsers support CSS very well. IN the near future, we’ll be seeing the deployment and support in browsers of HTML 5 and CSS3 which will bring additional enhanced capabilities and features.<\/p>\n

Links<\/h3>\n

Living in the Petri Dish<\/strong> variations:
\n<\/em>No Styles<\/a>
\nBlueWhite Clean<\/a>
\nGreenWorld<\/a>
\nHotHeadRed<\/a>
\nPDF of Print Version<\/a><\/p>\n

Four Quarters Interfaith Sanctuary <\/a>
\nEarth Living~Earth Spirit<\/em> Complete Supplement<\/a> (PDF)
\nUnion of Concened Scientists<\/a>
\nRolling Stone: As the world Burns<\/em><\/a>
\nRolling Stone: The Climate Killlers<\/em><\/a>
\nUCS: \u201cIt\u2019s Cold and My Car is Buried in Snow. How Can Global Warming be Happening?\u201d<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

I decided to talk about some of the under the hood tech that makes contemporary web sites work, with a bit of diversion about bringing print content online. We’ll demonstrate the main idea of the marriage of HTML and CSS by taking a look \u201cbackstage\u201d with a print and web design project called, Living in The Petri Dish. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[33,83,29,42,9,14,27,36,32],"class_list":["post-141","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-blogging","tag-browsers","tag-creative-pro","tag-css","tag-design","tag-designers","tag-graphics","tag-html","tag-web-design"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"Kurt Griffith","author_link":"https:\/\/www.fantastic-realities.com\/studio_blog\/author\/admin\/"},"uagb_comment_info":1,"uagb_excerpt":"I decided to talk about some of the under the hood tech that makes contemporary web sites work, with a bit of diversion about bringing print content online. We'll demonstrate the main idea of the marriage of HTML and CSS by taking a look \u201cbackstage\u201d with a print and web design project called, Living in…","_links":{"self":[{"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/posts\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":26,"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/posts\/141\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/posts\/141\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/categories?post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fantastic-realities.com\/studio_blog\/wp-json\/wp\/v2\/tags?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}