Mid Term COAP 3210 - nov 2011

Instructions

Tips

(1) Center the HTML h1 title(s)

(2) Make the HTML h2 titles smaller

(3) Add 1em left and right margins for the HTML body element.

(4) Make the borders of this #top box red and dotted, instead of black and solid

(12) Once you are done with the other 11 tasks, inhibit display of the div.instruction block above, but keep the yellow p.instruction blocks. This task only requires uncommenting.

Mid Term Exam resources

CSS Reference at Sitepoint

CSS Reference at W3C Schools

Web colors (Wikipedia)

(5) Draw a border around the lefttext divs

(6) Add 3pt padding to these same lefttext divs

Validators

CSS Validator

HTML Validator

(7) Remove the border of the #main box

(8) Make the padding of the div.text boxes much smaller

Purpose of CSS and status of the CSS 2 implementation

Today, CSS has three related main purposes

  • Define rendering of HTML and (text-centric) XML elements
  • Define page layouts
  • Support for interactive and animated pages, e.g. dynamic HTML or dynamic SVG. More precisely, JavaScript programs can alter CSS properties of HTML elements in order to move them, change their shape or have them appear/disappear, etc. Animation is about changing properties of objects over time.

Advantage of using CSS for styling web pages

(9) Text color of HTML strong elements be some dark blue

CSS is the modern way to define HTML styles (including positioning of elements in the page). Older HTML dialects include special tags for styling, i.e. the <font> tag, but their use is now strongly discouraged.

  • The Separation of content and style makes web sites easier to maintain
  • CSS allows for multiple rendering of the same contents, i.e. adaptation to media and people (screen size, font size, print, etc.)
  • In addition, CSS can be used to render contents of any text-centric XML vocabulary, e.g. one that you could invent on the fly.

Syntax of CSS declarations

A style sheet is a set of rules (also called rule sets) that describe how to render XML or HTML elements. Each rule has two parts:

  1. The selector (before the curly braces) defines to which elements a rule applies
  2. The declaration block (inside the curly braces) defines rendering, i.e. values of CSS properties

The syntax can be summarized as follows:

(10) HTML pre elements, e.g the one below, must have fine dotted borders and a pale background color

   selector { property:value; property:value; .... }
	  
  • Each declaration block includes at least a property name and a value, separated by a colon (:)
  • Each property:value pair must be separated by a semi-colon (;)

(11) Image size must be reduced to 70% (both height and width)

CSS selectors and properties pictures

Below is a a set of CSS example rules:

 h1 { color: red }
 p  { font-face: Verdana, sans-serif ; font-size: 12pt}
 h1, h2, h3 { color : blue }
 h1.Chaptertoc, h2.PeriodeTOC, h2.ExerciceTOC, h2.SectionTOC  {
 display: block;text-indent: 30pt;    
 text-align: left; font-size: 14pt;
 font-weight: Bold; font-family: Times;
     }
	  

As you can see h1 is defined more than once and the ground rule is that the last definition will apply, e.g. in our example, h1 will be blue.

CSS comments syntax

In computer speak, comments are lines of code that (usually) are ignored by the computer. Coders use comments to document the code in order to communicate and/or to remember what it does. In CSS, comments are inserted between /* .... */ and may extend over several lines. But don't use comments within the braces of the property declaration.

Here is CSS example that includes two comments:

 /* I love HUGE titles */
 h1 {size: 50px ; }
 para {display:block;} /* para elements are blocks */
      

DKS nov 2011 - Valid XHTML