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

From Publication Station
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
<slidy theme="a">
=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


==css for typography==
==position:static==
* the default position
* dont offset possibilities
* are positioned according to their default behavior


==essential typography properties==
==position: relative==
* font-size:  ''body in pt, rest of elements in em''
* very similar to that of the static value
* font-height: regular or bold
* position is in relation to the containing / parent element
* font-style
* Main difference: relative value accepts box offset properties top, right, bottom left.
* font-family
* Box offset properties allow precise positioning
* color
* text-align
* line-height
* letter-spacing: increases or decreases the space between characters( negative values are allowed)
* text-shadow




==Using fonts==  
==position: absolute==
{| class="wikitable" border="1"
* elements accept box offset properties (left,right, top, bottom)
|-
* elements are removed from the normal flow of the document
! '''system fonts'''
* and positioned in relation to the body element
! '''custom fonts'''
* 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.
|-
| 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
|}


==system fonts==
'''Interesting art work using absolute position and Google books image:
System fonts are generic fonts.
http://www.julienlevesque.net/books-scapes/
* Sans­serif
'''
* Serif
==position: fixed==
* Monospace
* similar to absolute: off-set set in relation to the body
* Cursive
* but the '''positioning is relative to the browser viewport'''
* not scrolling with the page.
* always present, as if fixed to the screen


==system fonts example==
Based on http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
body {
  font-size: 10pt;
}


p {font-family: cursive;
  font-size: 3em;
}


p.other {font-family: sansserif}
==More on position==
* http://blog.fourthbit.com/2013/11/27/essential-css-positioning


span.yetanother {font-family: monospace}
=Display=
    </style>
Example: http://codepen.io/anon/pen/mAAwLJ
  </head>
  <body>
    <p>Cursive generict font</p>
    <p class="other">Testig another generic font.  
      <span class="yetanother">And yet another one</span>
    </p>
  </body>
</html>
</source>


Every element on a web page is a rectangular box.


==custom fonts==
The CSS display property determines how that box is displayed next to its sibling elements - how do they organize themselves
''The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages.'' [https://developer.mozilla.org/en/docs/Web/CSS/@font-face Mozilla @font-face]


==Web fonts formats==
Different font formats exist:
* Web Open Font Format (.woff)
* TrueType/OpenType (.ttf/.otf)
* Scalable Vector Graphics Fonts (.svg)


Currently, most browsers support these font formats, with the exception of .svg, that is only supported by Firefox. See [https://en.wikipedia.org/wiki/Web_typography#File_formats Wikipidia article] on Web fonts.
Possible values for display


== use a custom font ==
* '''inline OR inline-block''': elements are displayed in a line.
To use a custom font, the font file has to be stored somewhere, either '''locally''' (same folder as your site).
** '''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


You can download a sample of display fonts from: http://publicationstation.wdka.hro.nl/displayfonts.zip
* '''none''':  Turns off the display of the element
Containing:Amatic-Bold.ttf, AmaticSC-Regular.ttf, GrandHotel-Regular.otf, Pacifico.ttf


try changing the following example with other custom font
<source lang="html4strict">
<html>
<head>
  <style type="text/css">


    @font-face {
      font-family: "Pacifico";
      src: url("fonts/Pacifico.ttf");
    }
   
    h1 { font-family: "Pacifico", serif;
    font-weight: normal;
    }
  </style>
</head>
<body>
  <h1>This is a custom font.</h1>
</body>
</html>
</source>
==fonts and licenses==
We can use this fonts and even make a commercial (for which we receive money) website, using that font, without paying for the font.


It is not because the font is free (of charge), but because they are '''open'''.
More on display property on:
* http://htmldog.com/guides/css/intermediate/display/
* https://css-tricks.com/almanac/properties/d/display/


They are released under a '''SIL Open Font License''' (OPF).
=centering elements=
 
http://www.w3.org/Style/Examples/007/center.en.html
==SIL license==
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web
 
License:
* allows fonts to be '''used, studied, modified and redistributed freely'''.
* fonts, including any derivative works, can be bundled, embedded,
redistributed and/or '''sold with any software'''.
* fonts and derivatives, however, '''cannot be released under any other type of license'''.
* requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
 
== Apache license==
http://www.fontsquirrel.com/fonts/sinkin-sans
 
==open fonts libraries==
* https://fontlibrary.org
* http://fontsquirrel.com/ 
 
==remote custom fonts==
It is possible to use custom fonts, that are not stored locally, and instead "live" in a service like Google Fonts or Open Font Library.
 
This method is:
* convenient
* easier
but, on the down-side:
* it takes more time to load the page
* the font can be removed at any point by the service 
 
==remote custom font example==
Using the font https://fontlibrary.org/en/font/barrio and following the "Use this font" instructions:
 
<source lang="html4strict">
<html>
<head>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/barrio" type="text/css"/>
 
  <style type="text/css">
   
    h1 {  font-family: 'BarrioRegular';
          font-weight: normal;
          font-style: normal;
    font-size: 3em;
    }
  </style>
</head>
<body>
  <h1>This is a remote custom font.</h1>
</body>
</html>
</source>
 
 
== Assignment ==
* find a text or several that you consider interesting;
* place it on a webpage.
* type-set it with CSS, so that the style either illustrates, contradicts, or is in dialog with the content.
 
'''Rules:'''
* use at least a custom font
* make use of CSS [[Courses/Design_%26_Technique-Essential_Web_Design/04#css_for_typography|essential typography properties]]
* 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. And that you have fun and find out new things while doing it.
 
'''Example:''' http://publicationstation.wdka.hro.nl/go/Alice.html
 
==References==
* [https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/beautiful fonts with @font-face]
* [https://developer.mozilla.org/en/docs/Web/CSS/@font-face Mozilla @fontface]

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

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/04&oldid=7087’