Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.


CSS3

Prof. Cesare Pautasso
http://www.pautasso.info
cesare.pautasso@usi.ch
@pautasso

Applying CSS

How to apply a stylesheet to a document?
  1. Straight into the HTML tags
    <p style="color: red">text</p>

    HTML should be presentation-free, so in-line styles should be avoided as much as possible

  2. With internal, embedded styles
    <head><style>p {color:red}</style></head>

    Embedded styles should be used only with special pages that should look different than the others

  3. With external, referenced styles, stored in separate CSS files
    <head>
    <style type="text/css">
    @import url("style.css")
    </style>
    <link href="style.css" rel="stylesheet"/>
    </head>

CSS Rules

CSS is a declarative language. It uses rules to specify how parts of a document should be formatted

selector { property: value }

Each CSS rule has:

CSS Rule Example

body {
   font-size: 0.8em; 
   color: navy;
}

Apply this rule to the body element.
Set the font-size to 0.8em and the text color to navy.

Property Value Types

Property values have different data types (String, Size, Enumeration, Color, URL)

h1 {
     font-family: "Arial";            //String
       font-size: 0.8em;              //Size
      font-style: italic;             //Enum
           color: navy;               //Color
background-color: #001122;            //Color
background-image: url("/img/h1.png"); //URLs
     text-shadow: #000 2px -2px 1px;     
}
   

Colors

Colors can be represented with:

http://rightjs.org/ui/colorpicker/demo

Lenghts and Sizes

Lenghts can be expressed in several units of measures

A Web page should be flexible, so use pixel sizes sparingly

Main Properties

background (-color, -image, -position) border (-width, -style, -color) x (-top, -right, -bottom, -left) border-radius font (-family, -size, -weight) text (color, direction, letter-spacing, text-align, text-decoration, text-transform, word-spacing, shadow) tables (border-collapse, caption-side, empty-cells) list (-style, -style-image, -style-type) margin (-top, -right, -bottom, -left) padding (-top, -right, -bottom, -left) layout (display, clear, float, position, visibility, cursor) positioning (left, right, bottom, top, clip, overflow, vertical-align, z-index) dimension (height, width, max-height, max-width, min-height, min-width) transform

http://www.w3schools.com/cssref/

Selectors

Control which document elements are affected by a rule. Selectors refer to:

Tagsh1
Classes.navigation
IDs#home
Wildcards*
Pseudo-classes:hover

Selectors can be combined, grouped, and nested to make them more selective

Universal Selector

* {
  color: #000;
  margin: 0;
  padding: 0;
}

Tag Selector

body {
  color: #000;
  background: #fff; 
  font-family: verdana, arial, sans-serif;
  font-weight: normal;
}

Class Selector

.navigation {
   text-decoration: underline;
}

ID Selector

#home {
  margin-top: 2p;
  border-bottom: 1px #abc solid;		
}

Attribute Selector

a[href^="http:"] {
   background: url("external.png") no-repeat right top;
   padding-right: 10px;
   border-bottom: 2px solid;		
}
a[href^="http://www.mysite.com"] {
   background-image: none;
   padding-right: 0;
   border-bottom: 1px dotted;		
}

The rule applies only to the document element with the matching attribute value

<a href="http://www.google.com"> External Link </a>

Matching Operators

=equals
~=contains word
^=starts with
$=ends with
*=contains substring

Nested Selectors

Selectors separated by ' ' (space) target nested element tags (at any level)

ul li

defines a rule for any element <li> within any <ul>

#top a

defines a rule for any element <a> within the element with id="top"

#top .navbar a

defines a rule for any element <a> within some element of class="navbar" contained within the element having id="top"

Combined Selectors

Selectors can be concatenated to further qualify the target element

ul.publications

defines a rule for any element <ul> of class="publications"

div#top

defines a rule to match the element <div id="top"/>

a.navbar#top
defines a rule for the element <a> of class="navbar" with id="top"

Selectors Summary

