Courses/Design & Technique-Essential Web Design/04
From Publication Station
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.
