CMCC - Introduzione ad HTML e CSS

Modern Web Basics

Introduzione al CSS

CSS: Cascading Style Sheets

CSS è un linguaggio per descrivere come un file HTML dovrà essere presentato agli utenti
il formato CSS e l'interazione tra CSS e HTML sono definiti dagli standard W3C

Separazione tra Stile e Contenuto

lo scopo dei file CSS è quello di mantenere l'aspetto separato dal contenuto del documento

Separazione tra Stile e Contenuto

il linguaggio in cui sono espressi file CSS è di tipo dichiarativo
i file CSS sono semplici file di testo che raccolgono l'insieme delle regole con cui si applicano determinati stili ad una selezione di elementi

CSS Rule, Selector e Property

Personalizzazioni dello stile permesse dal CSS

caratteri (font e stile)
colori (del testo e dello sfondo)
geometria (dimensione degli elementi, margini e padding...)
e molto altro (stile del bordo, delle liste, delle tabelle, ombre, opacità, animazioni etc.)

CSS Property

le proprietà CSS non vanno confuse con gli attributi dei tag
la proprietà "border" in una regola CSS non corrisponde all'attributo border associato ad un tag nell'HTML

CSS3: passo dopo passo

Esercitazione con editor e live preview

collegare CSS e HTML

attributo style

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 style="color: navy;">Title</h1>
    <h2 style="color: grey;">Subtitle</h2>
  </body>
</html>

collegare CSS e HTML

tag style

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      h1 {
        font-size: 1.2em;
        color: navy;
      }

      h2 {
        font-size: 0.9em;
        color: grey;
      }
    </style>
  </head>
  <body>
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </body>
</html>

collegare CSS e HTML

tag link, file css esterno

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css"
          href="style.css">
  </head>
  <body>
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </body>
</html>

CSS sourcecode

h1 {
    font-size: 1.2em;
    color: navy;
}

h2 {
    font-size: 0.9em;
    color: grey;
}

collegare CSS e HTML

import file css

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      @import url("style.css");
    </style>
  </head>
  <body>
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </body>
</html>

CSS sourcecode

h1 {
    font-size: 1.2em;
    color: navy;
}

h2 {
    font-size: 0.9em;
    color: grey;
}

collegare CSS e HTML

Come decidere in che modo collegare un CSS alla pagina?

l'uso del tag style è la soluzione adatta solo per:

esperimenti rapidi (e "usa e getta")
piccoli ritocchi ("workaround") che riguardano una singola pagina e potrebbero introdurre problemi nelle altre pagine

collegare CSS e HTML

Come decidere in che modo collegare un CSS alla pagina?

l'inclusione di file css esterni alla pagina (attraverso il tag link e la direttiva @import del css):

maggiore flessibilità
facilità di gestione
ridotte dimensioni
migliore utilizzo della banda attraverso i meccanismi di caching

CSS Selectors

Tipi di selettore

lo standard CSS prevede diverse tecniche di selezione
queste tecniche di selezione possono essere combinate tra loro

Selezione per tag name

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <title>Test Selector</title>
    <link href="08_selectors_by_tagname.css"
          rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <h1>title</h1>
    <p>text paragram</p>
  </body>
</html>

CSS sourcecode

p { background: yellow; }
h1 { color: red; }

Gli attributi id e class e le regole CSS

l'assegnazione degli id e delle classi agli elementi di una pagina è fondamentale per l'applicazione programmatica degli stili attraverso i fogli di stile CSS

Selezione per id

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <title>Test Selector</title>
    <link href="08_selectors_by_id.css"
          rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div id="nav">
      <h1 id="brand">Brand</h1>
      <p>paragram</p>
    </div>
  </body>
</html>

CSS sourcecode

div#nav { background: grey; }
#brand { color: white; }

Selezione per classe

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <title>Test Selector</title>
    <link href="08_selectors_by_class.css"
          rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <p class="warning">warning paragram</p>
    <p class="error">error paragram</p>
    <p class="nav-item active">active menu</p>
  </body>
</html>

CSS sourcecode

.warning { background: orange; }
.error {background: red; }
.nav-item.active { color: blue; font-size: 1.2em; }

