Overview

It is necessary to review the “Essential” section before proceeding with the following tutorials and review:

  1. XHTML5 syntax, it's XML “well-formdness”, validation and use of a range of elements.
  2. CSS syntax and a range of CSS declarations with a variety of properties and their values.
  3. Underpinning concepts and technologies, DTD, DOM, XML, image, audio and video representation.
  4. Practice with browser developer tools to examine the DOM and the CSS declarations and examining a network request and response.
  5. Use of IDEs, tools and resources for coding, validation, basic image manipulation and media conversion.
  6. A small site containning the “Essential” exercises validated and hosted on a server.

If any of the above doesn't sound familiar, then please review the “essentisl” tutorials and complete the exercises.

Approach

CSS is deceptively simple in its syntax but very difficult to develop. Factors that need emphasising include:

  1. DOM specifies a tree data structure with ancestors, parent and children nodes. CSS definitions for parents or ancesstors nodes are inherited by all children nodes. So, a font defined for the body element is inherited by all elements within the body. This is very powerful and could be used to good effect (or great confusion).
  2. Starting at the root element and styling type followed by class and id selectors for each of the main components such as typography, layout, navigation, and general rules of a site leads to more efficient and maintainable code.
  3. A semantic naming convention for selectors soon becomes essential on any sizeable project.
  4. Design and development is cyclical and each cycle should include validation and testing, for example, CSS for layout could be one development cycle that tests for all possible layouts for the site.

Implementing the above points results in a code base akin to a small framework that could potentially be used accross different projects.

The following sections clarifies the general points above with CSS examples based on the Gumby CSS framework. The examples will help in introducing key CSS properties and also help in the transition to using Gumby effectively.

Typography

Argueably typography is 90% of design and involves typfaces, size, length, spaces between characters and groups of characters. Typographers speak of rhythm and proportion with horizontal and vertical motion that has to do with human perception of patterns and spaces. The following is based on the Gumby framework styles.

