Internet and New Media

(706.003 1VU Internet und neue Medien WS 2014/2015)

Exercise 5: Three Style Sheets (CSS3)

In this exercise, you will make three different CSS3 style sheets for a given Polyglot XHTML5 document.

Please read these instructions carefully!

Read all of the instructions before you start work.

Please also read the corresponding chapter(s) in the current lecture notes (the PDF file) before you start.

5.1 Create a Local Working Subdirectory

• Copy the zip file graztimes.zip and save it somewhere on your local computer. Unzip the file and it will create a subdirectory called graztimes, containing a template for a mini web site and the front page of The Graz Times, a ficticious local English-language newspaper.

• Do not copy the subdirectory over to the university web server and upload your CSS file there. All files you upload to the web server (MS-P folder) are publicly accessible through the internet. If another INM student copies your CSS style sheets and hands them in as his or her own, you will both be punished for plagiarism, even if you did not know about the other student copying your style sheets! It is your responsibility to make sure that nobody can copy your work.

• Change directory to graztimes.

• You have been given one XHTML5 file, three CSS style sheets, and various graphics and images in two subdirectories:

    graphics/
    images/
    base.css
    graztimes.xhtml
    normalise.css
    reset.css
  

• Inspect graztimes.xhtml to figure out its structure. Explore which style sheets are included by graztimes.xhtml.

• The three given style sheets have the following function:

  • reset.css: resets padding and margin to 0 on all elements and some other sensible resets (to override varying browser defaults).
  • normalise.css: corrects some cross-browser differences.
  • base.css: provides sensible default styling for some basic elements.

  The values can in these style sheets can be overriden by values you later set in your own stylesheets.

• You must not modify any of the files in graztimes.zip in any way. The tutor(s) will use original copies and will not look at your modified versions.

5.2 Create Three Style Sheets using CSS3

• You will now create three different style sheets for The Graz Times web site.

• Work locally using a plain text editor such as PSPad, Crimson Editor, Notepad, Emacs, or UltraEdit.

• Microsoft Word, Netscape Composer, FrontPage, Dreamweaver, Adobe Edge, Microsoft Expression, etc. are not plain text editors and their use is strictly forbidden in this course!

• Use only valid, conforming CSS3 which is fully supported according to caniuse.com in all of these browsers:

  • IE 11 and above.
  • Firefox 33 and above.
  • Chrome 38 and above.

  We will test your style sheets using Firefox 33 or above.

• In your three style sheets, do not use any browser-dependent experimental features of CSS3, such as those beginning with vendor prefixes like -webkit-, -moz-, or -ms-.

• Validate each style sheet at the W3C CSS Validator http://jigsaw.w3.org/css-validator/ by uploading each CSS file separately ("By File Upload").

  Under More Options, select:

  • Profile: CSS level 3
  • Medium: All
  • Warnings: Normal report
  • Vendor Extensions: Default

  Errors issued by the W3C CSS Validator mean that your style sheet does not validate and will lead to points being deducted.

  Warnings issued by the W3C CSS Validator indicate problems with your style sheet, and may or may not lead to points being deducted.

  Alternate style sheets are not validated when you give the URI of an XHTML file, only the main style sheet is validated.

• File and directory names must be in all lower case and must not contain any spaces or special characters (such as Umlauts, tilde ~, or percent %). Use a hyphen (-) to separate words if necessary.

• Keep your lines of source code to 80 characters or less.

  Simply type shorter lines into your editor and use the Return key!

• Do not use any images in your style sheets (neither local, nor served from a server).

  This does not mean that you should make the supplied images invisible.

• Do not use any kind of web fonts.

• Every image should be sized using CSS, so that the browser can determine its dimensions ahead of time. You will probably need to resize (scale) both the (raster) images and (vector) graphics so that they nicely fit each layout.

• You may only use CSS to do your formatting. Do not add any markup or any Javascript to the XHTML file. You are not allowed to change the XHTML at all.

• Test your style sheets using Firefox 33 or above. Chrome implements much of HTML5 and CSS3, but does not currently support alternate style sheets.

5.3 Create a Responsive Layout (graztimes.css)

• Create a style sheet graztimes.css in the graztimes subdirectory.

• Design the style sheet to display the XHTML5 page in a responsive fashion using CSS3 media queries, with three supported width ranges: narrow, medium, and wide and breakpoints at 42rem and 62rem, as shown below in the breakpoint diagram below:

  

  • The web page must be fluid and freely scalable, so it works at a variety of window sizes. At widths below 42rem, it should switch to a single-column layout. Between 42rem and 62rem, it should use a two-column layout. Above 62rem, it should use a three-column layout. The web site (element mysite) should never become wider than 70rem.

  • Element header should be at the top. Element global-nav should be down directly below the header. Element footer should be beneath all other elements.

  • The navigation links in element global-nav should be formatted as a horizontal drop-down menu, without dots or circles preceding each list item. global-nav is a two-level menu, you must format it as a drop-down menu using CSS only (no JavaScript).

    If you need help, first work through the CSS tutorials at htmldog.com, then search the web for "css3 drop-down menus" or similar.

  • All sizes must be given in either %, em, or rem.

  • Do not use absolutely positioned elements (except possibly within the drop-down menus).

  • The figure captions should be beneath the figures at medium and wide layouts. They should be turned off completely (neither visible nor taking up any space) in narrow layout.

  • The credit span in image captions should be enclosed in square brackets ([...]) when displayed.

  • The telephone number should be made "DarkBlue" in colour at 80% font size. It should be preceded by the Unicode 'TELEPHONE LOCATION SIGN' character (U+2706).

  • All other elements must be visible.

  • Prices in the stories element (and only here), should have a background colour of "yellow".

  • Whatever else you deem suitable, as long as the page remains readable and responsive...