Selezione multipla

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <title>Test Selector</title>
    <link href="08_selectors_grouping.css"
          rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <h1>Header Level1</h1>
    <h2>Header Level2</h2>
    <h3>Header Level3</h3>
    <hr>
    <h4>Header Level4</h4>
    <h5>Header Level5</h5>
    <h6>Header Level6</h6>
  </body>
</html>

CSS sourcecode

h1, h2, h3 { color: navy; }
h4, h5, h6 { color: grey; }

Selezione nodi discendenti

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
      <title>Test Selector</title>
      <link rel="stylesheet" type="text/css"
            href="08_selectors_descendants.css" />
  </head>
  <body>
    <nav>
      <h1>Site Name</h1>
    </nav>
    <section>
      <article>
        <header>
          <h1>Article Title</h1>
        </header>
        <p>Article Content</p>
      </article>
    </section>
  </body>
</html>

CSS sourcecode

nav h1 { color: navy; }
article h1 { color: grey; }

Selezione nodi figli

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
      <title>Test Selector</title>
      <link rel="stylesheet" type="text/css"
            href="08_selectors_childs.css" />
  </head>
  <body>
    <header>
      <h1>Site Name</h1>
    </header>
    <section>
      <article>
        <header>
          <h1>Article Title</h1>
        </header>
        <p>Article Content</p>
      </article>
    </section>
  </body>
</html>

CSS sourcecode

body > header > h1 { color: navy; }
article > header > h1 { color: grey; }

Selezione di tutti i nodi

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
      <title>Test Selector</title>
      <link rel="stylesheet" type="text/css"
            href="08_selectors_universal.css" />
  </head>
  <body>
    <nav>
      <h1>Site Name</h1>
    </nav>
    <section>
      <article>
        <header>
          <h1>Article Title</h1>
        </header>
        <p>Article Content</p>
      </article>
    </section>
  </body>
</html>

CSS sourcecode

* { color: navy; }

Selezione per adiacenza

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
      <title>Test Selector</title>
      <link rel="stylesheet" type="text/css"
            href="08_selectors_siblings.css" />
  </head>
  <body>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
    <hr>
    <header>
      <h1>Title</h1>
      <h2>Subtitle</h2>
    </header>
    <hr>
    <header>
      <h2>Subtitle</h2>
    </header>
  </body>
</html>

CSS sourcecode

li + li { color: red; }

h1 + h2 { color: lightgrey; }

Selezione per attributo

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
    <head>
      <title>Test Selectors</title>
      <link rel="stylesheet"
            href="08_selectors_by_attr.css" />
    </head>
    <body>
      <ul lang="en">
        <li>
          <a data-urltype="work personal email" href="mailto:luca.greco@alcacoop.it">Mail me</a>
        </li>
        <li>
          <a data-urltype="work website" href="http://alcacoop.it">Web Site</a>
        </li>
      </ul>
    </body>
</html>

CSS sourcecode

ul[lang] { color: white; }
ul[lang=en] { background: lightblue; }

a[data-urltype~=work] { background: lightgrey; }
a[data-urltype~=personal] { color: white; }

Pseudo-selettori

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
    <head>
      <title>Test Selectors</title>
      <link rel="stylesheet"
            href="08_selectors_pseudo.css" />
    </head>
    <body>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </body>
</html>

CSS sourcecode

/* pseudo-class */
li:hover { background: yellow; color: green; }
li:last-child { font-style: italic; }

/* pseudo-element */
li:first-letter { font-size : 2.5em ; }
li:after { content: ";"; }

il Cascading in "CSS"

Il Cascading in CSS

diverse regole CSS possono agire sugli stessi elementi dell'HTML
l'applicazione di una regola CSS può quindi accumularsi agli stili precedentemente applicati ad un determinato noto
oppure ridefinire (sovrascrivere) uno stile precedentemente applicato

Il Cascading in CSS

i selettori mettono a nostra disposizione una grande flessibilità in termini di selezione dei nodi
le varie tipologie di selettore possono essere inoltre combinate tra loro
può diventare difficile identificare quale combinazione di selettori generano determinati cambiamenti negli stili
a questo scopo nei Developer Tools integrati sono presenti alcuni tool di introspezione e debugging del CSS

Firefox DevTools: Inspector Panel

Firefox DevTools: Inspector Panel

Regole CSS

Firefox DevTools: Inspector Panel

Regole CSS

