http://a3nm.net/work/teaching/ Technologies du Web: Fabian M. Suchanek With material from a course by Antoine Amarilli CSS
Introduction Styling Text Styling other elements Styling blocks Extreme styling Overview 2
CSS ( Cascading StyleSheets ) serve to define the layout of an HTML page.   •  W3C  standards:        CSS 1 : 1996       CSS 2 : 1998       CSS 2.1 : 2011, 487 pages       CSS 3.0 : In development, varied support • Idea: HTML describes the  content  and the  structure ,   CSS describes the   presentation     =>  We can have  several designs  for the same page,        e.g. for   differents media types  such as screens, print,        phones, screen readers, etc.     =>  We can re-use the same design on  different pages Overview of CSS 3 important unimportant
• CSS uses pairs of  attribute and value ,e.g.       color: red;       font-weight: bold;    • Can be applied  directly  to the HTML elements   with the attribute  style       This will appear in  <em style="color: red;"> red </em>   • If there is no suitable tag, we can use the   neutral  tags    <span>  (inline) and  <div>  (blocks).        Text  <span style="font-weight: bold"> in bold </span>   =>   Problem : mixes style and content; works only on one page CSS & HTML (solution 1) 4
=>   Separation  and  reusability . (But external dependency) • Put the rules in a different  .css  file • Reference the file by the tag  <link>          <!DOCTYPE html>        <html>          <head>            <link rel="stylesheet" type="text/css"  href="style.css">          </head>          <body>           Texte  <em> en rouge </em> .          </body>        </html> CSS & HTML (solution 2) 5
•  Selectors  indicate to which tags the style applies •  Tag   <style>  in the   <head>          <!DOCTYPE html>        <html>          <head>            <style type="text/css">             em { color: red; }            </style>          </head>          <body>           Texte  <em> en rouge </em> .          </body>        </html>   important: there are 3 ways to use CSS CSS & HTML (solution 3) 6
       <!DOCTYPE html>        <html>          <head>            <style type="text/css">             span { color: red; }            </style>          </head>          <body>           Texte  <span> en rouge </span> .          </body>        </html>   <span>  is the neutral element Try it out! 7
