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.
- 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—the soaring spires look something like rising stalagmites in an underground cave—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
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 buggy1)
- 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.
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 Engines2)
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… <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…</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…</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…</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…</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>
</html>
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 margin border padding content ← → CSS 'width'
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 XHTML 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)
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, depend on an element's parent.
Case Study: Developing a Positioning Style Sheet This is the document as we want it to appear when it is finished [Finshed result.]
Document Structure
This is the logical structure of the document: indentation is used to show structure and for clarity, the closing tags are not shown.
<div id=“wrap”>
<div id="screen">
<div id="header">
<h1>photobarcelona . . .</h1>
<p id="navbuttons">
<a class="current">home</a> • <a>faq</a> • <a >resources</a> • <a>previous</a> • <a>archives</a>
<p class="description">capturing ....
<div id="main">
<div class="entry">
<h2>Hospital Sant Pau</h2>
<p class="date">June 23, 2006</p>
<div class="photo_text">
<p class="photo">[thumbnail image link to larger image]
<p>The Saint Paul Hospital..
<p class="continued">[link to more text]
[[more entries]]
<div id="sidebar">
<h3>from my window</h3>
<p>Around ..
<div id="footer">
<h2>about this photoblog</h2>
<p>This photoblog is ...
<p class="miniphotos">
[[lots of thumbnail images]]
You should note that most document sections are marked up as div elements and the order is such that the XHTML will be usable on older browsers and mobile devices.
Visual design elements This picture shows how the various div elements are to be layed out on the screen. Note that the order of display can be (and in this case is) different from the order in the XHTML file. [Box-model layout of the document]
Changing the Background
To use a background image:
#wrap {
background-image: url(bluebench.jpg); background-position: left top; background-repeat: repeat;
}
Notes
To change the background colour:
# wrap { background: url(bench.jpg) left top repeat; } #screen { background: #FEF6F8; } a:focus a:hover a:active { background: #F3CFB6; } #sidebar { background: #F5F8FA; }
Notes
Setting the Height or Width for the Element
To set the height or width for an element:
#wrap { width: 90%; max-width: 900px; min-width: 480px; }
#main {width: 75%; }
.photo { width: 100px; height: 75px; }
[Setting the width and height of an element]
Notes
Setting the Margins around an Element (1)
The margin is the amount of transparent space between one element and the next, in addition to and outside any padding or border around an element. It is used to increase (or decrease) the white space around an element. When you set two values, the first is applied to the top and bottom margins, the second is applied to the left and right margins. Here we give the design a little extra space at the top and bottom. The auto margin setting centres the layout in the window by dividing the leftover 10% of the browser window width that is not used by the wrap div between the right and left margins.
#wrap { margin: 20px auto }
[Setting the wrap margin to 20 pixels]
Setting the Margins around an Element (2)
The sidebar div will have a left margin of 74% which will overlap the space for the main content just enough to allow for some padding around the sidebar text. The 110 pixel margin to the left of the main content will give us room for the photo later.
#sidebar { margin-left: 74%; } .photo_text { margin-left: 110px; }
[Setting the margins for sidebar and photo text]
Adding Padding around an Element (1)
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:
#wrap { padding: 30px 20px 0 0 }
[Adding padding to the wrap]
Adding Padding around an Element (2)
Now we add padding to the contents of the screen div — to the top, left and bottom, but not the right: 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:
#wrap { padding: 10px 10px 10px 0; }
[Adding padding to the screen]
Adding Padding around an Element (3)
When the screen background is set to white, we can see why no padding was needed on the left.
[Making the screen background white]
Offsetting Elements In the Natural Flow
Each element has a natural location in a page's flow. Moving the element with respect to this original location is called relative positioning. The surrounding elements are not affected — at all.
.date { position: relative; top -1.1em; } .description { position: relative; left: 1em; margin bottom: 0.2 em; }
[Offsetting elements in the natural flow]
Positioning Elements Absolutely
You can take elements out of the natural flow — and position the absolutely — by specifying their precise position with respect to the nearest positioned ancestor or to the body. First we set the position for the photo_text class so that photos will be positioned with respect to it (and not the body).
.photo_text { position: relative; }
The negative left offset will pull the photo left and out of the photo_text box.
.photo { position: absolute; left: -112px; top: 3px; }
[Positioning elements absolutely] Notes.
Affixing an Element to the Browser Window
When a visitor scrolls in the browser window, the contents of the window usually move up or down while the Back and Forward buttons, for example, stay stationary or fixed. CSS allows you to affix elements to the browser window so that they don't move when the visitor scrolls up and down.
#sidebar { position: fixed; width: 26%; }
#main { padding: 4px; }
[Affixing an element to the browser window]
This example can only really be appreciated by seeing it in action.
Notes
Making Elements Float
You can make elements float in a sea of text (or other elements). You can use this technique to crete multi-column layouts, to create callout quotes, and more. We already pushed the sidebar off to the right, now we'll float the main content to its left. The navbuttons div will float next to the description rather than just under it.
#main { width: 75%; float: left; }
#navbuttons { width: 22em; float: right; }
[Floating elements] Notes
Controlling Where Elements Float (1)
You can control which elements an element can float next to an which cannot. Since it is the main div that is floating, all of the other elements, including the footer, flow around it unless we say otherwise.
[The footer shouldn't float!]
Controlling Where Elements Float (2)
Here we clear the float so that the footer div no longer floats next to the main div
#footer { clear: both; }
[The footer doesn't float if it the float is cleared] Notes
Positioning Elements in 3D
When we floated the navbuttons they slid under the description. This means that you can't click the links (try it!). We set the z-index level to 1 which pulls the navbuttons div above the description. We also have to position the navbuttons div relatively so that the z-index property can work.
#navbuttons { position: relative; z-index: 1; }
[After z-index has been added, links will work]
Once the navbuttons div is on top, the links work as expected.
Setting the Border
You can create a border around an element and then set this for thickness, style and colour. If you've specified any padding, the border encloses both the padding and the contents of the element.
.entry { border-right: 2px dashed #B74E07; }
.photo img { border: none; }
#footer { border-top: 2px dotted #B74E07; }
[Setting the border] Notes [Setting the border] More notes
Changing the Cursor
When you point to a link, the cursor changes to a pointing hand and the link is highlighted
[Normal link behaviour]
Because we are on the home page, the home link will be part of the current class. We can then change the cursor and the background of the home link so that it doesn't act like a link.
a:hover,current { cursor: default; background: white; }
[Changing the link style and cursor]
Notes
Determining Where Overflow Should Go
Elements are not always contained in their boxes. You can control the area outside an elements' box with the overflow property. Here we use overflow to restrict the collection of mini photos at the bottom of this blog page to a single line. When the page is resized, images are removed from the display rather than scrolling or re-flowing to a second line.
p.miniphotos { height: 33px; overflow: hidden; }
[Controlling the overflow] Notes
Aligning Elements Vertically
You can align elements in many different ways to make them look neater on the page. here we align the img elements in the miniphotos class to align on the centre line.
.miniphotos img { vertical-align: middle; }
[Aligning images vertically]
Introduction
Another Example Document The Box Model Types of Positioning Box Formatting Case Study: Developing a Positioning Style Sheet
slide show
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)
Can apply layout to all documents and change with one style sheet
Smaller files: XHTML+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.
XHTML code is cleaner and easier to edit.
Standard so supported in future.
Disadvantage
Current browsers are buggy, old browsers provide no support for layout.
Another Example Document Note: the same XHTML copy is used in all the slides that follow.
Only the style sheet changes
Different effects are achieved with style sheets alone.
Structuring your Page
Have a plan
Use id/class to classify parts of your content.
Arrange the order of content so that it will reproduce in old browsers
View (edited) source
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 margin border padding content ← → CSS 'width'
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 XHTML 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)
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, depend on an element's parent.
Case Study: Developing a Positioning Style Sheet This is the document as we want it to appear when it is finished [Finshed result.]
Document Structure
This is the logical structure of the document: indentation is used to show structure and for clarity, the closing tags are not shown.
<div id=“wrap”>
<div id="screen">
<div id="header">
<h1>photobarcelona . . .</h1>
<p id="navbuttons">
<a class="current">home</a> • <a>faq</a> • <a >resources</a> • <a>previous</a> • <a>archives</a>
<p class="description">capturing ....
<div id="main">
<div class="entry">
<h2>Hospital Sant Pau</h2>
<p class="date">June 23, 2006</p>
<div class="photo_text">
<p class="photo">[thumbnail image link to larger image]
<p>The Saint Paul Hospital..
<p class="continued">[link to more text]
[[more entries]]
<div id="sidebar">
<h3>from my window</h3>
<p>Around ..
<div id="footer">
<h2>about this photoblog</h2>
<p>This photoblog is ...
<p class="miniphotos">
[[lots of thumbnail images]]
You should note that most document sections are marked up as div elements and the order is such that the XHTML will be usable on older browsers and mobile devices.
Visual design elements This picture shows how the various div elements are to be layed out on the screen. Note that the order of display can be (and in this case is) different from the order in the XHTML file. [Box-model layout of the document]
Changing the Background
To use a background image:
#wrap {
background-image: url(bluebench.jpg); background-position: left top; background-repeat: repeat;
}
Notes
To change the background colour:
# wrap { background: url(bench.jpg) left top repeat; } #screen { background: #FEF6F8; } a:focus a:hover a:active { background: #F3CFB6; } #sidebar { background: #F5F8FA; }
Notes
Setting the Height or Width for the Element
To set the height or width for an element:
#wrap { width: 90%; max-width: 900px; min-width: 480px; }
#main {width: 75%; }
.photo { width: 100px; height: 75px; }
[Setting the width and height of an element]
Notes
Setting the Margins around an Element (1)
The margin is the amount of transparent space between one element and the next, in addition to and outside any padding or border around an element. It is used to increase (or decrease) the white space around an element. When you set two values, the first is applied to the top and bottom margins, the second is applied to the left and right margins. Here we give the design a little extra space at the top and bottom. The auto margin setting centres the layout in the window by dividing the leftover 10% of the browser window width that is not used by the wrap div between the right and left margins.
#wrap { margin: 20px auto }
[Setting the wrap margin to 20 pixels]
Setting the Margins around an Element (2)
The sidebar div will have a left margin of 74% which will overlap the space for the main content just enough to allow for some padding around the sidebar text. The 110 pixel margin to the left of the main content will give us room for the photo later.
#sidebar { margin-left: 74%; } .photo_text { margin-left: 110px; }
[Setting the margins for sidebar and photo text]
Adding Padding around an Element (1)
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:
#wrap { padding: 30px 20px 0 0 }
[Adding padding to the wrap]
Adding Padding around an Element (2)
Now we add padding to the contents of the screen div — to the top, left and bottom, but not the right: 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:
#wrap { padding: 10px 10px 10px 0; }
[Adding padding to the screen]
Adding Padding around an Element (3)
When the screen background is set to white, we can see why no padding was needed on the left.
[Making the screen background white]
Offsetting Elements In the Natural Flow
Each element has a natural location in a page's flow. Moving the element with respect to this original location is called relative positioning. The surrounding elements are not affected — at all.
.date { position: relative; top -1.1em; } .description { position: relative; left: 1em; margin bottom: 0.2 em; }
[Offsetting elements in the natural flow]
Positioning Elements Absolutely
You can take elements out of the natural flow — and position the absolutely — by specifying their precise position with respect to the nearest positioned ancestor or to the body. First we set the position for the photo_text class so that photos will be positioned with respect to it (and not the body).
.photo_text { position: relative; }
The negative left offset will pull the photo left and out of the photo_text box.
.photo { position: absolute; left: -112px; top: 3px; }
[Positioning elements absolutely] Notes.
Affixing an Element to the Browser Window
When a visitor scrolls in the browser window, the contents of the window usually move up or down while the Back and Forward buttons, for example, stay stationary or fixed. CSS allows you to affix elements to the browser window so that they don't move when the visitor scrolls up and down.
#sidebar { position: fixed; width: 26%; }
#main { padding: 4px; }
[Affixing an element to the browser window]
This example can only really be appreciated by seeing it in action.
Notes
Making Elements Float
You can make elements float in a sea of text (or other elements). You can use this technique to crete multi-column layouts, to create callout quotes, and more. We already pushed the sidebar off to the right, now we'll float the main content to its left. The navbuttons div will float next to the description rather than just under it.
#main { width: 75%; float: left; }
#navbuttons { width: 22em; float: right; }
[Floating elements] Notes
Controlling Where Elements Float (1)
You can control which elements an element can float next to an which cannot. Since it is the main div that is floating, all of the other elements, including the footer, flow around it unless we say otherwise.
[The footer shouldn't float!]
Controlling Where Elements Float (2)
Here we clear the float so that the footer div no longer floats next to the main div
#footer { clear: both; }
[The footer doesn't float if it the float is cleared] Notes
Positioning Elements in 3D
When we floated the navbuttons they slid under the description. This means that you can't click the links (try it!). We set the z-index level to 1 which pulls the navbuttons div above the description. We also have to position the navbuttons div relatively so that the z-index property can work.
#navbuttons { position: relative; z-index: 1; }
[After z-index has been added, links will work]
Once the navbuttons div is on top, the links work as expected.
Setting the Border
You can create a border around an element and then set this for thickness, style and colour. If you've specified any padding, the border encloses both the padding and the contents of the element.
.entry { border-right: 2px dashed #B74E07; }
.photo img { border: none; }
#footer { border-top: 2px dotted #B74E07; }
[Setting the border] Notes [Setting the border] More notes
Changing the Cursor
When you point to a link, the cursor changes to a pointing hand and the link is highlighted
[Normal link behaviour]
Because we are on the home page, the home link will be part of the current class. We can then change the cursor and the background of the home link so that it doesn't act like a link.
a:hover,current { cursor: default; background: white; }
[Changing the link style and cursor]
Notes
Determining Where Overflow Should Go
Elements are not always contained in their boxes. You can control the area outside an elements' box with the overflow property. Here we use overflow to restrict the collection of mini photos at the bottom of this blog page to a single line. When the page is resized, images are removed from the display rather than scrolling or re-flowing to a second line.
p.miniphotos { height: 33px; overflow: hidden; }
[Controlling the overflow] Notes
Aligning Elements Vertically
You can align elements in many different ways to make them look neater on the page. here we align the img elements in the miniphotos class to align on the centre line.
.miniphotos img { vertical-align: middle; }
[Aligning images vertically]