@import url(//fonts.googleapis.com/css?family=Ubuntu|Happy+Monkey);
html { font-size: 16px; line-height: 1.625em; }
body { font-family: "Ubuntu"; font-weight: 400; background: white;  color: black; }
h1, h2, h3, h4, h5, h6 { 
	line-height: 1.16em; padding-top: 0.27em; padding-bottom: 0.27em; }
h1 { font-size: 68px; }
h2 { font-size: 42px; }
h3 { font-size: 30px; }
h4 { font-size: 26px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

h1, h2, h3, h4, h5, h6 { 
	color: #444444; padding-top: 0.273em; line-height: 1.15538em; padding-bottom: 0.273em; }
p { margin-bottom: 13px; }
q, blockquote { quotes: none; }
a { color: #d04526; text-decoration: none; outline: 0; line-height: inherit; }
a:hover { color: #c03d20; }
  • The syntax of CSS should be familiar, selector followed by proprty value pairs.
  • @import is used to import external CSS.
  • If in doubt about any property definition, check the full definition in the CSS reference.

Layout

Layout of a page can be complex as the HTML Box Model allows for a three dimentional space for elements, each with padding, border and margin. Layout is made more complex as there are block elements, such as a paragraphs that are positioned in a block layout similar to paragraphs in a book and inline elements such as hypelinks and images that are positioned within the parent block element.

Historically, tables were incorrectly used to position elements and the div element was introduced to address this problem and are used in Grid systems for general layout schemes.

The page layout in a grid system is seen in rows with columns, for example the classic design of a header row above a content row with two or three columns and a footer row.

In a flexible multi-column layout, each row is divided into one to twelve or sixteen columns. Each column is floated to the left and, except for the first column, given a left margin. The key is to calculate the width of each column and its left margin so that when combined, it fits the exact width of a row.

Assuming tweleve columns fits a row, it is possible to have any combination of columns adding up to tweleve. A row with two equal width columns would be made up of two six columns widths, or three columns would be three four columns widths and so on. So, calculating a column width would allow for a flexible grid layout to be implemented.

Assuming a row width of 960px, each with upto 12 columns, there are potentially upto 11 magins; assuming a margin of 5px, the width of each column is 960 - (11 × 5) / 12 = 75.42px. Furthermore, this fixed width layout can be turned into a fluid layout by using a relative unit, percentage, instead of an absolute unit, px. Here is the Gumby framework CSS for a fluid tweleve column grid:

.row { width: 100%; max-width: 980px; min-width: 320px; 
		margin: 0 auto; padding-left: 20px; padding-right: 20px; min-height: 3em; }

.columns:first-child { margin-left: 0; }
.columns { margin-left: 2.12766%; float: left; min-height: 1px; }

/* Column Classes */
.row .one.columns 	{ width: 6.38298%; }
.row .two.columns 	{ width: 14.89362%; }
.row .three.columns { width: 23.40426%; }
.row .four.columns 	{ width: 31.91489%; }
.row .five.columns 	{ width: 40.42553%; }
.row .six.columns 	{ width: 48.93617%; }
.row .seven.columns { width: 57.44681%; }
.row .eight.columns { width: 65.95745%; }
.row .nine.columns 	{ width: 74.46809%; }
.row .ten.columns 	{ width: 82.97872%; }
.row .eleven.columns { width: 91.48936%; }
.row .twelve.columns { width: 100%; }

The classic design with a header row above a content row with two columns and a footer row can now be specified with the following HTML:

<div class="row">
   <p>Page Header - 100% width</p>
</div>
<div class="row">
   <div class="nine columns">
      <p>Left column - 9 out of the 12 columns, i.e. 75% width</p>
   </div>
   <div class="three columns">
      <p>Right column - 3 out of the 12 columns, i.e. 25% width</p>
   </div>
</div>
<div class="row">
   <p>Page footer - 100% width</p>
</div>   	
  • The content row being two columns of nine and three is a design decision; it could be specified as eight and four or two equal columns with six and six classes and so on; the point is it should add up to 12 as that would make a complete row width. For a 3 column design, there are options for say, four, four and four width or eight, two and two, or any other combination that again adds upto 12.
  • The column width being expressed as a percentage means you can nest columns within columns.
  • The row is centered with the CSS declaration margin: 0 auto;. The left and right margins set to auto ensures the row is centered. This can be changed to an absolute margin, say, margin: 0 10px; for a fixed layout.
  • Note the width: 100%; is a fluid design, the column changes size as the browser window size changes. For a fixed width design, width can be set to an absolute value, say, width: 980px;

General styles

/* General */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, 
nav, section, summary { display: block; }
	
a img { border: none; }

img, object, embed { max-width: 100%; height: auto; }

/* Lists */
ul, ol { margin-bottom: 0.273em; list-style: none; }
ul { list-style: none outside; }
ol { list-style: decimal; margin-left: 30px; }

ul ul { margin: 4px 0 5px 25px; }
ol ol { margin: 4px 0 5px 30px; }

li { padding-bottom: 0.273em; }

ul.square, ul.circle, ul.disc { margin-left: 25px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }

/* Tables */
table { display: table; background-color: white; border-collapse: collapse;
	 border-spacing: 0; margin-bottom: 20px; width: 100%; border: 1px solid #e5e5e5; 
	 border-collapse: collapse; border-spacing: 0; }
table caption { text-align: center; font-size: 30px; padding: .75em; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
table thead th, table tbody td, table tr td { display: table-cell; padding: 10px; 
	vertical-align: top; text-align: left; border-top: 1px solid #e5e5e5; }
table tr td, table tbody tr td { font-size: 16px; }
table tr td:first-child { font-weight: bold; }
table thead { background-color: #3085d6; color: #fff; }
table thead tr th { font-size: 16px; font-weight: bold; vertical-align: bottom; }

/* Forms */
form { margin: 0 0 18px; }
form label { display: block; font-size: 16px; font-size: 1rem; line-height: 1.625em; 
	cursor: pointer; margin-bottom: 9px; }
form label.inline { display: inline-block; padding-right: 20px; }
form dt { margin: 0; }
form textarea { height: 150px; }
form ul, form ul li { margin-left: 0; list-style-type: none; }
form fieldset { border-style: solid; border-width: 0.0625em; padding: 1.5625em; 
	border-color: #d8d8d8; margin: 18px 0; }
form fieldset legend { padding: 5px 10px; }

Exercise – CSS Necessary

CSS is deceptively simple in syntax but difficult to implement. This is partly due to the many CSS properties which often have to be combined for a particular visual effect. The approach was to categorise these properties for typography, layout and general styles. The aim is to apply this in a practical example.

  1. In the wd project, create a css_necessary.css file and link it to a css_necessary.html file. Use the code from the structure exercise as a reminder of a complete HTML document.
  2. In the css_necessary.html file, insert a row with three columns. In each column, insert each of the images from the graphics exercise.
  3. From your HTML exercises, copy example code for typography, lists, table, and form and paste them in the css_necessary.html file.
  4. Use the developer tools to see the HTML code and note the CSS being applied. Click next to each CSS property to disable it and see any changes to the display. Click on an attribute value and change it and see the effect in the display.