Courses/Design & Technique-Essential Web Design/04

selectors

Example http://codepen.io/anon/pen/YGpPyy

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.

element

p {font-weight:bold}

All(star)

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

id

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

class

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

id vs class

descendents

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

E.g.

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

More on Pseudo Classes: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes

More on CSS selectors in

• https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors
• https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Positioning

CSS position property determines where an element will be positioned.

Example: http://codepen.io/anon/pen/VKKWgY

position:static

• 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: http://www.julienlevesque.net/books-scapes/

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 http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

More on position

• http://blog.fourthbit.com/2013/11/27/essential-css-positioning

Display

Example: http://codepen.io/anon/pen/mAAwLJ

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

http://htmldog.com/figures/displayInline.png

• block: Each element is standalone, occupying the entire width of its parent box and line breaks before and after it. http://htmldog.com/figures/displayBlock.png

• none: Turns off the display of the element

More on display property on:

• http://htmldog.com/guides/css/intermediate/display/
• https://css-tricks.com/almanac/properties/d/display/

centering elements

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