CSS Zen Garden – Looking at CSS and HTML

HTML and CSS are the two fundamental building blocks of the web. By understanding these two mark up languages you can create static sites that look and feel exactly as you desire.

Masterclass in HTML5 and CSS3

So in a nutshell, what are these two languages, and how are they combined to build websites. I am not an expert, so here are a few definitions from our friends at W3 (www.w3.org, these guys basically invented the interweb).

“What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

  • Publish online documents with headings, text, tables, lists, photos, etc.
  • Retrieve online information via hypertext links, at the click of a button.
  • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
  • Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.”¹

So, HTML is essentially a way of formatting a document. You can add titles, paragraphs, make them bold or italicised, but you cannot do much in terms of ‘presentation’. Whereas CSS allows the developer to add styles in the form of colour, shape and even movement, creating a much more immersive and engaging experience for the end user/internet junky.

CSS Zen Garden

To get get a better understanding of the purposes of HTML and CS, I recommend you visit ‘CSS Zen Garden’, which really helps you to understand the fundamental difference between the two languages, and how they interact with one another. CSS Zen Garden allows you to alter the CSS of the page by selecting one of many stylesheets, which are uploaded by other users. The HTML remains unchanged, while the look of the site becomes radically different with each click of the mouse.

Screen Shot 2013-02-09 at 18.53.58

Have a little look! And who knows, you may even want to create your own stylesheet and submit it yourself!

Quick Bibliography!

W3. (2012). HTML & CSS. Available: http://www.w3.org/standards/webdesign/htmlcss.html. Last accessed 09/02/2013.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: