SlideShare a Scribd company logo

CSS

•
•
Jussi Pohjolainen
Jussi Pohjolainen

CSS is a stylesheet language used to describe the presentation of documents written in markup languages like HTML. It is used to define fonts, colors, layout, and other visual aspects of web pages independent of its content. Some key points about CSS include that it has evolved through several versions to support increased functionality, different browsers have varying support for CSS rules, and it allows separation of document structure/content from presentation.

Related slideshows

Cascading style sheet part 2
Cascading style sheet part 2Cascading style sheet part 2
Cascading style sheet part 2
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
2 introduction css
2 introduction css2 introduction css
2 introduction css
 
1 of 72
Download to read offline
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  in   markup  language   •  Usually  used  with  (x)html   •  Defining  fonts,  colors  and  layout   •  Separates  document  content  and   presenta>on  
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  
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  
Rendering  Engines   h@p://www.quirksmode.org/css/contents.html    
<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/  
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…  
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; }
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/  
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>
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>
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>  
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>      
CSS3  Media  Queries   •  Media  Queries  is  CSS3  extension   –  <link  rel="stylesheet"  type="text/css"  href="/ style.css"  media="handheld  and  (min-­‐width: 20em)">  
CSS3  Media  Queries  
<!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>
General  Syntax   /* A sample style sheet */ @import url(base.css); // at-rule h2 { // rule-set color: #666; font-weight: bold; }
CSS  Rule  Sets   •  CSS  rule  sets   –  selector  declara>on   •  Example:   –  h1  {  color:  blue;  }   •  h1  =  selector   •  color:  blue;  =  declara>on  
Selectors   •  Element  (h1)   •  Class  (.important)   •  Class  (h1.important)   •  ID  (#important)   •  Contextual  (h1  p)   •  Pseudo  (a:link)  
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ärkeää tekstiä</span></p>! <p class="tarkea">Ja tämä vasta tärkeää onkin</p>! •  Css:   .tarkea {! color: RGB(255,0,0);! }!
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,0,0);! }! •  This  is  different!   •  h1, p{! color: RGB(255,0,0);! }!
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; }!
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  
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  
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  
font-­‐size   •  And  even  more:   –  font-size: x-small; /* absolute */ –  font-size: larger; /* relative */ –  font-size: 12pt; /* unit of length */ –  font-size: 80%; /* percentage */
Colors   color: red; color: rgb(255,0,0); color: #FF0000; color: #F00; // CSS3 rgba(0, 160, 255, 0.2)
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  
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 */
Text  Features   •  word-­‐spacing   •  le@er-­‐spacing   •  text-­‐decora>on   –  underline   –  overline   –  line-­‐through   –  blink  
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  
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  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.    
Inheritance   •  Pass  proper>es  from  parent  to  child   •  CSS div { font-size: 20px; } •  HTML   <div> <p> This <em>sentence</em> will have a 20px <a href="#">font-size</a>. </p> </div>
LAYOUT  AND  FORMATTING  
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); }
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  
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>
Layout  Basics   •  XHTML  page  is  divided  into  “boxes”  by  using   the  div-­‐element   •  Box  consists  of   –  Width   –  Padding   –  Border   –  Marginal  
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:  margin •  Padding   –  padding-­‐top   –  padding-­‐bo@om   –  padding-­‐ley   –  padding-­‐right   –  All  together:  padding
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
Features   •  width •  height •  float (none, left, right)
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; }
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  
<!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>  
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.  
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>
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; }
Result  
Clear   •  If  you  don't  want  next  box  to  wrap  around  the   floa>ng  objects,  use  clear   –  clear:  ley   –  clear:  right   –  clear:  both   •  Let's  add   –  footer  {   –         border:  1px  solid  black;   –         clear:  both;   –  }  
Result  
Example:  Layout  using  divs   <html> <head><title>Otsikko</title></head> <body> <!– whole page inside one div --> <div id="wholepage"> </div> </body> </html>
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>
Example:  Layout   #wholepage { width: 100%; background-color: RGB(255,255,255); color: RGB(0,0,0); border: 1px solid RGB(100,100,100); } ! !
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; } !
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; } !
Result  
SOME  CSS3  EXAMPLES  
<!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>
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.
<!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>
#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); }

