CSS: Esempio generale

Esempio di base per dimostrare il funzionamento dei fogli di stile

by Michele Pisani

HTML

<h1>Titolo</h1>
    <h2>Sottotitolo</h2>
    <div id="container">
      <p>Testo di riempimento per illustrare alcune caratteristiche del <span><u>CSS</u></span>.</p>
      <p style="background-color:#00FFFF;">Interessanti sono anche le liste:</p>
      <ul>
        <li>Primo elemento</li>
        <li>Secondo elemento</li>
        <li>Terzo elemento</li>
      </ul>
      <div>E la differenza tra elementi di blocco quali appunto i div, le liste, i paragrafi, i tag h1, h2, ...</div>
      <div>...ed elementi in linea come gli <span class="custom">span, <u>i tag per <i style="background-color:#FFFF00;">italico</i> e <b>grassetto</b></u></span>, come anche i <a href="javascript:void(0);">link</a>, gli input, ecc...</div>
    </div>

CSS

h1,h2 {font-family:Arial;}  
      #container {border:solid 1px #888;padding:10px;}
      span {color:#AA0000;font-weight:bold;}
      span.custom {color:#000;font-weight:normal;}
      span > u {text-decoration:none;}
      span > u > i {text-decoration:underline;}
  
      @media screen and (max-width:319px) {
        span {color:#00AA00;}
      }