Session 1: CSS (Cascading Style Sheets) allow web developers much more control over the look of their web pages than with HTML alone. They make it possible to define styles globally for a site, eliminating the need for repetitive font tags, color tags, alignment attributes and so on. This creates better organization by separating form from structure. CSS is a critical tool for any web designer and makes creating sites infinitely faster and easier, once you’ve learned how to use them. There are four ways to include styles in your HTML documents.
1. Local or Inline is right inside a tag and overrides other definitions. Example: <h1 style="color: orange; font-size: 18pt; font-family: Verdana, sans-serif">This is an INLINE style</h1>
This is an INLINE style
2. Global or Embedded. A better solution is to include the style definitions in a style tag otherwise known as by using the global (embedded) technique. Like this example:
<html>
<head>
<title>Style Demo Page 1</title>
<style type="text/css">
<!--
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }
-->
</style>
</head>
<body>
<h1>TEST</h1>
<p>Hello World</p>
<table>
<tr><td>I'm in a TD tag with no font tag</td></tr>
</table>
<b>bold. <u>underline</u> within bold (no style)</b><br />
<i>italics</i>
</body>
</html>
3. Linked stylesheets are even better because they allow you to define the styles for an entire website once, then when you modify the stylesheet the changes take effect over the entire site, or wherever the stylesheet is linked. Here’s how you link a stylesheet:
<html> <head> <title>Untitled Document</title> <link rel="stylesheet" href="/im2420/my_styles.css" type="text/css"> </head> <body> <h1>TEST</h1> </body> </html>
and here’s what the stylesheet document (my_styles.css) looks like:
/* CSS Document */
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }
4. Imported stylesheet go within a style tag, thus allowing you to include other global styles which will override what’s imported. In the following example the h1 definition will override the h1 definition found in my_styles.css:
<STYLE TYPE="text/css">
<!--
@import url(my_styles.css);
h1 { color: #FF00FF; font-family: impact }
textarea { text-transform: uppercase }
-->
</STYLE>
Click any of the following links to view the examples we looked at in class:
style_demo0.html
style_demo1.html
style_demo2.html
style_demo3.html
Reading assignment: Stylesheets are extremely powerful and critical to creating useable, consistent and accessible sites. Please take the time to read the following tutorial and checkout other resources so you can take advantage of these techniques in your projects (note: using stylesheets is a requirement in all subsequent projects).
Web Monkey Stylesheet Tutorial (Getting Started)
W3Schools CSS Reference
Brainjar CSS Positioning Tutorial
Selectutorial – CSS selectors
Session 2: Today we will discuss the requirements for the UX Evaluation Project as well as begin demonstrations that relate to the project.
Assignment 1: “User Experience” (UX) Evaluation Project
Due: Session 2, Week 3 (15 points)
Description:
Create single page with the layout, images and type all formatted using HTML5 and CSS. Write the content for your web page as an evaluation of a website that you consider has poor UXD. Evaluate the website outlining how your example site does not adequately apply the UX criteria (SCANMIC) defined in the reading materials. The site you evaluate must be accessible over the internet and shouldn’t be too high profile or contain inappropriate materials. Make sure you include links to the pages that you’re evaluating in your web document also include images to illustrate your points. A zip file of your evaluation web page must be uploaded by session 2 of week 3.
Requirements:
1. Select a poorly designed “under the radar” website to evaluate.
2. Write a paragraph or two of content for each of the seven SCANMIC points.
3. Create anchors with navigation to each point from the top of the page.
4. Use an imported CSS document to format the type and images.
5. Upload your evaluation to your student webspace by session 2 of Week 3.
Student Example:
SCANMIC Student Example
Reading Assignment (PDF):
Identifying Web Usability Criteria
Points Breakdown:
2 points are awarded for coding headers, anchors, images, and divs within the document
4 points are awarded for illustrating normal flow layout, CSS styles, and basic typesetting
4 points are awarded for writing and presenting an informed critique of the chosen site