Firefox Inspector DevTool Panel - Singole Regola CSS

Firefox DevTools: Style Editor

Firefox Inspector DevTool Panel - Style Editor

Firefox DevTools: Style Editor

come abbiamo visto il pannello Inspector è dotato di funzionalità di editing live delle regole CSS di una pagina
il pannello Style Editor contente l'editing di regole mettendo a disposizione un più comodo editor di testo

Firefox DevTools: Style Editor

funzionalità specifiche

visualizzare e modificare tutti gli stylesheet già associati alla pagina
creazione di nuovi file di stile
importazione di stylesheet da file

Lo Stile in CSS

text & font

HTML preview

HTML sourcecode

<!DOCTYPE html>

<html>
    <head>
      <link rel="stylesheet" type="text/css"
            href="09_text_font.css" />
    </head>
    <body>
      <h1>Header Level1</h1>
      <h2>Header Level2</h2>
      <h3>Header Level3</h3>
    </body>
</html>

CSS sourcecode

/* text properties */

h1 {
  /* red, #ff0000 */
  color: rgb(255, 0, 0);
  /* normal */
  word-spacing: 15px;
}

h2 {
  /* normal */
  letter-spacing: 15px;
  /* left, right */
  text-align: center;
}

h3 {
  text-indent: -10px;
  text-indent: 15%;
}

text & font

HTML preview

HTML sourcecode

<!DOCTYPE html>

<html>
    <head>
      <link rel="stylesheet" type="text/css"
            href="09_text_font2.css" />
    </head>
    <body>
      <h1>Header Level1</h1>
      <h2>Header Level2</h2>
    </body>
</html>

CSS sourcecode

/* text properties */

h1 {
  /* none, underline, overline */
  text-decoration: line-through;
}

h2 {
  /*  none, lowercase, capitalize */
  text-transform: uppercase;
}

text & font

HTML preview

HTML sourcecode

<!DOCTYPE html>

<html>
    <head>
      <style rel="stylesheet" type="text/css">
        p {
          white-space: pre;
        }
      </style>
    </head>
    <body>
      <p>
    ...The Poem problem...

    My Bonnie lies over the ocean.
    My Bonnie lies over the sea.
    My Bonnie lies over the ocean.

    Oh, bring back my Bonnie to me.
      </p>
    </body>
</html>

