Courses/Design & Technique-Essential Web Design/04

From Publication Station
Jump to navigation Jump to search



CSS selectors allow the selection of html elements to be styled.
Their scope can be very broad, such as all the elements (*), or all the elements that that share a given tag.
To more fine grained selectors, like descendents and id.
To pseudo class selectors, that are triggered by a certain action.


p {font-weight:bold}


*. Star targets all the elements in a page p {font-weight:bold}


#. Id targets the (only 1) element with the given id p#foo {font-weight:bold}.


.. Class targets several elements that share the same class .bar {color: blue}

id vs class



elements that are descendents another element, like the anchors within a list item, and not other anchors li a{color:gree;}.

direct descendents

elements that direct children of another element li > a{color:gree;}.

pseudo classes


  • All links that have been visited a:visited {transform: rotate(0.5turn)};
  • when hoverving a link a:hover{background: red;}

More on Pseudo Classes:

More on CSS selectors in


CSS position property determines where an element will be positioned.



  • the default position
  • dont offset possibilities
  • are positioned according to their default behavior

position: relative

  • very similar to that of the static value
  • position is in relation to the containing / parent element
  • Main difference: relative value accepts box offset properties top, right, bottom left.
  • Box offset properties allow precise positioning

position: absolute

  • elements accept box offset properties (left,right, top, bottom)
  • elements are removed from the normal flow of the document
  • and positioned in relation to the body element
  • off-set property are set in relation to the body and not containing element. E.g. top: 10px; will place the element 10px offset from the top of the browser window.

Interesting art work using absolute position and Google books image:

position: fixed

  • similar to absolute: off-set set in relation to the body
  • but the positioning is relative to the browser viewport
  • not scrolling with the page.
  • always present, as if fixed to the screen

Based on

More on position



Every element on a web page is a rectangular box.

The CSS display property determines how that box is displayed next to its sibling elements - how do they organize themselves

Possible values for display

  • inline OR inline-block: elements are displayed in a line.
    • inline-block: display the element in a line, like inline, but allows more formatting possibilities: width, height, margin to the right and left of the box


  • block: Each element is standalone, occupying the entire width of its parent box and line breaks before and after it. displayBlock.png
  • none: Turns off the display of the element

More on display property on:

centering elements