Review

First HTML Page

Demo

Let's create an HTML page and publish it to Github Pages

Exercise

• Create your own home page and publish it to Github Pages

Sitemaps

Demo

Let's create a sitemap based on user stories

Exercise

• log into Google Drive and create a new Google Drawing. Using shapes, create a simple sitemap based on your user stories from last week
• log into Github and create HTML pages according to your sitemap. Make sure each Page has a title, a main heading, a paragraph describing what the page is for and links to the other pages.

Basic CSS

What are Cascading Style Sheets?

Cascading Style Sheets allow us to define how we want our HTML to appear on screen. The HTML gives our content structure, CSS presents it. Proper web design separates content (HTML) from presentation (CSS). Separating content and presentation gives us several benefits:

• we can work on each separately, which is easier in a team environment
• helps us organize our projects, html is here, styling here
• simplifies the creation of swappable “Themes”

Including Styles

• Link external stylesheets using the <link> tag, e.g. <link rel="stylesheet" href="mystyles.css">
  • External stylesheets should be saved with the .css file extension, e.g. mystyle.css
• Embed them using the <style>...</style> tag
• Use them inline with the style="..." HTML element attribute

What does “Cascading” mean?

We can apply our styles in sequence, selectively overriding previously defined styles, by “cascading&rquo; a new style on top of it.

• set your base styles using linked stylesheets
• cascade override styles using the <style> tag
• avoid inline styles because they break our ability to separate content and presentation

CSS Selectors

• the wildcard, applies to all elements on the page, i.e * {...}
• tag names, applies only to that tag, i.e. h1 {...}
• ids, applies only to the element with that id assigned as an attribute, i.e. #myid {...}
• classes, applies to all elements with that class assigned as an attribute, i.e. .myclass {...}

CSS Rules

CSS rules are the collection of properties and values you are assigning to your CSS Selectors. For example, to apply a font-family to all elements on your page (in essence setting the default font family), try this:

* { font-family:Arial, Helvetica, sans-serif; }

You can find out more about CSS at the Mozilla Developer Network's Getting Starrted With CSS.

Typestyles

Type is the most basic mode of communication in web design – we use words to communicate first. Good design presents our ideas quickly & simply, making it easy for our audience to understand what we're communicating. Typestyles are specific letter forms that have been developed for presenting text on different media (stone, paper, computer screen, etc). A font is a packaged typestyle that includes additional specifications, including sizes, weights, styles (normal, italic, oblique) & spacing information.

Serif & Sans-Serif Fonts

There are two main font families used on the web:

• Serif
• Sans-Serif

Using Type with CSS

There are a number of properties you can use to control typestyles using CSS:

• font-family, i.e * {font-family: Arial, Helvetica, sans-serif;}
• font-size, i.e p {font-size:12px;}
• line-height, i.e h1 {line-height: 2em;}
• font-style, i.e .italics {font-style: italic;}
• font-weight, i.e .bold {font-weight: bold;}
• font-variant, i.e .small_caps {font-variant: small-caps;}

You can also set all of them at once using the font property, i.e. h1 {font:30px Times New Roman, serif;}.

You can find more details on CSS font properties at W3Schools.

Exercise

• Go to JSFiddle
• In the HTML pane, create a few html elements including an <h1>, a <p>, and an anchor tag <a>
• In the CSS pane, create a few CSS selectors (one for each of your HTML elements), and try changing the font-family, font-size and font-style for all of them & each individually.

Assignment 3

Reading

• Chapter 3 and Appendices A & B in Design for Hackers

Design

Create a Type Treatment for Your Pages

After you have completed the reading assignment, revisit your HTML pages and create a type treatment for them.

• Pick a font or two (remember smaller text should probably be san serif for reading on the web, headings could be serif font, but choose carefully according to the guidelines in Appendix A in Design for Hackers
• Create a stylesheet in your Github repository by navigating to your repository, making sure your master branch is selected and then clicking on the + (plus) icon next to your repo name. Give it a name like mystyle.css
• Using the various font properties, create a type treatment for your web pages.