Styling and Positioning with Stylesheets

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

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.

Formatting Text with Styles

Example 1
Constructing a Style Stylesheet

Example 1

This is the example we will use.

Here it is without any style applied.
Here it is as it will be at the end.
The HTML code and final styelsheet are in the notes.

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
Font Size and Line Height
Colour, Spacing and Indents
White Space and Other Decorations

Font Families and Shapes

Choosing a Font Family
Specifying Alternate Fonts
Creating Italics
Applying Bold Formatting

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

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

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

Setting White Space Properties

Aligning Text

Changing the Text Case

Using Small Caps

Decorating Text

Layout with Styles

Introduction
Another Example Document
The Box Model
Types of Positioning
Box Formatting
Example 2: Developing a Positioning Style Sheet

Introducing Layout with Styles

Layout with CSS has advantages over other methods (such as tables and frames)
Good for liquid layouts (which resize with browser)
Lots of Advnatages (See notes)
Disadvantages
- Some older browsers are buggy¹⁾
- Really old browsers provide no support for layout.

<note> Advantages of Layout with Styles

Can apply layout to all documents and change with one style sheet
Smaller files: HTML+CSS usually less than HTML with lots of font tags, tables, etc. Plus CSS file can be cached so loaded only once for a whole site.
HTML code is cleaner and easier to edit.
Standard so supported in future.

</note>

Another Example Document

The same HTML5 copy is used in all the slides that follow.

Only the style sheet changes
Different effects are achieved with style sheets alone.

View (edited) source

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <title>photobarcelona - Liz Castro's photographs and blog about Barcelona</title>
  <link rel="stylesheet" href="assets/css/base.css" />
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
 
<!-- 
NOTE: The conditional comments near the top of this page apply a class to 
  the <html> element for specific versions of Internet Explorer. For example, 
  if a visitor views the page with Internet Explorer, class="ie7" is included 
  in the <html> element. This facilitates targeting CSS rules to IE7 in cases
  when that browser needs a different style rule to display the page nicely. 
  See base.css for a few instances in which a selector begins with 
  .ie6 or .ie7 to target IE6 or IE7, respectively. There are no IE8-specific 
  styles required, but if there were, they would begin with .ie8.
 
  All other browsers ignore these rules.