SelectorCSSHTML
ID
#myid
id="myid"
Tag
table
<table></table>
Class
.talks
class="talks"
Tag+Class
ul.talks
<ul class="talks"></ul>
Tag+ID
div#nav
<div id="nav"></div>
Nested
ul li li
<ul><li><li>x</li></li></ul>
Attribute
a[href=]
<a href="sms://"></a>

Pseudo-Classes

Pseudo-classes are used to apply rules based on the dynamic state of the selected elements

a         { text-decoration: underline; }
a:link    { color: blue; } 
a:visited { color: purple; }
a:hover   { text-decoration: none; }
a:active  { color: red; }

Change the appearance of a link element

input:focus   { background-color: yellow; }
input:invalid { background- color: red;  }

Change the appearance of an input element

CSS3 Pseudo-Classes

Structural pseudo-classes can filter the selected elements based on their position on the document tree

:nth-child(an+b)
:nth-last-child(an+b)

Note: Elements are counted starting from 1

:first-child
:last-child
:only-child
:empty
:root
:nth-child(2n+1)
:nth-child(odd)

:nth-child(2n)
:nth-child(even)

Useful shorthands

Target Selector

Apply a rule only to the document element with the id attribute matching the URL fragment of the page

:target { background-color: red }
<p id="first">No Match</p>
<p id="second">Match</p>
http://www.pautasso.info/index.html#second

Negative Selector

Apply a rule to all elements which do not match a selector

.red {
	background-color: #F00;
}
:not(.red) {
	background-color: #000;		
}
<p class="red">Match</p>
<p class="black">Not Match</p>
<p class="white">Not Match</p>

Selector Specificity

Rules with more specific selectors override rules with more generic ones

<h1>
<h1 class=“summary”>
<h1 class=“summary” id=“intro”>
<h1 class=“summary” id=“intro” style=“color:navy”>
h1 { color: green}
h1.summary { color: orange }
h1.summary#intro { color: red }

Priority: Inline Styles > ID > Class > Tag > *

Conflicts

What happens if two rules apply to the same element?

User-defined
Inline
Internal (head)
External
Browser default

Rules are prioritized:

Page Layout with CSS

Much better than using nested table elements (originally the only way, but no more!)

  1. Control the size and positioning of each page element:
    • margin
    • padding
    • border
  2. Specify the layout properties of each page element:
    • display
    • position
    • float
    • width, height
    • top, left, bottom, right

CSS Box Model

Display

display: inline
Do not break the flow of text
(like <span>)

display: block
Line break before and after the element (like <div>)

display: none
Hide the element

Position

position: static
Automatic Layout (default, ignore left, top, right, bottom)

position: relative
Offset the position with respect to the automatic one

position: absolute
Position with respect to the first non-static parent box. The element is pulled out of the normal layout flow.

position: fixed
Position with respect to the window (instead of the page)

Floating Boxes

right
left
float: left | right | none

Shift a box to the right/left of the container box.

If there is not enough space, boxes can wrap around

clear: left | right | both
right
left
clear

Force the following boxes to continue under the previous highest floated box (like \clearpage in LaTeX)

2D/3D Transform

Any page element can be transformed!

#box { [-webkit-|-o-|-moz-]transform: 
   rotate(N deg)
   scale(x,y)
   skewX(N deg)
   translate(X px, Y px);		
}

Transition

Declaratively smooth the transition between changes in the formatting of any page element (no need of JavaScript for animations)

#box { 
  transition-property: background-color, width;
  transition-delay: 1s;
}

Media-specific styles

@media print { 
  #navigation {   display: none;   }
  body { font-size: 10pt; font-family: times; }
}
allevery media (default)
auralspeech synthesizers
braille⠃⠗⠁⠊⠇⠇⠑ ⠗⠑⠁⠙⠑⠗
handheldsmall screen devices
printpaper
projectionbeamers
screencomputer screens

Media Queries

Expressions can use logical and, or, not operators

@media (expression) { 
  /* CSS */
}
<link rel="stylesheet" media="(expr)" href="m.css" />
color0 for b/w devices
orientationlandscape | portrait
min/max-widthwidth of the browser window
min/max-heightheight of the browser window
resolution2dppx retina display

Tools

References

Use a spacebar or arrow keys to navigate