Your SlideShare is downloading. ×
0
CSS	              Jussi	  Pohjolainen	  Tampere	  University	  of	  Applied	  Sciences	  
CSS	  •  CSS	  is	  a	  stylesheet	  language	  used	  to	  describe	     the	  presenta>on	  of	  a	  document	  wri@en	 ...
Some	  History	  •  CSS1	  spec	  finished	  1996,	  it	  took	  three	  years	  before	     browsers	  supported	  CSS1	  ...
CSS	  Versions	  •  CSS1	       –  W3C	  Recommenda>on	  1996	       –  Typography,	  fonts,	  text	  alignment	       –  ...
Rendering	  Engines	  h@p://www.quirksmode.org/css/contents.html	  	  
<blink>	  again!?	  •  April	  3rd,	  2013	  Google	  launches	  Blink,	  a	  fork	  of	     the	  WebKit	  browser	  engi...
Before	  CSS	  •  Presenta>on	  was	  part	  of	  the	  document	     structure:	      <h2 align="center">      <font colo...
Using	  CSS	  •  Structure	  is	  clear:	      <h2>Usage of CSS</h2>•  Presenta>on	  is	  clear:	      h2 {      text-alig...
CSS	  Possibili>es	  •  Colors,	  fonts,	  layout,	  sizes,	  borders..	  •  Possible	  to	  do	  different	  css	  –	  file...
Linking	  CSS	  to	  Web	  Document	  <html> <head>  <title>Page</title>  <link rel="stylesheet"         type="text/css"  ...
Media	  Types	  <html> <head>  <title>Title</title>  <link rel="stylesheet" type="text/css" media="screen"href="screen.css...
Linking	  •  Linking	  to	  external	  CSS	      –  <link	  rel="stylesheet"	  type="text/css"	  href="/       style.css"	...
Internal	  CSS	  •  To	  use	  internal:	          –  <style	  type="text/css"	  media="screen,projec>on">	          –  	 ...
CSS3	  Media	  Queries	  •  Media	  Queries	  is	  CSS3	  extension	     –  <link	  rel="stylesheet"	  type="text/css"	  h...
CSS3	  Media	  Queries	  
<!DOCTYPE html><html>  <head>    <title>       Title    </title>    <meta charset="UTF-8">    <style type="text/css" media...
General	  Syntax	  /* A sample style sheet */@import url(base.css); // at-ruleh2 {                     // rule-set  color:...
CSS	  Rule	  Sets	  •  CSS	  rule	  sets	        –  selector	  declara>on	  •  Example:	        –  h1	  {	  color:	  blue;...
Selectors	  •    Element	  (h1)	  •    Class	  (.important)	  •    Class	  (h1.important)	  •    ID	  (#important)	  •    ...
Element	  •  XHTML:	       <h1>Title</h1>!•  Css:	       h1 {!        color: RGB(255,0,0);!     }!
Class	  •  XHTML:	      <h1 class="tarkea">Otsikko</h1>!    <p>Tässä tekstiä ja tämä <span    class="tarkea">erityisen tär...
Class	  •  Css:	        h1.tarkea {!         color: RGB(255,0,0);!      }!
ID	  •  XHTML:	        <h1 id="paaotsikko">Otsikko</h1>!•  Css:	        #paaotsikko {!         color: RGB(255,0,0);!      }!
Contextual	  •  XHTML:	        <ul>!         <li>Porkkana</li>!      </ul>!•  Css:	        ul li{!         color: RGB(255,...
Pseudo	  •  Example:	       <a href="http://www.tamk.fi/">TAMK</a>!     !     a:link       {   color:   red; }!     a:visi...
Font-­‐family	  •    sans-­‐serif,	  example:	  Helve>ca	  •    serif,	  example:	  Times	  •    cursive,	  example:	  Zap...
font-­‐style,	  font-­‐weight	  •  Font-­‐style	       –  normal	  (default),	  italic,	  oblique	       –  example:	     ...
Lengths	  and	  Units	  •  The	  value	  type	  for	  many	  CSS	  proper>es	  is	     specified	  as	  <length>.	  •  Can	...
font-­‐size	  •  And	  even	  more:	      –  font-size:    x-small;    /*   absolute */    –  font-size:    larger;     /*...
Colors	  color:   red;color:   rgb(255,0,0);color:   #FF0000;color:   #F00;// CSS3rgba(0, 160, 255, 0.2)
Background	  •  Background	  color:	      –  background-­‐color:	  #C0C0C0;	  •  Background	  image:	      –  background-­...
Background	  Image	  Posi>on	  background-position:   right top;    /*   right upper-corner */background-position:   100% ...
Text	  Features	  •  word-­‐spacing	  •  le@er-­‐spacing	  •  text-­‐decora>on	     –  underline	     –  overline	     –  ...
Text	  Features	  •  ver>cal-­‐align	         –  baseline,	  middle,	  sub,	  super,	  text-­‐top,	  text-­‐bo@om,	  top,	...
CASCADE,	  SPECIFICITY	  AND	  INHERITANCE	  
Cascade	  // What now?h1{    background-color: rgb(100,100,100);}h1{    color: rgb(255,0,0);}
Cascade	  // And now?h1{    background-color: rgb(100,100,100);}h1{     background-color: rgb(255,0,0);}
Process	  of	  Resolu>on	  1.  For	  a	  given	  property,	  find	  all	  declara>ons	  that	  apply	  to	  a	      specific...
Inheritance	  •  Pass	  proper>es	  from	  parent	  to	  child	  •  CSSdiv {   font-size: 20px;}•  HTML	  <div>   <p>     ...
LAYOUT	  AND	  FORMATTING	  
XHTML	  Related	  CSS	  Elements	  •  You	  can	  group	  XHTML	  –	  page	  using	  div	  and	     span	  elements	  •  d...
span	  and	  div?	  •  By	  using	  div,	  you	  can	  divide	  xhtml	  –	  page	  in	  to	     logical	  pieces.	  The	  ...
span	  and	  div	  <div class="header">   <h1>Title</h1></div><div class="contents">   <p>Contents: <span   class="highlig...
Layout	  Basics	  •  XHTML	  page	  is	  divided	  into	  “boxes”	  by	  using	     the	  div-­‐element	  •  Box	  consist...
CSS	  Box	  Model	  
CSS	  Box	  Model	  p.leipateksti {    border: 1px solid black;}
CSS	  Box	  Model	  p.leipateksti {    border: 1px solid black;    width: 50%;}	  
CSS	  Box	  Model	  p.leipateksti {    border: 1px solid black;    padding: 20px;}	  
CSS	  Box	  Model	  p.leipateksti {     border: 1px solid black;     margin: 20px;}	  	  
Features	  •  Margins	      –  margin-top    –  margin-bottom    –  margin-left    –  margin-right    –  All	  together:	 ...
Features	  •  Borders	       –    border-top-width     –    border-bottom-width     –    border-right-width     –    borde...
Features	  •  width•  height•  float (none, left, right)
h1 {                        Example	      font-family:        Arial, Helvetica, sans-serif;    color:              RGB(0,0...
Posi>oning	  •  PosiJon	  property	  is	  used	  to	  define	  whether	     box	  is	  absolute,	  rela>ve,	  sta>c	  or	  ...
<!DOCTYPE	  html>	  <html>	                                                   <body><head>	  	  	  <>tle>	                ...
Floa>ng	  •  Problem	  in	  previous	  example	  is	  that	  there	  is	     now	  way	  to	  determine	  when	  absolute	...
HTML	  <nav id="navigation1">   <ul>     <li><a href="this.html">This</a></li>     <li><a href="that.html">That</a></li>  ...
CSS	  #navigation1 {    border: 1px solid black;    float: left;    width: 200px;}#navigation2 {    border: 1px solid blac...
Result	  
Clear	  •  If	  you	  dont	  want	  next	  box	  to	  wrap	  around	  the	     floa>ng	  objects,	  use	  clear	      –  cl...
Result	  
Example:	  Layout	  using	  divs	  <html><head><title>Otsikko</title></head><body>    <!– whole page inside one div -->   ...
Example:	  Layout	  <html><head><title>Otsikko</title></head><body>    <div id="wholepage">        <div id="header">      ...
Example:	  Layout	  #wholepage{    width:              100%;    background-color:   RGB(255,255,255);    color:           ...
Example:	  Layout	  #header{    padding:            10px;    background-color:   RGB(220,220,220);    border-bottom:      ...
Example:	  Layout	  #contents{    margin-left:        200px;    border-left:        1px solid RGB(100,100,100);    padding...
Result	  
SOME	  CSS3	  EXAMPLES	  
<!DOCTYPE html><html><head>  <title>    Title  </title>  <meta charset="UTF-8">  <style type="text/css" media="screen">  #...
A@ribute	  selectors	  •    abbr[title] { border-bottom: 1px dotted #ccc }•    input[type=text] { width: 200px; }•    [thi...
<!DOCTYPE html><html><head>  <title>    Title  </title>  <meta charset="UTF-8">  <style type="text/css" media="screen">  a...
#moldme {   position:absolute;   top:50%;   left:50%;   margin:-150px 0 0 -150px;   width: 300px;   height: 300px;   backg...
Upcoming SlideShare
Loading in...5
×

CSS

1,233

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,233
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "CSS"

  1. 1. CSS   Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  
  2. 2. CSS  •  CSS  is  a  stylesheet  language  used  to  describe   the  presenta>on  of  a  document  wri@en  in   markup  language  •  Usually  used  with  (x)html  •  Defining  fonts,  colors  and  layout  •  Separates  document  content  and   presenta>on  
  3. 3. Some  History  •  CSS1  spec  finished  1996,  it  took  three  years  before   browsers  supported  CSS1  •  2000  IE  5.0  for  Mac  was  the  first  browser  to  fully   support  CSS1  •  =>  CSS  Filtering  •  S>ll  hundreds  of  bugs  in  browsers  
  4. 4. CSS  Versions  •  CSS1   –  W3C  Recommenda>on  1996   –  Typography,  fonts,  text  alignment   –  No  layout  and  design  •  CSS2   –  W3C  Recommenda>on  1998   –  Layout,  style  sheets  could  be  imported,  selectors   –  Revision  to  CSS2  -­‐>  CSS2.1  •  CSS3   –  Several  specifica>ons:  modules   –  Not  ready  yet,  four  modules  are  published  under  recommenda>on:   media  queries,  namespaces,  selectors  level  3,  Color   –  Some  func>onality  already  implemented  in  browsers  
  5. 5. Rendering  Engines  h@p://www.quirksmode.org/css/contents.html    
  6. 6. <blink>  again!?  •  April  3rd,  2013  Google  launches  Blink,  a  fork  of   the  WebKit  browser  engine   –  h@p://www.chromium.org/blink  •  Apple  and  Google  will  have  their  own   implementa>ons  of  WebKit…  •  Mozilla  and  Samsung  collabora>ng  on  new  web   browser  engine   –  h@p://blog.mozilla.org/blog/2013/04/03/mozilla-­‐and-­‐ samsung-­‐collaborate-­‐on-­‐next-­‐genera>on-­‐web-­‐ browser-­‐engine/  
  7. 7. Before  CSS  •  Presenta>on  was  part  of  the  document   structure:   <h2 align="center"> <font color="red" size="+4" face="Times New Roman, serif"> <i>Usage of CSS</i> </font> </h2>•  Many  problems…  
  8. 8. Using  CSS  •  Structure  is  clear:   <h2>Usage of CSS</h2>•  Presenta>on  is  clear:   h2 { text-align: center; color: red; font: italic large "Times New Roman", serif; }
  9. 9. CSS  Possibili>es  •  Colors,  fonts,  layout,  sizes,  borders..  •  Possible  to  do  different  css  –  files  for  prin>ng,   mobile  devices,  desktop  computers.  •  See     –  h@p://www.csszengarden.com/  
  10. 10. Linking  CSS  to  Web  Document  <html> <head> <title>Page</title> <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> </head> <body> <h1>Title</h1> <p>paragraph</p> </body></html>
  11. 11. Media  Types  <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" media="screen"href="screen.css" /> <link rel="stylesheet" type="text/css" media="handheld"href="mobile.css" /> <link rel="stylesheet" type="text/css" media="print"href="print.css" /> </head> <body> <h1>Title</h1> <p>paragraph</p> </body></html>
  12. 12. Linking  •  Linking  to  external  CSS   –  <link  rel="stylesheet"  type="text/css"  href="/ style.css"  media="screen">  •  The  same  using  @import  rule  and  "internal"   style  sheet   –  <style  type="text/css">   –     @import  url(/style.css);   –  </style>  
  13. 13. Internal  CSS  •  To  use  internal:   –  <style  type="text/css"  media="screen,projec>on">   –     ⋮  CSS  rules…   –  </style>  •  And  to  use  inline   –  <ul  style="font-­‐size:120%;  color:#060">   –     ⋮  list  items…   –  </ul>      
  14. 14. CSS3  Media  Queries  •  Media  Queries  is  CSS3  extension   –  <link  rel="stylesheet"  type="text/css"  href="/ style.css"  media="handheld  and  (min-­‐width: 20em)">  
  15. 15. CSS3  Media  Queries  
  16. 16. <!DOCTYPE html><html> <head> <title> Title </title> <meta charset="UTF-8"> <style type="text/css" media="only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)"> body { background-color: RGB(255,0,0); } </style> <script type="text/javascript"></script> </head> <body> The content </body></html>
  17. 17. General  Syntax  /* A sample style sheet */@import url(base.css); // at-ruleh2 { // rule-set color: #666; font-weight: bold;}
  18. 18. CSS  Rule  Sets  •  CSS  rule  sets   –  selector  declara>on  •  Example:   –  h1  {  color:  blue;  }  •  h1  =  selector  •  color:  blue;  =  declara>on  
  19. 19. Selectors  •  Element  (h1)  •  Class  (.important)  •  Class  (h1.important)  •  ID  (#important)  •  Contextual  (h1  p)  •  Pseudo  (a:link)  
  20. 20. Element  •  XHTML:   <h1>Title</h1>!•  Css:   h1 {! color: RGB(255,0,0);! }!
  21. 21. Class  •  XHTML:   <h1 class="tarkea">Otsikko</h1>! <p>Tässä tekstiä ja tämä <span class="tarkea">erityisen tärkeää tekstiä</span></p>! <p class="tarkea">Ja tämä vasta tärkeää onkin</p>!•  Css:   .tarkea {! color: RGB(255,0,0);! }!
  22. 22. Class  •  Css:   h1.tarkea {! color: RGB(255,0,0);! }!
  23. 23. ID  •  XHTML:   <h1 id="paaotsikko">Otsikko</h1>!•  Css:   #paaotsikko {! color: RGB(255,0,0);! }!
  24. 24. Contextual  •  XHTML:   <ul>! <li>Porkkana</li>! </ul>!•  Css:   ul li{! color: RGB(255,0,0);! }!•  This  is  different!  •  h1, p{! color: RGB(255,0,0);! }!
  25. 25. Pseudo  •  Example:   <a href="http://www.tamk.fi/">TAMK</a>! ! a:link { color: red; }! a:visited { color: blue; }! a:active { color: lime; }! a:hover { color: green; }!
  26. 26. Font-­‐family  •  sans-­‐serif,  example:  Helve>ca  •  serif,  example:  Times  •  cursive,  example:  Zapf-­‐Chancery  •  fantasy,  example:  Impact  •  monospace,  example:  Courier  •  Example:   –  font-­‐family:  verdana,  arial,  sans-­‐serif  
  27. 27. font-­‐style,  font-­‐weight  •  Font-­‐style   –  normal  (default),  italic,  oblique   –  example:   •  font-­‐style:  italic;  •  Font-­‐weight:   –  normal,  bold,  bolder,  lighter,  100,  200  ...  900   –  normal  =  400   –  bold  =  700   –  bolder  and  lighter  
  28. 28. Lengths  and  Units  •  The  value  type  for  many  CSS  proper>es  is   specified  as  <length>.  •  Can  be  rela>ve  or  absolute  •  Rela>ve  units   –  em  –  current  font  size  (1  em)   –  ex  –  x  height  of  the  current  font  (heigth  of  char  x)   –  px  –  pixels,  considered  as  rela>ve  since  no  fixed   physical  measure  •  Absolute  units   –  mm,  cm,  in,  pt,  pc  
  29. 29. font-­‐size  •  And  even  more:   –  font-size: x-small; /* absolute */ –  font-size: larger; /* relative */ –  font-size: 12pt; /* unit of length */ –  font-size: 80%; /* percentage */
  30. 30. Colors  color: red;color: rgb(255,0,0);color: #FF0000;color: #F00;// CSS3rgba(0, 160, 255, 0.2)
  31. 31. Background  •  Background  color:   –  background-­‐color:  #C0C0C0;  •  Background  image:   –  background-­‐image:  url("marble.gif");   –  Repeat   •  repeat  (default):  repeat  both  direc>ons   •  repeat-­‐x:  repeat  horizontally   •  repeat-­‐y:  repeat  ver>cally   •  no-­‐repeat:  no  repeat   –  background-­‐a@achment:  fixed  |  scroll   •  Is  the  image  s>ll  or  does  it  move  when  scrolling  
  32. 32. Background  Image  Posi>on  background-position: right top; /* right upper-corner */background-position: 100% 0%; /* right upper-corner */background-position: 100%; /* right upper-corner */background-position: center bottom;/* center bottom */background-position: 50% 100%; /* center bottom */background-position: 100%; /* right top */background-position: 50% 10px; /* center 10 pixels from top */
  33. 33. Text  Features  •  word-­‐spacing  •  le@er-­‐spacing  •  text-­‐decora>on   –  underline   –  overline   –  line-­‐through   –  blink  
  34. 34. Text  Features  •  ver>cal-­‐align   –  baseline,  middle,  sub,  super,  text-­‐top,  text-­‐bo@om,  top,  bo@om,   prosenxluku  •  text-­‐transform   –  capitalize,  uppercase,  lowercase  •  text-­‐align   –  ley,  right,  center,  jus>fy  •  text-­‐indent  •  line-­‐height  
  35. 35. CASCADE,  SPECIFICITY  AND  INHERITANCE  
  36. 36. Cascade  // What now?h1{ background-color: rgb(100,100,100);}h1{ color: rgb(255,0,0);}
  37. 37. Cascade  // And now?h1{ background-color: rgb(100,100,100);}h1{ background-color: rgb(255,0,0);}
  38. 38. Process  of  Resolu>on  1.  For  a  given  property,  find  all  declara>ons  that  apply  to  a   specific  element.  2.  Sort  the  declara>ons  according  to  their  levels  of   importance,  and  origins.   –  !important statement   –  origin?  user-­‐agent  css,  author  css  (link),  user  css  3.  Sort  declara>ons  with  the  same  level  of  importance  and   origin  by  selector  specificity.   –  h@p://reference.sitepoint.com/css/specificity  4.  Finally,  if  declara>ons  have  the  same  level  of  importance,   origin,  and  specificity,  sort  them  by  the  order  in  which   they’re  specified;  the  last  declara>on  wins.    
  39. 39. Inheritance  •  Pass  proper>es  from  parent  to  child  •  CSSdiv { font-size: 20px;}•  HTML  <div> <p> This <em>sentence</em> will have a 20px <a href="#">font-size</a>. </p></div>
  40. 40. LAYOUT  AND  FORMATTING  
  41. 41. XHTML  Related  CSS  Elements  •  You  can  group  XHTML  –  page  using  div  and   span  elements  •  div  and  span  elements  do  not  do  anything,   unless  they  are  connected  to  css  •  xhtml:   –  <p>Text text text <span class="important">text text</span>. Text text text.</p>•  CSS:   –  span.important { color: RGB(255,0,0); }
  42. 42. span  and  div?  •  By  using  div,  you  can  divide  xhtml  –  page  in  to   logical  pieces.  The  posi>on  of  these  are   defined  in  CSS   –  Example:  naviga>on,  header,  footer,  contents  •  Span  is  used  to  give  layout  for  text  
  43. 43. span  and  div  <div class="header"> <h1>Title</h1></div><div class="contents"> <p>Contents: <span class="highlight">this is different</span></p></div><div class="footer"> <p>Copyright 2008</p></div>
  44. 44. Layout  Basics  •  XHTML  page  is  divided  into  “boxes”  by  using   the  div-­‐element  •  Box  consists  of   –  Width   –  Padding   –  Border   –  Marginal  
  45. 45. CSS  Box  Model  
  46. 46. CSS  Box  Model  p.leipateksti { border: 1px solid black;}
  47. 47. CSS  Box  Model  p.leipateksti { border: 1px solid black; width: 50%;}  
  48. 48. CSS  Box  Model  p.leipateksti { border: 1px solid black; padding: 20px;}  
  49. 49. CSS  Box  Model  p.leipateksti { border: 1px solid black; margin: 20px;}    
  50. 50. Features  •  Margins   –  margin-top –  margin-bottom –  margin-left –  margin-right –  All  together:  margin•  Padding   –  padding-­‐top   –  padding-­‐bo@om   –  padding-­‐ley   –  padding-­‐right   –  All  together:  padding
  51. 51. Features  •  Borders   –  border-top-width –  border-bottom-width –  border-right-width –  border-left-width –  border-width –  border-color –  border-style (none, dotted, solid, double, groove, ridge, inset, outset)•  Combina>ons   –  border-top –  border-right –  border-bottom –  border-left•  All  together   –  border
  52. 52. Features  •  width•  height•  float (none, left, right)
  53. 53. h1 { Example   font-family: Arial, Helvetica, sans-serif; color: RGB(0,0,255); background-color: RGB(200,200,200); border: 2px dotted RGB(0,0,0); padding: 10px; text-align: center;}
  54. 54. Posi>oning  •  PosiJon  property  is  used  to  define  whether   box  is  absolute,  rela>ve,  sta>c  or  fixed   –  staJc  –  default  value   –  relaJve  –  box  can  be  offset  (top,  right,  bo@om,   ley)   –  absolute  –  pulls  the  box  out  of  normal  flow,  can   be  placed  anywhere  (top,  right,  bo@om,  ley)   –  fixed  –  like  absolute,  but  when  scrolling  stays  in   the  same  place  
  55. 55. <!DOCTYPE  html>  <html>   <body><head>      <>tle>   <nav id="navigation"> <ul>        Title   <li><a href="this.html">This</a></li>    </>tle>   <li><a href="that.html">That</a></li>   <li><a href="theOther.html">The Other</a></li>    <meta  charset="UTF-­‐8">   </ul>    <style  type="text/css"  media="screen">   </nav>    #navigaJon  {          posiJon:  absolute;   <section id="content">        top:  0;   <h1>Title</h1>        leT:  0;   <p>Text text.</p>        width:  200px;   </section> </body>    }   </html>      #content  {          margin-­‐leT:  200px;      }      </style>      <script  type="text/javascript"></script>    </head>  
  56. 56. Floa>ng  •  Problem  in  previous  example  is  that  there  is   now  way  to  determine  when  absolute  box   ends   –  How  to  put  footer  below  these  boxes?  •  Use  floaJng  box   –  Floa>ng  a  box  will  shiy  it  to  the  right  or  ley  of  a   line,  with  surrounding  content  flowing  around  it.  
  57. 57. HTML  <nav id="navigation1"> <ul> <li><a href="this.html">This</a></li> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> </ul> </nav> <nav id="navigation2"> <ul> <li><a href="this.html">This</a></li> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> </ul> </nav> <section id="content"> <h1>Title</h1> </section> <footer> <p>kk</p> </footer>
  58. 58. CSS  #navigation1 { border: 1px solid black; float: left; width: 200px;}#navigation2 { border: 1px solid black; float: right; width: 200px;}#content { border: 1px solid black; margin: 0 200px;}footer { border: 1px solid black;}
  59. 59. Result  
  60. 60. Clear  •  If  you  dont  want  next  box  to  wrap  around  the   floa>ng  objects,  use  clear   –  clear:  ley   –  clear:  right   –  clear:  both  •  Lets  add   –  footer  {   –         border:  1px  solid  black;   –         clear:  both;   –  }  
  61. 61. Result  
  62. 62. Example:  Layout  using  divs  <html><head><title>Otsikko</title></head><body> <!– whole page inside one div --> <div id="wholepage"> </div> </body></html>
  63. 63. Example:  Layout  <html><head><title>Otsikko</title></head><body> <div id="wholepage"> <div id="header"> <!– Title --> </div> <div id="navigation"> <!– Navigation --> </div> <div id="contents"> <!– Contents --> </div> <div id="footer"> <!– Footer --> </div> </div> </body></html>
  64. 64. Example:  Layout  #wholepage{ width: 100%; background-color: RGB(255,255,255); color: RGB(0,0,0); border: 1px solid RGB(100,100,100);}!!
  65. 65. Example:  Layout  #header{ padding: 10px; background-color: RGB(220,220,220); border-bottom: 1px solid RGB(100,100,100);}#navigation{ float: left; width: 160px; margin: 0; padding: 10px;}!
  66. 66. Example:  Layout  #contents{ margin-left: 200px; border-left: 1px solid RGB(100,100,100); padding: 10px; max-width: 600px;}#footer{ padding: 10px; color: RGB(100,100,100); background-color: RGB(220,220,220); border-top: 1px solid RGB(100,100,100); clear: both;}!
  67. 67. Result  
  68. 68. SOME  CSS3  EXAMPLES  
  69. 69. <!DOCTYPE html><html><head> <title> Title </title> <meta charset="UTF-8"> <style type="text/css" media="screen"> #roundCorners { border: 5px solid #8b2; background: #fc0; padding: 20px; border-radius: 0px 10px 30px 50px; box-shadow: 15px 15px 3px 5px #999; text-shadow: 2px 2px 2px rgba(0,0,0,0.2); } </style> <script type="text/javascript"></script></head><body> <section id="roundCorners"> The content </section></body></html>
  70. 70. A@ribute  selectors  •  abbr[title] { border-bottom: 1px dotted #ccc }•  input[type=text] { width: 200px; }•  [this^=that] will match a the value of an attribute (“this”) that begins with something (“that”)•  [this$=that] will match a the value of an attribute (“this”) that ends with something (“that”)•  [this*=that] will match a the value of an attribute (“this”) that contains with something (“that”), be it in the beginning, middle, or end.
  71. 71. <!DOCTYPE html><html><head> <title> Title </title> <meta charset="UTF-8"> <style type="text/css" media="screen"> a:link { transition: all .5s ease 0; font-size: 1em; color: hsl(36,50%,50%); } a:hover { color: hsl(36,100%,50%); font-size: 2em; } </style> <script type="text/javascript"></script></head><body> <section> <a href="">The content</a> </section></body></html>
  72. 72. #moldme { position:absolute; top:50%; left:50%; margin:-150px 0 0 -150px; width: 300px; height: 300px; background: hsl(36,100%,50%); // only in webkit (transform: is standard) -webkit-transform: rotate(-10deg); -webkit-transform: skew(20deg,10deg); background: linear-gradient(orange, red); }
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×