Difference between revisions of "Courses/Design & Technique-Essential Web Design/04"

From Publication Station
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
styling links, positioning elements, typography
=selectors=
Example http://codepen.io/anon/pen/YGpPyy


==styling links==
CSS selectors allow the selection of html elements to be styled.<br/>
css uses a pseudo-class for the different states of a link
Their scope can be very broad, such as all the elements (*), or all the elements that that share a given tag.<br/>
To more fine grained selectors, like descendents and id.<br/>
To pseudo class selectors, that are triggered by a certain action.<br/>


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.
==element==
<code>p {font-weight:bold}</code>
==All(star)==
<code>*</code>. Star targets all the elements in a page <code>p {font-weight:bold}</code>
==id==
<code>#</code>. Id targets the (only 1) element with the given id <code>p#foo {font-weight:bold}</code>.
==class==
<code>.</code>. Class targets several elements that share the same class <code>.bar {color: blue} </code>


==position==
'''important'''


(leaving for next class)
==id vs class==
CSS property position chooses alternative forms to for position elements.
[[File:Class-id.png]]


The most common are
==descendents==
* relative
elements that are descendents another element, like the anchors within a list item, and not other anchors  <code>li a{color:gree;}</code>.
* absolute
==direct descendents==
* fixed
elements that '''direct children''' of another element
<code>li > a{color:gree;}</code>.
==pseudo classes==
E.g.
* All links that have been visited <code>a:visited {transform: rotate(0.5turn)}</code>;
* when hoverving a link  <code>a:hover{background: red;}</code>


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


==centering elements==
More on CSS selectors in
http://www.w3.org/Style/Examples/007/center.en.html
* 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. <code>top: 10px;</code> 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


==css for typography==


==essential typography properties==
Possible values for display
* 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


* '''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


==Using fonts==
* '''none''':  Turns off the display of the element
{| class="wikitable" border="1"
|-
! '''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==
More on display property on:
* http://htmldog.com/guides/css/intermediate/display/
* https://css-tricks.com/almanac/properties/d/display/


== Exercise ==
=centering elements=
* find a text or several that you consider interesting;
http://www.w3.org/Style/Examples/007/center.en.html
* 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.

Latest revision as of 08:38, 26 September 2018

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

Class-id.png

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

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

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

  • none: Turns off the display of the element


More on display property on:

centering elements

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