• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS
 

CSS

on

  • 950 views

 

Statistics

Views

Total Views
950
Views on SlideShare
950
Embed Views
0

Actions

Likes
2
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS CSS Presentation Transcript

    • 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-ruleh2 { // 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;// CSS3rgba(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  •  CSSdiv { 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  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;   –  }  
    • 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); }