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.


Prof. Cesare Pautasso
[email protected]

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
    <style type="text/css">
    @import url("style.css")
    <link href="style.css" rel="stylesheet"/>

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: 1.1rem;              //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 can be represented with:

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 transition


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


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^=""] {
   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=""> External Link </a>

Matching Operators

~=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


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


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

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

Selectors Summary

<ul class="talks"></ul>
<div id="nav"></div>
ul li li
<a href="sms://"></a>

How to select the inner li elements?


How to select the intro paragraphs?

<section class="abstract"><p></p><p></p></section>
<section class="intro"><p></p><p></p></section>
<section class="conclusion"><p></p><p></p></section>

Given the #top .navbar a selector, which elements match?

  1. <a class="navbar" id="top">
  2. <div id="top"><nav class="navbar">
    <a href=""></a></nav></div>
  3. <nav id="top"><div class="navbar">
    <a href=""></a></div></nav>

How to select the active paragraph?

<ol class="active">
  <li class="active"></li>
  <li><p class="active"></p></li>


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:checked   { font-weight: bold; }
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


Note: Elements are counted starting from 1



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>

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 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 > *


What happens if two rules apply to the same element?

Internal (head)
Browser default

Rules are prioritized:

  • More specific styles override general styles
  • Page styles replace user-defined styles
  • Use the !important flag to prioritize styles

    If two styles have the same priority, the one defined "last" takes precedence

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: inline
Do not break the flow of text
(like <span>)

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

display: inline-block
Keep the block on the same line

display: none
Hide the element


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

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

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

Flexible Layout

display: flex

Apply the flexbox mode to the content.

flex: n

Grow the content proportionally

min-width: length

Also works with unflexible content

2D/3D Transform

Any page element can be transformed!

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


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
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


Use a spacebar or arrow keys to navigate