More Related Content

CSS

  • 1. CSS   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
  • 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. 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. 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  
  • 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. 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. 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. 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. 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. 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. 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. 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. CSS3  Media  Queries   •  Media  Queries  is  CSS3  extension   –  <link  rel="stylesheet"  type="text/css"  href="/ style.css"  media="handheld  and  (min-­‐width: 20em)">  
  • 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. General  Syntax   /* A sample style sheet */ @import url(base.css); // at-rule h2 { // rule-set color: #666; font-weight: bold; }
  • 18. CSS  Rule  Sets   •  CSS  rule  sets   –  selector  declara>on   •  Example:   –  h1  {  color:  blue;  }   •  h1  =  selector   •  color:  blue;  =  declara>on  
  • 19. Selectors   •  Element  (h1)   •  Class  (.important)   •  Class  (h1.important)   •  ID  (#important)   •  Contextual  (h1  p)   •  Pseudo  (a:link)  
  • 20. Element   •  XHTML:   <h1>Title</h1>! •  Css:   h1 {! color: RGB(255,0,0);! }!
  • 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. Class   •  Css:   h1.tarkea {! color: RGB(255,0,0);! }!
  • 23. ID   •  XHTML:   <h1 id="paaotsikko">Otsikko</h1>! •  Css:   #paaotsikko {! color: RGB(255,0,0);! }!
  • 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. 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. 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. 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. 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. 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. Colors   color: red; color: rgb(255,0,0); color: #FF0000; color: #F00; // CSS3 rgba(0, 160, 255, 0.2)
  • 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. 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. Text  Features   •  word-­‐spacing   •  le@er-­‐spacing   •  text-­‐decora>on   –  underline   –  overline   –  line-­‐through   –  blink  
  • 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. CASCADE,  SPECIFICITY  AND   INHERITANCE  
  • 36. Cascade   // What now? h1 { background-color: rgb(100,100,100); } h1 { color: rgb(255,0,0); }
  • 37. Cascade   // And now? h1 { background-color: rgb(100,100,100); } h1 { background-color: rgb(255,0,0); }
  • 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. Inheritance   •  Pass  proper>es  from  parent  to  child   •  CSS div { font-size: 20px; } •  HTML   <div> <p> This <em>sentence</em> will have a 20px <a href="#">font-size</a>. </p> </div>
  • 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. 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. 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. Layout  Basics   •  XHTML  page  is  divided  into  “boxes”  by  using   the  div-­‐element   •  Box  consists  of   –  Width   –  Padding   –  Border   –  Marginal  
  • 46. CSS  Box  Model   p.leipateksti { border: 1px solid black; }
  • 47. CSS  Box  Model   p.leipateksti { border: 1px solid black; width: 50%; }  
  • 48. CSS  Box  Model   p.leipateksti { border: 1px solid black; padding: 20px; }  
  • 49. CSS  Box  Model   p.leipateksti { border: 1px solid black; margin: 20px; }    
  • 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. 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. Features   •  width •  height •  float (none, left, right)
  • 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. 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. <!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. 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. 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. 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; }
  • 60. Clear   •  If  you  don't  want  next  box  to  wrap  around  the   floa>ng  objects,  use  clear   –  clear:  ley   –  clear:  right   –  clear:  both   •  Let's  add   –  footer  {   –         border:  1px  solid  black;   –         clear:  both;   –  }  
  • 62. Example:  Layout  using  divs   <html> <head><title>Otsikko</title></head> <body> <!– whole page inside one div --> <div id="wholepage"> </div> </body> </html>
  • 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. Example:  Layout   #wholepage { width: 100%; background-color: RGB(255,255,255); color: RGB(0,0,0); border: 1px solid RGB(100,100,100); } ! !
  • 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. 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; } !
  • 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. 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. <!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. #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); }