css1

Session 4 - Nov 12th

More CSS!

Let's revisit your portal page and have some fun!

Background images

• List item one
• List item two
• List item three

And here is the CSS:

• ul.arrow {
  margin-left:20px;
  margin-bottom:20px;
  }
• ul.arrow li {
  background-image:url(images/arrow.png);
  background-repeat:no-repeat;
  background-position:0 4px;
  padding:10px 0 10px 45px;
  list-style-type:none;
  }

Here is the arrow!

A great resource for the wonderful background image position

---

Typography ... how important is typography? Lets take a look at some websites:

• Responsive site
• Interesting....
• Love the typography
• Centering?
• Color and Font pairing

Time for Font Squirrel!

We will find a font, download it and run it through Font Squirrel's generator which will generate four font files

• .eot
• .ttf
• .woff
• .svg

Along with the font files, we will review the css file, adjust it and copy and paste the css onto our css file!

Fonts, fonts and more fonts!

True Type Fonts is an outline font standard developed by Apple and Microsoft in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript. It has become the most common format for fonts on both the Mac OS and Microsoft Windows operating systems.

The primary strength of TrueType was originally that it offered font developers a high degree of control over precisely how their fonts are displayed, right down to particular pixels, at various font sizes. With widely varying rendering technologies in use today, pixel-level control is no longer certain in a TrueType font.

---

Open Type is a format for scalable computer fonts. It was built on its predecessor TrueType, retaining TrueType's basic structure and adding many intricate data structures for prescribing typographic behavior. OpenType is a registered trademark of Microsoft Corporation.

The specification germinated at Microsoft, with Adobe Systems also contributing by the time of the public announcement in 1996. The specification continues to be developed actively and is migrating to an open format.

Because of wide availability and typographic flexibility, including provisions for handling the diverse behaviors of all the world's writing systems, OpenType fonts are used commonly today on the major computer platforms.

More on Font Face!

---

Creating a web page from scratch...Where do we start?

Think "boxes"

Let's review the above sites - and find the boxes (divs, sections, footers, headers, etc)!