Week 7ART 239 Web Design I

Class Notes for Monday 3/11/19, Wednesday 3/13/19

Agenda

Download the Class Presentation PDF

CSS: Psudeo Classes

:link
Selects all links (example- a:link)
:visited
Selects all previously visited links (example- a:visted)
:hover
Selects all links on mouseover (example- a:hover)
:active
Selects the active link (example- a:active)

It is best practice to cover all of the "states", particularly for links. An easy way to do that is "LOVE HATE" or
L :link
O
V :visited
E
H :hover
A :active
T
E

Doing them in that order in your CSS is ideal - if you do it in the wrong order, unpredictable results will happen!

Web Fonts

In order for fonts to display on your webpage, they need to be available to the computer viewing the webpage. This is problematic when you design a page with fonts that only your computer has access to.

Web Fonts to the Rescue

Web fonts can be loaded into the page either from font files uploaded to the website or available from online services. Since licensing is problematic for web versions of fonts, making use of open source or free-to-use web-licensed fonts from the following services makes more sense.

Multi-columns

The CSS multi-column layout allows easy definition of multiple columns of text—just like in newspapers:

column-count
Specifies the number of columns an element should be divided into (number)
column-gap
Specifies the gap between the columns (number value)
column-rule
A shorthand property for setting all the column-rule-* properties (similar to the border shorthand)
column-span
Specifies how many columns an element should span across (all, none, inherit, initial)

Check out W3schools for more information

Lists

list item <li>
Defines an item in the list. (See code below)
unordered lists <ul>
Defines an unordered list.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

LOOKS LIKE (of course design can be changed with CSS):

  • Coffee
  • Tea
ordered lists <ol>
Defines an ordered list.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
</ol>

LOOKS LIKE (of course design can be changed with CSS):

  1. Coffee
  2. Tea
definition list <dl>
Defines a description list.
definition term <dt>
Defines a term/name in a description list.
definition description <dd>
Defines a description of a term/name in a description list.

<dl>
  <dt>Coffee</dt>
  <dd>A dark hot or cold liquid brewed from beans.</dd>
  <dt>Tea</dt>
  <dd>A hot or cold liquid brewed from leaves.</dd>
</dl>

LOOKS LIKE (of course design can be changed with CSS):

Coffee
        A dark hot or cold liquid brewed from beans.
Tea
        A hot or cold liquid brewed from leaves.

Vertical Rhythm

A way to produce consistency across your design using the design principle of repetition. Read this fantastic blog that breaks this concept down very well: https://zellwk.com/blog/why-vertical-rhythms/