Courses/Design & Technique-Essential Web Design/04

From Publication Station
Revision as of 12:30, 22 September 2015 by Andre (talk | contribs) (Created page with "styling links, positioning elements, typography ==styling links== css uses a pseudo-class for the different states of a link a:visited - a link the user has visited a:hover...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

styling links, positioning elements, typography

styling links

css uses a pseudo-class for the different states of a link

a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked

For each of them, normally a rule is written.

position

(leaving for next class) CSS property position chooses alternative forms to for position elements.

The most common are

  • relative
  • absolute
  • fixed

https://developer.mozilla.org/en-US/docs/Web/CSS/position


centering elements

http://www.w3.org/Style/Examples/007/center.en.html


css for typography

essential typography properties

  • font-size: body in pt, rest of elements in em
  • font-height: regular or bold
  • font-style
  • font-family
  • color
  • text-align
  • line-height
  • letter-spacing: increases or decreases the space between characters( negative values are allowed)
  • text-shadow


Using fonts

system fonts custom fonts
ready to use need to load or upload
limited set broad range
change slightly in each user's computer remain the same to all users
too familiar fresh

custom fonts

fonts and licenses

resources for online fonts

Exercise

  • find a text or several that you consider interesting;
  • place it on a webpage.
  • type-set it, so that the style either illustrates the content or contradicts it.
  • be bold, be extreme: you can go from a legible and soothing style, to total illegible and cryptic. Most important is that the style responds to the text content.