-->
</head>
<body>
<div id="container">
  <div id="page">
    <!-- ==== START MASTHEAD ==== -->
    <header id="masthead" role="banner" class="clearfix">
      <p class="logo"><a href="/">photobarcelona&hellip; <span>capturing barcelona's cultural treasures on film</span></a></p>
 
      <div>
        <nav role="navigation">
          <ul class="nav">
            <li><a href="#" class="current">home</a></li>
            <li><a href="/about/">about</a></li>
            <li><a href="/resources/">resources</a></li>
            <li><a href="/archives/">archives</a></li>
          </ul>
        </nav>
 
        <form method="get" role="search">
          <label for="search">Search:</label>
          <input type="text" name="search" id="search" maxlength="100" placeholder="architecture, Gaudí, etc." />
          <input type="submit" value="Go" title="Submit search" />
        </form>
      </div>
    </header>
    <!-- end #masthead -->
 
    <!-- ==== START MAIN CONTENT ==== -->
    <div id="main" role="main">
      <h1>Recent Entries</h1>
 
      <!-- Start Entry #1 -->
      <section class="entry">
        <header>
          <h2 lang="es">Hospital Sant Pau</h2>
          <p class="date"><time datetime="2011-06-26" pubdate="pubdate">June 26, 2011</time></p>
        </header>
 
        <p class="photo"><a href="http://www.flickr.com/photos/cookwood/140084106/" title="Photo Sharing"><img src="http://static.flickr.com/52/140084106_cf60074d2a_t.jpg" width="100" height="75" alt="" /></a></p>
 
        <div class="intro">       
          <p>The Saint Paul Hospital at the top of Gaudí Avenue in the Sagrada Família neighborhood is an oft-overlooked gem of modernist architecture. Although the building was begun in 1902 under the direction of the architect Lluís Domènec i Montaner, the hospital itself dates from the 14th century. It serves some 34,000 inpatients yearly, along with more than 150,000 emergency room&hellip;</p>
 
          <p class="continued"><a href="#">continued</a></p>
        </div>
      </section>
      <!-- end .entry #1 -->
 
      <!-- Start Entry #2 -->
      <section class="entry">
        <header>
          <h2>Cathedral Cloister</h2>
          <p class="date"><time datetime="2011-06-24" pubdate="pubdate">June 24, 2011</time></p>
        </header>
 
        <p class="photo"><a href="http://www.flickr.com/photos/cookwood/140083631/" title="Photo Sharing"><img src="http://static.flickr.com/49/140083631_2f53b49778_t.jpg" width="100" height="75" alt="" /></a></p>
 
        <div class="intro">   
          <p>Outside it feels like a battle is raging, with firecrackers going off left and right in honor of Sant Joan, but in the cloister of Barcelona's 12th century Cathedral, it's quiet enough to hear the trickle of the water from the fountain. As everywhere else in Barcelona, Saint George is slaying his dragon here. Somehow&hellip;</p>
        </div>
 
        <p class="continued"><a href="#">continued</a></p>  
      </section>
      <!-- end .entry #2 -->  
 
      <!-- Start Entry #3 -->
      <section class="entry">
        <header>
          <h2>Market Day</h2>
          <p class="date"><time datetime="2011-06-23" pubdate="pubdate">June 23, 2011</time></p>
        </header>
 
        <p class="photo"><a href="http://www.flickr.com/photos/cookwood/140083416/" title="Photo Sharing"><img src="http://static.flickr.com/48/140083416_8c127e3118_t.jpg" width="100" height="75" alt="" /></a></p>
 
        <div class="intro">       
          <p>Quiet returns. And the refrigerator was empty, so off I set on my way to the market. The plan was homemade sushi with friends so I made the trip down to the central Barcelona market: the <i lang="es">Boquería</i>.</p>
 
          <p>I never get tired of coming here. There are rows and rows of busy stalls with fresh fruit and vegetables, and spices and nuts. And more than a couple of crazy tourists like me taking pictures. I confuse the locals by talking to them in Catalan, but&hellip;</p>
 
          <p class="continued"><a href="#">continued</a></p>
        </div>
      </section>
      <!-- end .entry #3 -->
    </div>
    <!-- end #main content -->
 
    <!-- ==== START SIDEBAR ==== -->
    <div id="related" class="sidebar" role="complementary">
      <aside class="feature">
        <h2>From my Window</h2>
 
        <p>Around the corner from our apartment there is a mosaics studio. Last year and the year before, I walked by and looked in wistfully, thinking how cool it would be to make some of the incredible mosaics they have displayed.</p>
 
        <p>This year, I signed up. It’s a 22 hour workshop, spread into 2 hour chunks. I’ve been going Monday and Wednesday mornings, and it’s been great. I’ve learned how to cut ceramic tiles and also <span lang="es">“gres”</span> (their word for sandstone, and refers to a matte tile) and how to fit them together. I’ve got a bunch of ideas for more projects.</p>
 
        <p>So, the other day we make our annual pilgrimage to the Sagrada Familia, and my favorite part is always watching what they’re working on, and there in the middle of the work area is a small pile of green and gold mosaic triangles, just like the ones I’ve been cutting&hellip;</p>
 
        <p class="continued"><a href="#">continued</a></p>
       </aside>
 
       <aside class="archive">
         <nav role="navigation">
          <h2>Archive</h2>
          <ol reversed="reversed">
            <li><a href="/archive/2011/may/">May 2011</a></li>
            <li><a href="/archive/2011/april/">Apr 2011</a></li>
            <li><a href="/archive/2011/march/">Mar 2011</a></li>
            <li><a href="/archive/2011/february/">Feb 2011</a></li>
            <li><a href="/archive/2011/january/">Jan 2011</a></li>
          </ol>
 
          <p class="continued"><a href="/archive/">More from the archive</a></p>
         </nav>
       </aside>
     </div>
     <!-- end #related .sidebar --> 
 
    <!-- ==== START FOOTER ==== -->
    <footer id="footer" role="contentinfo">
      <h1>about this photoblog</h1>
 
      <p>This photoblog is the product of a love of computers, photography, and Barcelona. If you're interested in any of my photos, please contact me. <small>The photographs on these pages are licensed under the Creative Commons Attribution-NonCommercial-NoDerivs License. To view a copy of this license, visit <a href="http://creativecommons.org/licenses/by-nc-nd/2.5/" rel="external">http://creativecommons.org/<wbr />licenses/<wbr />by-nc-nd/2.5/</a>; or, (b) send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.</small></p>
 
      <ul class="thumbnails">
        <li><img src="assets/img/thumb-5179.jpg" width="25" height="33" alt="" /></li>
        <li><img src="assets/img/thumb-5879.jpg" width="33" height="25" alt="" /></li>
        <li><img src="assets/img/thumb-5928.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-5932.jpg" width="25" height="33" alt="" /></li>
        <li><img src="assets/img/thumb-5971.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-6023.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-9659.jpg" width="24" height="33" alt="" /></li>
        <li><img src="assets/img/thumb-0029.jpg" width="33" height="25" alt="" /></li>
        <li><img src="assets/img/thumb-9662.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-6886.jpg" width="25" height="33" alt="" /></li>
        <li><img src="assets/img/thumb-7298.jpg" width="33" height="25" alt="" /></li>
        <li><img src="assets/img/thumb-9661.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-6888.jpg" width="25" height="33" alt="" /></li>
        <li><img src="assets/img/thumb-7306.jpg" width="33" height="25" alt="" /></li>
        <li><img src="assets/img/thumb-9451.jpg" width="33" height="25" alt="" /></li>
        <li><img src="assets/img/thumb-9539.jpg" width="25" height="33" alt="" /></li>
        <li><img src="assets/img/thumb-9560.jpg" width="33" height="25" alt="" /></li>
        <li><img src="assets/img/thumb-0011.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-7124.jpg" width="25" height="33" alt="" /></li>
        <li><img src="assets/img/thumb-0055.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-3973.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-3975.jpg" width="24" height="33" alt="" /></li>
        <li><img src="assets/img/thumb-4083.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-5894.jpg" width="33" height="24" alt="" /></li>
        <li><img src="assets/img/thumb-5958.jpg" width="33" height="24" alt="" /></li>
      </ul>
    </footer>
    <!-- end #footer -->
  </div>
  <!-- #page -->  