5.4 Create a Fun Stylesheet for Children (kids.css)

• Create a style sheet kids.css by copying your responsive layout from graztimes.css above. Modify the style sheet to create a fun design for children as follows.

• The primary font choice for basic text in the body must be "Comic Sans MS". Define the generic font family "fantasy" as a final alternative, in case the primary font is not available.

• Use brighter colours (the page should still be readable!).

• All sizes must be given in either %, em, or rem.

• The figure captions should be beneath the figures at medium and wide layouts. They should be turned off completely (neither visible nor taking up any space) in narrow layout.

• All other elements must be visible.

• Whatever else you deem suitable, as long as the page remains readable and responsive...

5.5 Create a Print Stylesheet (print.css)

• Create a style sheet print.css in the graztimes subdirectory.

• Design the style sheet for print media:

  • The primary font choice for basic text in the body must be "Times New Roman". Define the generic font family "serif" as a final alternative, in case the primary font is not available.

  • Basic text in the body must be at 12pt size.

  • All other sizes (font sizes as well as borders, margins, etc.) must be in either pt or %, em, or rem.

  • Headings should be bold and in "Verdana" font. Define the generic font family "sans-serif" as a final alternative, in case the primary font is not available.

  • The header block must have no visible background of its own.

  • The header block must be separated from the material following it by a solid, thin, black line.

  • The navigation element global-nav must neither be visible, nor take up any space.

  • Links in the text must not be underlined, should be bold, and should have this text colour: #005606 (a dark green). They should also be followed with the destination of the link in angle brackets (greater than and less than), also bold and in the same dark green colour.

  • The link from the logo in the header should not be visible and its destination should not be displayed.

  • The whole page must be black on white, apart from the images and where otherwise noted.

    Make sure your print style sheet does not specify colours for anything else but the links. In particular, do not make the images invisible!

  • An article block should not be split across two pages (i.e. avoid page breaks inside articles).

  • Images within article elements should float to the right of the text.

  • The figure captions should be beneath the images and have size 9pt.

  • The credit span in figure captions should be enclosed in square brackets ([...]) and have size 8pt.

  • The extras block must neither be visible, nor take up any space.

  • All other elements must be visible.

  • Do not create a multi-column layout. The entire page layout should consist of a single column in which all elements are placed one after the other, as illustrated below:

    +---------------------+
    | header              |
    +---------------------+
    | stories             |
    |                     |
    |                     |
    |                     |
    |                     |
    |                     |
    |                     |
    |                     |
    |                     |
    +---------------------+
    | footer              |
    +---------------------+
    

  • Acronyms and abbreviations should be written out in full, with the abbreviation following in parentheses.

    For example, if the page contained the acronym "INM" for "Internet and New Media", the element should appear like this in print form: Internet and New Media (INM).

  • The footer should be separated from the stories element by a thin solid border of colour "#242424".

  • The valid-xhtml, valid-css, and impressum spans in the footer must neither be visible, nor take up any space. The copyright text should be centered between the edges of the page.

  • Whatever else you deem suitable, as long as the page still prints nicely.

• You can test the print stylesheet by looking at the Print Preview in Firefox (which gives you an approximate rendition) and by printing to PDF (which gives you an exact rendition).

  You can print to PDF from any web browser by installing a free PDF printer such as PDFCreator or Cute PDF Writer.

5.6 Hand In Your Style Sheets

• Upload your three style sheets graztimes.css, kids.css, and print.css to the Sapphire online course management system sapphire.iicm.tugraz.at.

  Sapphire's Ex5 Upload will be available from Wed 05 Nov 2014.

• Upload the files as three separate files, do not create a zip or rar file and upload that.

Bear in Mind

• You must not modify any of the files in graztimes.zip in any way. The tutor(s) will use original copies and will not look at your modified version.

• You must not upload your files to your university web site or any other publicly accessible server. Doing so would allow others to copy your style sheets, which would result in both of you being punished for plagiarism!

• Your style sheets must be valid CSS 3. Validate each of your style sheets at the W3C CSS Validator http://jigsaw.w3.org/css-validator/ by uploading each file separately. Alternate style sheets are not validated when you give the URI of an XHTML file.

• And all of the other relevant points in the lecture notes.