Black & White Series

Separation Content-Style

CSS - Cascading Style Sheet

CSS

Cascading Style Sheets

  • Styling language
  • First release by W3C in 1996
  • Describes presentation of HTML and XML documents

Last Styling Example

<html>
  <body>
    <h1 style="font-family:Arial">Dinosaur Story</h1>
    <p style="color:blue">
      The <b style="color:green">dinosaur jumped</b> into the mud.
    </p>
  </body>
</html>

Separation Content-Style

Separation Content-Style

HTML & CSS

Separation Content-Style

style element - head

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        font-family: Arial;
      }
      p {
        color: blue;
      }
      b {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>Dinosaur Story</h1>
    <p>The <b>dinosaur jumped</b> into the mud.</p>
  </body>
</html>

Styling Elements

Three strategies based on:

  • element tags
  • classes
  • unique identifiers

Styling Elements by Tag

  • Styles all elements with the same tag
<style>
  h1 {
    font-family: Arial;
  }
  p {
    color: blue;
  }
</style>
...
<p>Author: Asdrubal</p>
<h1>Dinosaur Story</h1>
<p>The dinosaur jumped into the mud.</p>

Styling Elements by Tag

Separation Content-Style

Styling Elements by Class

  • Styles all elements with the same class
    • a class is prefixed by a dot
<style>
  .story {
    color: blue;
  }
</style>
...
<p>Author: Asdrubal</p>
<h1 class="story">Dinosaur Story</h1>
<p class="story">The dinosaur jumped into the mud.</p>

Styling Elements by Class

Separation Content-Style

Styling Elements by Id

  • Styles an element identified by an id
    • the id attribute value is unique
<style>
  #author {
    color: blue;
  }
</style>
...
<p id="author">Author: Asdrubal</p>
<h1>Dinosaur Story</h1>
<p>The dinosaur jumped into the mud.</p>

Styling Elements by Id

Separation Content-Style

External CSS File

Separation Content-Style

Central CSS for Pages

Separation Content-Style

Videos / Tutorials

W3Schools HTML Tutorial

https://www.w3schools.com/html/

Web and Semantic Web 2015 Playlist

https://youtube.com/playlist?list=PL3JRjVnXiTBZpnuD7ZtJ3fdNsCcR5Oy7B

André Santanchè

www.ic.unicamp.br/~santanch/

Web2Learn

santanche.github.io/web2learn/