</div>
<!-- #container --> 
</body>
</html>

Structuring your Page

Have a plan
Use semantic elements, id and class to classify parts of your content.
Arrange the order of content so that it will reproduce in old browsers and satisfy requirements for Search Engines²⁾

The Box Model

CSS treats your web page as if every element is enclosed in an invisible box.
Box height, width, padding, border and margin can all be set by the style sheet.

Table heading links to w3schools references on this subject.

The CSS Box	Border	Margin	Padding

<html> <div style=“color:black;background-color:#FFFFCC;padding:1em;border:thin solid black;text-align:center;width=30%”>margin <div style=“color:white;background-color:black;padding:1em;border:thin solid black;text-align:center;width=100%”>border <div style=“color:black;background-color:white;padding:1em;border:thin solid black;text-align:center;width=100%”>padding <div style=“color:black;background-color:white;border:thin solid black;text-align:center;width=100%”>content<br/> <div style=“float:left”><-</div><div style=“float:right”>-></div>CSS 'width' </div> </div> </div> </div> </html>

Consequences of the Box Model

CSS can be used to determine the appearance and position of each element's box.
- Gives considerable control over layout.
- Element's box may be block-level or in-line.
- Default representation can be changed by a style declaration.
Elements are displayed in the order that the HTML flows from top to bottom
Line breaks at the beginning and end of every block-level box.

Types of Positioning

Leave the box in the flow – the default (called static)
Remove the box from the flow and specify its exact coordinates with respect either to:
- Its parent element (absolute)
- The browser window (fixed)
- Its default position in the flow (relative)
If boxes overlap, their relative position (stacking order) can be specified using the so-called z-index.

Box Formatting

Once its position is decided the following properties can be set:
- Size (height and width)
- Padding
- Border
- Margins
- Alignment
- Colour
Some properties, particularly em and percentage values, are relative to the element's parent.

Case Study: Developing a Positioning Style Sheet

This is the document as we want it to appear when it is finished Finished result.

Document Structure

* Open the no-style version of the document and view source, preferably in a web development tool that has code folding. * Examine the structure.

The HTML5 display-role reset

For older browsers, ensures that new elements are set as blocks
For IE browsers, we also need a JavaScript HTML5 fix (see the HTML5)
See page

charset "utf-8";
 
/* Style new "block-level-like" HTML5 elements so they occupy their own line in older browsers. */
article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

The CSS Reset

Common technique, ensures that design starts from a blank slate on all browsers
See result

/* CSS RESET
------------------------------------------------ */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Changing the Background

  To use a background image:

#container {
  background: url(../img/bg-bluebench.jpg) repeat-y;
}

See result

To change the background colour

#page { background: #fef6f8 }
a:focus 
a:hover 
a:active { background: #F3CFB6; }
.logo a:hover { background: transparent; }
.sidebar { background: #f5f8fa; }

See result

Setting the Height or Width for the Element

Setting the Margins around an Element

Adding Padding around an Element

Padding is extra space around the contents of an element but within the border. You can change the padding's thickness but not its background.
When you set four values for padding they are assigned to the top, right, bottom, and left, in that order. Here there will only be padding on the top and right:

Table of Contents

Styling and Positioning with Stylesheets