text & font

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p.serif {
        font-family: "Times New Roman", Times, serif;
        font-size: 1.2em;
      }
      p.sansserif {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <h1>CSS font-family</h1>
    <p class="serif">paragrafo con font Times New Roman.</p>
    <p class="sansserif">paragrafo con font Arial.</p>
  </body>
</html>

Firefox DevTools: Inspector Panel

Fonts

Box model

Firefox DevTools: Inspector Panel

Box Model

Firefox DevTools: Inspector Panel

Box Model

width/height, margins/padding

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      div.box {
        width: 220px;
        padding: 10px;
        border:5px solid gray;
        margin:0px;
      }

      div.box-sizing {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 220px;
        padding: 10px;
        border:5px solid lightgreen;
        margin:0px;
      }
    </style>
  </head>

  <body>
    <h2>Margin</h2>

    <div class="box">
      box width 220 + padding 10 + border 5 + margin 0:<br />
      la larghezza totale dell'elemento sarà 250px.
    </div>

    <div class="box-sizing">
      box width 220 + padding 10 + border 5 + margin 0:<br />
      la larghezza totale dell'elemento sarà 220px.
    </div>

</body>
</html>

padding

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p.padding {padding-left:2cm;}
      p.padding2 {padding-left:50%;}
    </style>
  </head>

  <body>
    <h2>Padding</h2>
    <p>Testo senza padding</p>
    <p class="padding">Padding in cm</p>
    <p class="padding2">Padding in percentuale</p>
  </body>
</html>

positioning relative

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      h2.pos_left {
        position: relative;
        left: -20px;
      }

      h2.pos_right {
        position:relative;
        left:20px;
      }
</style>
</head>

<body>
<h1>Posizionamento Relativo</h1>
<h2>nessun cambiamento alla positione</h2>
<h2 class="pos_left">posizione spostata a sinistra</h2>
<h2 class="pos_right">posizione spostata a destra</h2>

<p>Il posizionamento relativo sposta un elemento relativamente alla sua posizione originale.</p>
<p>Con "left: -20px" spostiamo l'elemento di 20 pixels a sinistra rispetto alla posizione originale dell'elemento.</p>
</body>

</html>

positioning fixed

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p.pos_fixed {
        position:fixed;
        top:30px;
        right:5px;
      }
    </style>
  </head>
  <body>
    <h1>Fixed positioning</h1>
    <p class="pos_fixed">Some more text</p>

    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>

</body>
</html>

positioning absolute

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p.pos_absolute {
        position: absolute;
        top: 30px;
        right: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Posizionamente Assoluto</h1>
    <p class="pos_absolute">Some more text</p>

    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>
    <p>Some text</p><p>Some text</p>

</body>
</html>

positioning relative + absolute

HTML preview

HTML sourcecode

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      .external {
        position: relative;
        width: 600px;
        height: 400px;
        background-color: blue;
      }

      .internal {
        position: absolute;
        bottom: 0px;
        width: 200px;
        background-color: red;
      }
    </style>
  </head>

  <body>
    <h1>Posizionamento misto relativo + assoluto</h1>

    <div class="external">
      <div class="internal">
  blah blah blah blah blah blah blah blah blah
  blah blah blah blah blah blah blah blah blah
  blah blah blah blah blah blah blah blah blah
  blah blah blah blah blah blah blah blah blah
      </div>
    </div>
</html>

layouting

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html lang="it">
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="09_layouting.css">
    </head>
    <body>
      <div id="page-wrap">
        <header><h1>Header</h1></header>
        <nav>
          <ul>
            <li>
              <a href="#">Home</a>
              <a href="#">Section1</a>
              <a href="#">Section2</a>
                 </li>
          </ul>
        </nav>
        <article id="content">
          <header><h1>Content</h1></header>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, dolor, ratione, id incidunt sed obcaecati dolores assumenda repellat animi in nisi nihil natus deleniti facere soluta aliquid libero possimus praesentium.</p>
          <p>Beatae ratione nulla voluptatem. Atque, nobis, distinctio possimus deserunt esse doloribus quibusdam soluta minima qui culpa aliquam reiciendis libero molestias ipsa ipsum fugiat a odit dignissimos placeat autem. Voluptate, eaque.</p>
          <p>Maiores, esse, reiciendis velit saepe quis harum debitis molestias pariatur soluta quisquam aperiam neque voluptas ducimus voluptatum ad reprehenderit unde assumenda mollitia officia blanditiis optio tenetur itaque alias ab cum.</p>
          <p>Nesciunt, suscipit, eius, molestias libero neque possimus laudantium inventore maiores ab dolorem officiis laborum error maxime esse illo facere in optio omnis dolore odio tempora impedit molestiae repellat pariatur a.</p>
        </article>
        <aside id="page-sidebar">
          <header><h1>Sidebar</h1></header>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, labore, impedit, in nihil expedita praesentium nobis modi quidem suscipit vero quis repellat quo culpa ut eligendi iusto dicta tempora dolor.</p>
          <ul>
            <li>Link1</li>
            <li>Link2</li>
            <li>Link3</li>
            <li>Link4</li>
          </ul>
        </aside>
        <footer><p>&copy; Copyright 2014</p></footer>
      </div>
    </body>
</html>

CSS sourcecode

body {
 margin: 0;
 padding: 0;
 color: #000;
 background: #808080;
}

header > h1 {
  margin: 0 0 1em;
}

#page-wrap {
  max-width: 750px;
  margin: 0 auto;
  background: #b2b2b2;
}

#page-wrap > header {
  padding: 5px 10px;
  text-align: center;
  background: #cccccc;
}

#page-wrap > aside {
  padding: 5px 10px;
  background: #c99;
  float: left;
  width: 230px;
  padding-left: 10px;
  background: #c99;
}

#page-wrap > nav ul {
  margin: 0;
  padding-left: 10px;
  list-style: none;
  word-spacing: 20px;
}

#page-wrap > nav li {
  display: inline;
  margin: 0;
  padding: 0;
}

#page-wrap > article {
  float: left;
  max-width: 480px;
  padding: 10px;
  background: #9c9;
}

#page-wrap > footer {
  clear: both;
  padding: 5px 10px;
  background: #cc9;
}