span {    color: red;     font-weight: bold;     /* font-size: 150%; */     /* I sometimes think the browser     ignores all my comments :-( */ } • white space does not matter • declarations are separated by semicolons • comments take the form        /* ... */   and are ignored Syntax 8
span#me { color: red; } We can give a style to an individual  occurrence : Elvis: “Le roi, c'est  <span id="me"> moi </span> Elvis: “Le roi, c'est  moi •  #  in the CSS,  id  in the HTML • every tag can have an  id  (not just  <span> ) • An id can only appear once in the body Individuals 9 + =
span.important { color: red; } span.boring { color: gray; } We can also give a style to a  class  of occurrences: C'est pour  <span class="important"> moi </span> , <span class="boring"> toi </span> , et  <span class="boring"> elle </span> C'est pour  moi toi , et  elle •  Point  dans le CSS,  class  dans le HTML • every tag can have a class (not only  <span> ) • A class can be used several times Classes 10 + =
• tags in general       strong {         color: red;       }   • tags of certain classes       p.important {         font-weight: bold;       }   • all tags of a certain class       .person {         text-decoration: underline;       } • One occurrence     span#elvis {       font-size: 150%;     } Examples 11
Introduction Styling Text Styling other elements Styling blocks Extreme styling Overview 12
Colors can be given • by  name blue, green, red, ... • by  rgb values :    rgb(0, 0, 0) : black    rgb(255, 0, 0) : red    rgb(100, 0, 0) : dark red    rgb(255, 0, 255) : purple    rgb(30, 0, 30) : very dark purple    rgb(255, 255, 255) : white • in  hexadecimal  notation:    #FF00FF : purple         strong {         color: red;       } See colors Colors 13 Make Fifty Shades of Grey!  (ok, make 3) important
%   em px     cm Percentage of the  current value Height of the  current font Absolute size in  pixels . 16px=1em      =>  Depends on the  resolution Absolute size in  centimeters      =>  Mainly for  printing . Units of measurement 14
text-align: left / right / center / justify ; text-decoration: underline / overline / line-through ; text-transform: uppercase / lowercase / capitalize ;   line-height: 150% / 1.2em / ... ;   text-shadow:  horizontal   vertical   blur   color  ; •  horizontal : horizontal position of the shadow •  vertical : vertical position of the shadow •  blurr : blur distance (optional) •  color : shadow color (optional) Play it! Try it out! More about text 15
font-style: italic / oblique ; font-variant:small-caps; font-size: 150% / 1.2em / ... ; More convincing example Font Variations 16
• On a computer screen, sans-serif fonts   are supposed to be more readable [W3schools] Font Families 17 important
See them • Users do not alwas have the same  fonts  installed.  • Some fonts are considered  Web safe     • There is a list of predefined  generic font families    serif sans-serif cursive fantasy monospace   • We can specify several fonts, the browser takes   the first that works:       font-family: "DejaVu Sans Mono", monospace;  Using Fonts 18
Ex2 Ex1 • With CSS3, we can  download fonts :         @font-face {         font-family: attentionPolice;         src: url('attentionPolice.woff');       }       body {         font-family: attentionPolice;       }   • Common formats:    •  WOFF  (Web Open Font Format), W3C, 2012.   •  SVG  (to my great sorrow now deprecated)   •  TTF • The  @font-face  declaration can specify font variants such as bold. Including Fonts 19
a:link {color:#FF0000;}      /* unvisited link */ a:visited {color:#00FF00;}  /* visited link */ a:hover {color:#FF00FF;}  /* mouse over link */ a:active {color:#0000FF;}  /* selected link */ Try it out! Styling Links 20
      p:first-line {  /* First line of a paragraph */  }       h2:first-letter { /* First letter of a title */ }              p:before { /* Before a paragraph */ }       p:after { /* After a paragraph */ }         * { /* Universal selector */ } Try it out! Pseudo-classes 21
Introduction Styling Text Styling other elements Styling blocks Extreme styling Overview 22
ul {   list-style-type: circle / square  / disc / ... ;   list-style-image: url('evis.jpg'); }   ol {   list-style-type:       decimal / lower-alpha / lower-roman / ...      hebrew / hiragana / ... ; } Try it out! Lists 23
td {   border-style: solid / dotted ;   border-width: 5px;   border-color: red; }   table {  border-collapse: collapse / separate ; }   caption {   caption-side: top / bottom; } By default, two neighboring cells each have their own border ( separate ) This is ugly. Use  collapse ! Tables 24
td:nthchild(2) { ... }   td:nthchild(even) { ... } td:nthchild(odd) { ... }   td:nthchild( x n +  y ) { ... } The pseudo-class  nthchild(...)  allows to style • a specific child node • every odd/even child node • cycles of nodes This is useful for tables (but not only for tables) Try it out! nthchild 25
<table>   <colgroup>      <col span="2" style="background-color: red">      <col span="3" style="background-color: blue">   </colgroup>   <tr> ... </table> Tables can group columns by  <colgroup>  and  <col> : Try it out! Column groups 26
/* Make the text white */ color: white;   /* Choose a background color */  background-color: black;   /* Picture has preference over color */ background-image: url("background.jpg"); /* Do not scroll the background picture */ background-attachment: fixed;   /* Repeat the background picture (default) */ background-repeat: repeat; see example Background 27
background: linear-gradient(to bottom right,         red,orange,yellow,green,blue,indigo,violet);  • the first value can be  to right ,   to bottom right , etc. • a sequence of colors follows (either by name or by RGB) • transparency can be added by  rgba(r,g,b,t) Try it out! Gradients 28
Introduction Styling Text Styling other elements Styling blocks Extreme styling Overview 29
• There are two types of HTML elements:       blocks <div>, <p>, <h1>, <ul> ...       inline  elements:  <span>, <a>, <img>, <em> ... • We will now talk about  blocks   • Main properties of a block:            display: none; /* removes the element from screen*/         visibility: hidden; /* hides the element         display: inline ; /* displays inline*/ Try it out! Blocks 30
Try it out! Box model 31 Margin Border Padding Content important
margin: 5px / ... ; padding: 3em / ...;   It is possible to set the margins and paddings per side :   margin-left: 5px / 1em / ... ; margin-right: ... .. padding-left:  ...   To  center  an element, use margin: auto; Padding and Margin 32
border-style: dotted / dashed / solid / double /                    groove / ridge / inset / outset ; border-width: 5px / 1em / ... ; border-color: red / ... ; border-left-style: ...; border-right-style: ... ; ... border-left-width:  ... ; ... border-left-color: ... ; ... Borders can also be styled  individually : Example Borders 33 mandatory mandatory
Example Make the border rounded by giving a  radius  to the corners:         border-radius: 10px;       /* Rounded NW, NE, SE, SW */       border-radius: 0px 10px 10px 0px;       /* Elliptic corners */       border-radius: 20px/10px;    Give the border a  shadow         /* Horizontal, vertical, blurr, color */       box-shadow: 5px 5px 1px black;       /* Same with shadow inside */       box-shadow: 5px 5px 1px black inset; >| Fun with Borders 34
•  height  and   width  can be specified for each block   (and also for images, even if, strictly speaking, images are inline)   • The default value is  auto :   The elements are as wide as possibly, and as high as necessary   •  min-width  and  max-width  specify  limits      =>  E.g. to avoid that an element is  too large . Width and Height 35
• If the available space is limited, an element can  overflow • Specify the  overflow :        visible : The content just walks out of the box (default)      hidden : Overflowing content is  invisible      scroll : Adds   scrollbars      auto  Adds scroll bars only  if needed .   •  overflow-x  and  overflow-y  specify the   overflow in both dimensions • Words that are  too long  will still peek out of the space      =>   word-wrap: break-word  forces line-break  within a word . Try it out Overflow 36
A block can be positioned in several ways by  position : •  static : default, the block  flows  with the content   •  fixed : the block is positioned relative to the  window ,   i.e., it does not move when we scroll, and it does   not occupy space inside the document.   •  relative : the block is positioned  relative to its default position .   The block still occupies its normal static space in the document!   •  absolute : similar to  relative , but the block does  not occupy space .   The element is positioned relative to the nearest static ancestor   For  relative absolute , and  fixed , use  top  and  right  to specify the offset. Try it out! Positioning 37
Try it out! • By default, elements are drawn in the order they are given    =>  The last element is on the top • To modify the order, we can specify the  z-index :         z-index: -1; /* Move the element to background*/ Z-Index 38
Floating elements  have the text float around them.          float: left / right ;   To resynchronize, use  clear :         footer {         clear: both;       } Try it out Floating Elements 39
It is possible to have the text flow in  columns :       p {         /* Minimal width of a column,  maximal number of columns*/         columns: 300px 3;         /* Separation between columns */         column-gap: 20px;         /* Line between columns */         column-rule: 1px solid black;       } See it Columns 40
Side remark about the  ugly reality : Not all browsers support all CSS commands.      =>  Wait until they do       =>  Or use browser-specific prefixes:         -webkit-  for Safari and Chrome,         -moz-  for Firefox. >| Meanwhile, in reality... 41
Introduction Styling Text Styling other elements Styling blocks Extreme styling Overview 42
      article {          counter-reset: section subsection;       }       article h2 {         counter-increment: section;         counter-reset: subsection;       }       article h2:before {         content: counter(section) ". ";       }       article h3 {         counter-increment: subsection;       }       article h3:before {         content: counter(section) "." counter(subsection) ". ";       } See it Counters 43
div, p { /* All div and all p /* }   div p { /* All p inside a div */ }   div>p { /* All p that are  direct children  of a div /* }   div+p { /* All p immediately after a div */ }   ::selection { /* whatever is selected by the user */ } Try selection Advanced selectors 44
a[href] {   /* All <a> with href attribute */  }   a[href="xyz"] {   /* All <a> with href attribute with this value */  }   a[href~="xyz"] {   /* All <a> with href attribute that contain this value */  } Try it out! >| Attribute selectors 45
What if we have       p { color: red; }       p { color: blue; } Conflict resolution: Order 46 ?
=>  The last specification overwrites previous ones Conflict resolution: Order 47 ? What if we have       p { color: red; }       p { color: blue; }
What if we have        <style type="text/css">        p { color: red; }      </style>     ...      <body>        <p style="color:blue"> Oh, baby, I am so blue </p>      </body> Conflict resolution: Style 48 ?
=>   style   attribute  prevails Conflict resolution: Style 49 ? What if we have        <style type="text/css">        p { color: red; }      </style>     ...      <body>        <p style="color:blue"> Oh, baby, I am so blue </p>      </body>
What if we have        <style type="text/css">       a                           {    color: black;     }       a[target="_blank"]     {    color: red;       }      </style>        <a target="_blank"> black is beautiful </a> Conflict resolution: Specificity 50 ?
=>  The  more specific  style prevails Conflict resolution: Specificity 51 ? What if we have        <style type="text/css">       a                           {    color: black;     }       a[target="_blank"]     {    color: red;       }      </style>        <a target="_blank"> black is beautiful </a>
What if we have        <style type="text/css">       div   {    color: red;     }      </style>        <div>        <p> Show your true colors! </p>      </div> Conflict resolution: Heritage 52 ?
=>  The style is  inherited  from the parent node Conflict resolution: Heritage 53 ? What if we have        <style type="text/css">       div   {    color: red;     }      </style>        <div>        <p> Show your true colors! </p>      </div>
What if we have         style.css     div   {            color: red !important;          }          index.html      <link rel="stylesheet" href="style.css">      <style type ="text/css">       div { color: black; }      </style> Conflict resolution: Important 54 ?
=>  Important styles always prevail Conflict resolution: Important 55 ? What if we have         style.css     div   {            color: red !important;          }          index.html      <link rel="stylesheet" href="style.css">      <style type ="text/css">       div { color: black; }      </style>
=>  Browsers have  different default behaviors =>  Use a  CSS reset  to unify the behavior  Example >| Conflict resolution !important   prevails. The attribute  style  prevails The most  specific  selector prevails The  last  rule prevails Without a rule,  inheritance  from the parent Otherwise  default  behavior of the browser 56
      /* Comments */       @charset "UTF-8";  /* Only in external style sheets*/       @import url(autre.css);         @media screen {          /* ... specific rules ... */       }          selector  {          property value ;       } External Stylesheets 57
We can use different styles depending on the  medium • In the CSS code by  @media ...            <style type="text/css">              @media handheld  {                  body{ font-size: 0.0001em; }                  /* Let's really annoy these smarta**es :-) */            }          </style>   • By link            <link rel="stylesheet" type="text/css" href="style.css"            media="screen" > Media queries 58
@media all @media aural @media braille @media embossed @media handheld @media print @media projection @media screen @media tty @media tv all media type devices speech and sound synthesizers braille tactile feedback devices paged braille printers small or handheld devices printers projected presentations, like slides computer screens teletypes and terminals television-type devices [w3schools] Try this! Media types 59 @media screen and (max-width: 1024px)
• By default, smartphones render the page in a    viewport  that is larger than the screen      =>  All pages optimized for computer screens         are rendered  correctly      =>  users can  zoom  and scroll.       =>  The text is usually  very small   • Pages for mobiles can force display in real width       <meta name="viewport" content="width=device-width">   • What works well in practice is       @media (max-device-width: 480px) {         body {    font-size: 400%;     }       } Subtleties for smartphones 60
• HTML describes the  structure  of a document,   CSS describes its  presentation  / layout   • CSS can be used by the  style  attribute,   the  <style>  header, or by inclusion with a  <link>   • basic structure:          selector  {             property value  ;         } Summary CSS 61 important