Courses/Design & Technique-Essential Web Design/04

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.

CSS position, display, float

position

IN PROGRESS

CSS property position decides how to position elements.

The most common are

• static - the default
• relative - the position is determined in relation to its neighbors
• absolute - the position is determined in relation to its ancestors elements or html page body, if has no parent elements.
• fixed - like absolute, but often used to create a floating element that stays in the same position even after scrolling the page

See square examples in https://developer.mozilla.org/en-US/docs/Web/CSS/position

Display

@andre: SEE display property explain in http://dustwell.com/div-span-inline-block.html http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block

• none / hidden - turns to none (hides) the display of the element.
• inline - horizontal line of elements, but width and hide will be define by its content.
• block - vertical stack of elements.
• inline-block - horizontal line of elements, but they can have a width and height.

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

centering elements

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

---

Book Scapes: http://www.julienlevesque.net/books-scapes/index2.html (advanced, maybe to when introduce CSS position )

@andre: study and explain CSS position in next class
https://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/
http://learn.shayhowe.com/html-css/positioning-content/