ICCT Wiki

User Tools

Site Tools

Trace: • lecture16
eg-146:lecture16

This is an old revision of the document!

Table of Contents

~~SLIDESHOW~~

Styling and Positioning with Stylesheets

Contact Hour 16: To be discussed on Tuesday 20th March, 2012.

Lecturer: Dr Chris P. Jobling.

The contents of these notes and all the examples are from Chapters 10 and 11 of Castro and Hyslop, HTML5 and CSS3: Visual Quickstart Guide, 7th Ed., PeachPit Press, 2012.

These notes are incomplete and you are invited to contribute to them by getting an account on this wiki.

Styling and Positioning with Stylesheets

Formatting Text with Styles

Example 1

This is the example we will use.

The complete set of examples is here http://www.bruceontheloose.com/htmlcss/examples/#chapter-10. In the session, we will use a single stylesheet and use the browser's development tools to see how it evolves towards the final state.

Here is the HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Antoni Gaudí - Introduction</title>
  <link rel="stylesheet" href="common/css/text-decoration.css" /> 
</head>
<body>
 
<header role="banner">
  <nav>
    <ul class="toc">
      <li><a href="#gaudi">Barcelona's Architect</a></li>
      <li><a href="#sagrada-familia">La Sagrada Família</a></li>
      <li><a href="#park-guell">Park Guell</a></li>
    </ul>
  </nav>
</header>
 
<article class="architect"> 
  <h1 id="gaudi">Barcelona's Architect</h1> 
 
  <p>Antoni Gaudí's incredible buildings bring millions of tourists to Barcelona each year.</p>
 
  <p>Gaudí's non-conformity, already visible in his teenage years, coupled with his quiet but firm devotion to the church, made a unique foundation for his thoughts and ideas. His search for simplicity, based on his careful observations of nature are quite apparent in his work, from the <a href="#park-guell">Park Guell</a> and its incredible sculptures and mosaics, to the Church of the <a href="#sagrada-familia">Sacred Family</a> and its organic, bulbous towers.</p> 
 
  <section class="project">
    <h2 id="sagrada-familia">La Sagrada Família</h2>
 
    <!-- You could mark these images in an unordered list, too -->
    <img src="img/redbubbles.jpg" width="75" height="99" alt="Red bubbles" />
    <img src="img/tilepieces.jpg" width="100" height="75" alt="Tile Pieces" />
    <img src="img/dove.jpg" width="75" height="100" alt="Dove" />
    <img src="img/backlight.jpg" width="100" height="75" alt="Tower Details" />
    <img src="img/greenbubbles.jpg" width="75" height="99" alt="Green Bubbles" />
    <img src="img/mack.jpg" width="100" height="75" alt="Mack" />
    <img src="img/towers.jpg" width="75" height="100" alt="Sagrada Família Towers" />
 
    <p>The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of the Sacred Family is the most visited building in Barcelona. In it, Gaudí combines his vision of nature and architecture with his devotion to his faith. His focus on this project was so intense that he shunned all other projects, slept in an apartment at the work site surrounded by plans and drawings, and so completely ignored his dissheveled appearance that when, in 1926, he was struck by a streetcar in front of the church, he was mistaken for an indigent and brought to a hospital for the poor where he died soon thereafter.</p> 
 
    <p>The Sagrada Família attracts even the non-religious to its doors in large part due to this tragic story and its still unfinished state, of which the everpresent scaffolding and cranes are permanent reminders. But there is something more. In the Sagrada Família, Gaudí again brings nature and architecture together&#8212;the soaring spires look something like rising stalagmites in an underground cave&#8212;this time in reverance.</p>
  </section> 
 
  <section class="project"> 
    <h2 id="park-guell">Park Guell</h2> 
 
    <!-- You could mark these images in an unordered list, too -->
    <img src="img/bluemosaic.jpg" width="100" height="75" alt="Blue Mosaic" />
    <img src="img/glass.jpg" width="75" height="99" alt="Glass Mosaic" />
    <img src="img/dragon.jpg" width="100" height="75" alt="Dragon" />
    <img src="img/guelltower.jpg" width="74" height="100" alt="Guell Tower" />
    <img src="img/claw.jpg" width="100" height="74" alt="Dragon's claw" />
 
    <p>The Park Guell always reminds me of Howard Roark in Ayn Rand's <a href="http://en.wikipedia.org/wiki/Fountainhead"><cite>The Fountainhead</cite></a>. Gaudí's project in the Park Guell was to build a residential community whose residents would love where they lived. It was never finished.</p>
 
    <p>Perhaps that is for the best, since now we <em>all</em> get to enjoy it. The Park Guell is set on a hill overlooking practically all of Barcelona. Its beautiful and even comfortable serpentine bench is filled with foreigners and locals alike every day of the week. Its mosaic lizard have become synonymous with the city itself.</p>
  </section>
 
 </article>
</body> 
</html>

Here is the final CSS: 

@charset "UTF-8";
 
body {
  background: #eef;
  color: #909;
  font: 100% "Palatino Linotype", Palatino, serif;
}
 
h1,
h2 {
  color: navy;
  font: 1.375em "Arial Black", Arial, sans-serif;
  letter-spacing: .4em;
  text-align: center;
}
 
h1 {
  text-transform: uppercase;
}
 
h2 {
  font-size: 1.15em;
  font-variant: small-caps;
}
 
p {
  font-size: .875em;
  line-height: 1.6;
  text-align: justify;
  text-indent: 1.5em;
}
 
em {
  font-weight: bold;
}
 
/* Links */
a:link {
  color: #74269d;
  font-weight: bold;
  text-decoration: none;
}
 
a:visited {
  color: #909;
  text-decoration: none;
}
 
a:hover {
  color: #c3f;
  font-weight: bold;
  text-decoration: underline;
}
 
/* Table of Contents navigation */
.toc {
  background: #ebc6f9;
}
 
.toc a {
  font-size: .75em;
}

Constructing a Style Stylesheet

Add your own notes!

Font Families and Shapes

Choosing a Font Family

Specifying Alternate Fonts

Creating Italics

Applying Bold Formatting

Font Size and Line Height

Setting the Font Size

Setting the Line Height

Setting All Font Values at Once

  • This is an advanced technique.
  • The order is important and you may find it easier to build font declarations up step by step.

Colour, Spacing and Indents

Setting the Colour

Changing the Text's Background

Controlling Spacing

Adding Indents

White Space and Other Decorations

Setting White Space Properties

Aligning Text

Changing the Text Case

Using Small Caps

Decorating Text

Layout with Styles

Summary

Next

eg-146/lecture16.1332185804.txt.gz · Last modified: 2012/03/19 19:36 by eechris