ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~SLIDESHOW~~
====== Styling and Positioning with Stylesheets  ======

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

**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|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]]
  * [[#Layout with Styles]]


===== Formatting Text with Styles =====

  * [[#Example 1]]
  * [[#Constructing a Style Stylesheet]]

===== Example 1 =====

This is the example we will use. 
  * Here it is [[http://www.bruceontheloose.com/htmlcss/examples/chapter-10/no-styles.html|without any style applied]].
  * Here it is [[http://www.bruceontheloose.com/htmlcss/examples/chapter-10/text-decoration.html|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:
<code 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>
</code>

Here is the final CSS:
<code 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;
}
</code>

===== 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 =====

  * [[#Introducing 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((Notably IE 6 and IE 7))
    * 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 [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/finished-page.html|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
<code html>
<!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>

</code>

===== 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((Known as Search Engine Optimization or SEO))



===== The Box Model =====

  * CSS treats your web page as if every element is enclosed in an invisible [[#Consequences of the Box Model|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^[[http://www.w3schools.com/css/css_border.asp|Border]] ^[[http://www.w3schools.com/css/css_margin.asp|Margin]] ^[[http://www.w3schools.com/css/css_padding.asp|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">&lt;-</div><div style="float:right">-&gt;</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
[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/finished-page.html|Finished result.]]

===== Document Structure =====

 * Open the [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/no-styles.html|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)
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/html5-elements-styling.html|See page]]

----

<code css>
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;
}
</code>

===== The CSS Reset =====

  * Common technique, ensures that design starts from a blank slate on all browsers
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/reset.html|See result]]

----

<code css>
/* 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;
}
</code>

===== Changing the Background ====

    To use a background image:
<code css>
#container {
  background: url(../img/bg-bluebench.jpg) repeat-y;
}
</code>

[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/assets/css/background-image.css|See result]]


===== To change the background colour =====

<code css>
#page { background: #fef6f8 }
a:focus 
a:hover 
a:active { background: #F3CFB6; }
.logo a:hover { background: transparent; }
.sidebar { background: #f5f8fa; }
</code>

[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/background-shorthand.html|See result]]

===== Setting the Height or Width for the Element =====

  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/width-height.html|Width and Height]]
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/max-width.html|Maximum Width]]



===== 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:


===== Making Elements Float =====


===== Controlling Where Elements Float =====

===== Setting the Border =====

===== Offsetting Elements in the Natural Flow =====

===== Positioning Elements Absolutely =====

===== Positioning Elements in 3d =====

===== Determining How to Treat Overflow =====

===== Aligning Elements Vertically =====

===== Changing the Cursor =====



===== Displaying and Hiding Elements =====

  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-img-default.html|Display Image Default]]
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-block.html|Display Image Block]]
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-none.html|Display Image Node]]



===== Summary ======

  * [[#Formatting Text with Styles]]
  * [[#Layout with Styles]]

===== Next =====

  *