Black & White Series

Page Styles

style Attribute

  • Defines the presentation styles of an element

  • Examples of styles:

    • color
    • letter font
    • letter size
    • background color

Example

<h1>Dinosaur Story</h1>
<p>
  The <b>dinosaur jumped</b> into the mud.
</p>

Page without styles

Example

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

Page with styles

Style Scope

The style reaches the element scope

Styles Scope

Style Scope Hierarchy

Inner scopes replace outer ones

<p style="color:blue">
  The <b style="color:green">dinosaur jumped</b> into the mud.
</p>

Inner and Outer Scopes

Style Scope Hierarchy

Inner and Outer Scopes Tree

Multiple Items in a Style

<p style="color:blue;font-size:16pt">
  The <b style="color:green">dinosaur jumped</b> into the mud.
</p>

Multiple Styles

Color/Font Scopes

Color Scope

Color/Font Scopes

Color Scope

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/