Cascading style sheets - Next stepsUniversity of Cambridge, May 2010
Cascading style sheets - Next stepsHelen Sargan <hvs1001@cam.ac.uk>
![[University of Cambridge]](/slidy/ucamb.gif)
This course is to look further at what can be accomplished with stylesheets. New browsers make it more feasible to use CSS2 properties and groups of stylesheets to produce leaner and more accessible pages. This is an overview of what can be done, with specific examples to illustrate usage, split into two parts:
An external style sheet is a text file with definitions in the same syntax as it used for internal stylesheets, but with the <style> tags and comment marks removed. The style sheet needs to have the filename appended by .css - in the form filename.css. For instance the stylesheet for examples from the first part of the course would look like this:
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
This information is referred to by any number of web pages instead of having styles in the <head> part of each document, so the <style> tags and their contents should be removed before an external style sheet is linked to. Any changes in the stylesheet will then occur on all pages that use it. The rel="stylesheet" attribute in the above line indicates this is a persistent stylesheet - to be used all the time.
Internal style information can be used as well as links to external style sheets, in which case it will be the last styles to be applied and will over-rule any matching styles that have gone before.
To move into more sophisticated use of CSS, you need to be aware of a small number of essential terms:
There are also some more specialised selectors that you won't have come across before (see end section).
Each div you create adds another layer of complexity to your web page, and every extra class is another 'special case' in your code and another entry to a style sheet. Once you have created a div or, say, a table on a page and given it a class or id (class if you want to use it more than once on a page, id if it is to be unique), you can refer to all the elements within that div or table by their nesting within it, rather than give them classes of their own - this is sometimes known as contextual styling.
As an example, for the heading on the Computing service templates, the coding is like this:
<div id="dept-title"> <h1>Computing Service</h1> </div>
and the stylesheet info looks like this:
div#dept-title {
background: #9c9;
min-width: 694px;
max-width: 1214px;
margin: 0 auto;
overflow: hidden;
padding: 0 20px 0 20px;
border-left: 1px solid #d3d3b1;
border-right: 1px solid #d3d3b1;
border-bottom: 1px solid #d3d3b1;
}
div#dept-title h1 {
margin: 0;
padding: 0.2em 0;
line-height: normal;
font-family: verdana, arial, helvetica, sans serif;
font-size: 1.4em;
font-weight:normal;
color: #000;
background: #9c9;
}
This is a very small example, but the principal can be applied to any parts of the page, and reduce the addition of classes into the html.
When using contextual styling some classes might have to be added as well. You can also group selectors, by separating them with commas, so that more than one set of mark-up will use the same style, for instance:
/*For text to be printed but not appear on screen*/
.noshow, .noshowsmall, div.docbox {display: none;}
An html web page works as a sequence of boxes, threading together and sometimes sitting inside one another, from the top to the bottom of the page of code. The position of the box in the code doesn't necessarily reflect its position on the visible page. To visualise this, you can use the Firefox web developers toolbar to outline all the block elements on the page (block elements are blocks of text with selectors such as <body>, <h1>, <p>, <ul>, <li>, and any <div>).
The box around any of these elements is the boundary of the area that any style can modify. In addition, any section of text that is enclosed by a span (which is inline rather than block) has a box round it that can be modified. You can see that in may parts of a page you have boxes within boxes, any of which can be modified by styles and many of which will inherit styles from enclosing boxes.
This page illustrates how font family, background, font colour and size are inherited. The overall font set for the page is Comic Sans - when that is restyled as Trebuchet in the second division, further boxes in that div will inherit Trebuchet - they will also inherit the background colour. If, for instance line spacing, font size or colour are redefined within a container, this will be added onto the inherited styles.
The styles are like this:
body {font-family: "Comic Sans MS"; color: #333;}
#box1 {background: #C99;
width: 90%;
margin: 1em auto;
padding : 1em;}
#insidebox1 {font-size: 150%;
line-height: 200%;}
#box2 {background: #CF6;
font-family: "Trebuchet MS";
line-height: 150%;
padding: 1em;}
#insidebox2 {color: #009;}
If you look at the page with the DOM inspector extension to Firefox, you can select the computed style, which amounts to all the inherited styles added together.
The box model from the CSS2 standard for how it should work.
If a content box is set to p {width:200px; border: 20px; padding: 20px}, the correct method of calculating the overall box width is: content (200px) + padding (20px+20px) + borders (20px+20px) = 280px.
However, IE6 calculates the width as: content, padding and borders together = 200px - the content will therefore be narrower. This is something to be aware of, and if it causes difficulty, a wide range of box model hacks have been developed to rectify the problems. IE7/8 has corrections for this problem, but this will not fix the behaviour of previous versions of IE.
The doctype (or DTD) used on a page (and the exact syntax used for the doctype expression) can also determine how the box model is applied because what's there will trigger a browser into a particular mode (standard, quirks or Mozilla's 'almost standards') - see http://hsivonen.iki.fi/doctype/ and the table at http://css.maxdesign.com.au/listamatic/about-boxmodel.htm for information.
When approaching how to position information on on a web page, there is never one right solution for how to do it. There are many different ways, with pros and cons.
The first thing to consider is how to organize your page - create a simple grid as a guide for where content is to go, like this:
| Branding Global nav (inc search box) | |
| Navigation | Content |
| Footer | |
Use this to create <div>s to section up your html into the positional blocks you want to use, naming them appropriately.
The second thing is to think about the type of layout that you wish to achieve, which can be one of fixed, liquid or elastic:
To see the difference, try zooming the following pages in Firefox:
The first gives a magnification of the page - if you try and set a larger type size in your browser it has no effect. In the second, zooming enlarges the text (in Safari also the images) but retains the width of the page. The advent of being able to zoom in browsers has to some extent diffused the issues surrounding types of layouts, but from a user's point of view dynamic layouts still have advantages.
To get a better understanding of flexible web design, some sample chapters of "Flexible Web Design" are available from http://www.flexiblewebbook.com/bonus.html
Floats are a simple way of placing content right or left and are not to be confused with true css positioning (see next section) – they are often all you need. You can use float creatively to float sections of the page right or left, or you can a number of objects right or left, and they will butt up against each other (see http://css.maxdesign.com.au/floatutorial/ for examples) - float is very versatile. When a single object is floated, the surrounding text will flow around the floated item - when you want this flowing to stop, you need to stop the float by adding {clear:both;} and then the following content will start underneath.
Float is used extensively in the University web page templates.
See http://www.cam.ac.uk/community/. The picture on the page is floated to the right using the following style and code:
CSS CODE
div#content-primary p img {
float: right;
border: 5px solid #dbd7cc;
margin-left: 20px;
margin-bottom: 1.125em;
display: inline;
clear: right;
}
HTML CODE
<p><img src="images/microscope-200.jpg" alt="A boy using a microscope
at the CambridgeScience Festival" />Every year Cambridge staff and students
invest 370,000 hours of their time in voluntary and outreach work, with more
than 1 million people annually participating in and benefiting from our
community activities. Search the <a
href="http://webservices.admin.cam.ac.uk/outreach/">Community
Directory</a> to find out how you can get involved yourself, or how you
can access one of the many resources available.</p>
See http://www.cam.ac.uk/test/cssdev/floatexample.html. The list on the page is marked up and styled in the following way, to create 'buttons':
CSS CODE
ul#navigation
{list-style-type: none;
margin: 0;
padding: .5em 0; }
ul#navigation li a
{display: block;
width: 5em;
color: #fff;
background-color: #036;
padding: .2em 0;
text-align: center;
text-decoration: none;}
ul#navigation li a:hover
{color: #fff;
background-color: #69C;}
ul#navigation .left { float: left; }
ul#navigation .right { float: right; }
HTML CODE
<ul id="navigation">
<li class="left"><a href="#">previous</a></li>
<li class="right"><a href="#">next</a></li>
</ul>
CSS Code
html, body {color: #000;font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: normal;font-size: 0.9em; background:#ffc; margin:0;}
h1 {color: #600; font-size: 140%;text-align: center; }
h2 {color: #600; font-size: 120%; font-variant: small-caps; }
#branding {background:#fc0; width: 100%;padding-top:0.5em;
border-bottom:6px solid #f90;}
#nav {float:left; width: 9em; padding: 0.5em 0 0 0.5em; margin:0;}
#nav ul {margin:0 ; padding: 0 1em 1em 0; text-align:left;list-style: none;
font-size:90%;}
#nav ul li {padding: 2px 0 2px 0;}
#nav h2 {padding: 0; font-size:90%; color: #006;}
#content {margin: 0 0 0 9em; padding: 0.5em 1em 1em 1em;
border-left:1px dotted #006; background: #fff;}
#footer {clear: both; background:#ff0; width: 100%;
text-align: center;border-top:6px solid #f90;padding-bottom: 0.5em;font-size:0.9em;}
HTML Code
<div id="branding">
<h1>Branding</h1>
</div>
<div id="nav">
<h2>Navigation</h2>
<ul>
<li>ffgf</li>
<li>vvbb</li>
<li>hgmmhb</li>
<li>ythhh</li>
<li>yyuuj</li>
<li>k,k,,k,</li>
</ul>
</div>
<div id="content">
<h2>Content</h2>
<p>Lorem ipsum... </p>
</div>
<div id="footer">
<p>[footer]We are big and we are clever</p>
</div>
clear:both; in the style for the footer will clear the float and return the alignment to normal.
CSS Code
html, body {color: #000;font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: normal;font-size: 0.9em; background:#ffc; margin:0;}
h1 {color: #600; font-size: 140%;text-align: center; }
h2 {color: #600; font-size: 120%; font-variant: small-caps; }
#page {background:#ccc; width: 90%; margin: auto;}
#branding {background:#fc0; width: 100%;padding-top:0.5em;
border-bottom:6px solid #f90;}
#nav {float:left; width: 9em; padding: 0.5em 0 0 0.5em; margin:0;}
#nav ul {margin:0 ; padding: 0 1em 1em 0; text-align:left;list-style: none;
font-size:90%;}
#nav ul li {padding: 2px 0 2px 0;}
#nav h2 {padding: 0; font-size:90%; color: #006;}
#content {margin: 0 0 0 9em; padding: 0.5em 1em 1em 1em;
border-left:1px dotted #006; background: #fff;}
#footer {clear: both; background:#ff0; width: 100%;
text-align: center;border-top:6px solid #f90;padding-bottom: 0.5em;font-size:0.9em;}
HTML Code
<div id="page">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="nav">
<h2>Navigation</h2>
<ul>
<li>ffgf</li>
<li>vvbb</li>
<li>hgmmhb</li>
<li>ythhh</li>
<li>yyuuj</li>
<li>k,k,,k,</li>
</ul>
</div>
<div id="content">
<h2>Content</h2>
<p>Lorem ipsum... </p>
</div>
<div id="footer">
<p>[footer]We are big and we are clever</p>
</div>
</div>
By putting the entire content of the page into a new div we allow the background colour for the content to be set and also used for the left-hand navigation. To do it otherwise with a float would result in the colour only extending down the column until the bottom of the navigation list rather than to the bottom of the column, like this.
When using floats you must be careful about clearing them after use so that text assumes its normal position again - see http://www.brainjar.com/css/positioning/default3.asp for a good description and demonstration.
CSS positioning (or CSS-P) is the CSS2 successor to using tables for layout purposes. At its inception it had the problem of not being 'backwards compatible' with old browsers. It allows you to position areas of your windows relative to each other or with absolute definition (or both), but has the multiple drawbacks of being complex to understand and tricky to use and as a result it hasn’t been taken up as readily as using floats. If find that floats don't do what you need, to begin to understand how positioning works, it might be useful to look at:
In addition you must understand that these rules and methods don't work in some browsers, many of which vary in some respects of positioning and vertical space management in particular (see http://westciv.com/wiki/CSS_compatibility_table_for_current_browsers#Page_layout_properties)
There is no answer. There are a number of different ways to use positioning, but often problems are thrown up by the simplest of needs. Simple positioning is achieved by using fixed widths, usually set into a background frame, but it is usually better to explore using floats first rather than getting into anything more complicated.
Since IE7 and IE8 are now in general use, and IE9 hot on their heels, you need to take note whether websites giving advice have been updated recently. Many that have been hanging around for a while may now be giving spurious advice about what IE can do. See:
<div id="nav"> <h2>Navigation</h2> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> </ul> </div>
For a typical measurement, in May 2011 (May 2010) on http://www.cam.ac.uk the breakdown is:
You can see that the popularity rating has changed quite a lot over a year but perhaps not quite as you would expect. Almost 2% of visits are from Safari users on iPhones, iPads or iPods. Most of the users of Chrome are Windows users.
The cross-browser support of CSS2 functionality by Windows IE 6 is patchy (and somewhat incomplete in IE7) and indeed some hacks utilize the problems to pass css to browsers that are not IE. http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx shows CSS supported in version of ie from 5 to 9.
The cross-browser support of CSS2 functionality by Windows IE 6 is patchy (and somewhat incomplete in IE7) and indeed some hacks utilize the problems to pass css to browsers that are not IE. http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx shows CSS supported in version of ie from 5 to 8.
If a number of items on the page looks like a list, it ought to be marked up as a list so that users of speaking browsers are clear what sort of content it is. Lists are also the best way to structure navigation.
See http://css.maxdesign.com.au/ for a seriously large number of things you can do with lists, only some of which are covered here, plus tutorials on floats and selectors. One of the reasons that lists are so malleable with CSS is that by default a list is a set of boxes within another box - there are a number of different places to control functionality and appearance, and also the <display> attribute can really come into its own.
You can use stylesheet formatting to alter a standard list to use a graphic instead of a plain bullet, formatted into buttons or run in a paragraph. In all these examples the formatting of the list is exactly the same, with a named div enclosing the list to allow use in the stylesheet of contextual markup. In some cases list items have been allocated a class to add some extra formatting.
Take a simple list:
<p>Main ingredients:</p> <ul> <li>onions</li> <li>carrots</li> <li>venison</li> <li>beetroot but only with the tops still attached</li> </ul>
Adding a different graphic instead of a bullet can be done two different ways, either by using the list styling to do it or by using a background image to do it. The problem with the first method is that browsers vary in how they position the image, so the second is more reliable. (The examples below are both inherting some list styling, but they are both inheriting to the same extent.)
With a graphic
.lists #first2 ul {padding-left: 1.5em;}
.lists #first2 ul li {list-style: url(http://www.cam.ac.uk/icons/burst.gif)
disc;background-image: none; padding-left: 0.5em;}
As CSS background
.lists #first3 ul li {background: transparent
url(http://www.cam.ac.uk/icons/burst.gif) no-repeat 0px 0px; }
Main ingredients:
The div formatting does this (the last list item has a class attached so it gets a full stop instead of a comma by using pseudo elements, and unfortunately they don't work in IE (even IE7) but do work in IE8):
#inlinelist {border: 1px solid #000;width: 50%;padding: 1em; font-family:
"Trebuchet MS", sans serif;}
#inlinelist p {display: inline; margin:0; padding: 0;}
#inlinelist ul, #inlinelist li {display: inline;margin: 0;padding: 0;color:
#339;font-weight: bold;}
#inlinelist ul li:after {content: ", ";}
#inlinelist ul li.last:after {content: ". ";}
Cutting down the final entry for ease of use, we can produce a coloured navigation bar from it. Using what are called adjacent sibling selectors (which do work in IE7 and IE8) and a simple list with an id:
The style to produce this is:
ul#navlistbest {margin-left: 0;margin-bottom: 25px;padding: 3px 0; display:
inline; background:#000;}
ul#navlistbest li {margin: 0;padding: 3px 15px; list-style: none;
width: 40px; display: inline;}
ul#navlistbest li {background:#ffff99; border-left: 0;}
ul#navlistbest li+li {background:#FF9933;}
ul#navlistbest li+li+li {background:#CC6600;}
ul#navlistbest li+li+li+li {background:#CC0033;}
For a version that will work in all browsers, the whole list is contained in a <div> and each list item has a class specifying the colour
The div formatting does this:
#navlistbetter {padding: 5px;margin-bottom: 25px; background:#000;}
#navlistbetter ul {margin-left: 0;padding-left: 0;display: inline;}
#navlistbetter ul li {margin-left: 0;padding: 3px 15px; list-style: none;
display: inline; width: 40px;}
#navlistbetter ul li.first {background:#ffff99; margin-left: 0;border-left:
none;list-style: none;display: inline;}
#navlistbetter ul li.beet {background:#CC0033;}
#navlistbetter ul li.carr {background:#FF9933;}
#navlistbetter ul li.ven {background:#CC6600;}
This approach can be adapted in a number of ways (and there are several other ways of doing this), for instance to have a 'live' link colour and all the others the same colour, so the navigation flags where the user is in the content - see for instance http://www.cam.ac.uk/admissions/undergraduate/, http://www.lookup.cam.ac.uk/ or http://www.lib.cam.ac.uk/.
The div formatting does this:
#buttonlist {float:left; width: 9em;border-right: 1px solid #000;padding: 0 ;margin: 1em 0 0.5em 0;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana,
Lucida, Geneva, Helvetica, Arial, sans-serif;background-color: #66CCFF;
color:#333;}
#buttonlist ul {list-style: none;margin: 0;padding: 0;border: none;}
#buttonlist li {border-bottom: 1px solid #66CCFF;margin: 0;}
#buttonlist li a {display: block;padding: 5px 0px 5px 0.5em;border-left: 10px
solid #00CC00;border-right: 10px solid #508fc4;background-color: #2175bc;color:
#fff;text-decoration: none;}
#buttonlist li a:hover {border-left: 10px solid #1c64d1;border-right: 10px solid
#5ba3e0;background-color: #2586d7;color: #fff;}
You can see that this code depends on the list items being links for it to work. It uses the <a> tag for styling the list items into blocks (to make them work like buttons) and uses styling of a:hover to create the rollover effect.
Lists can also be styled into horizontal navigation with drop-down menus and/or flyouts - see for example http://positioniseverything.net/css-dropdowns.html. Some methods require additional use of javascript.
<div id="nav"> <h2>Navigation</h2> <ul> <li><a>One</a></li> <li><a>Two</a></li> <li><a>Three</a></li> <li><a>Four</a></li> <li><a>Five</a></li> <li><a>Six</a></li> </ul> </div>
There are a variety of ways you can use selectors and a number of special selectors that you can use. There is a very good tutorial on selectors at http://css.maxdesign.com.au/selectutorial/index.htm
This is potentially an extremely useful method of adding a style specific to the order of elements, for instance in a previous example of styling navigation, or if an h2 heading is followed by an h3 heading, you might want to reduce the space above. Adjacent sibling selectors are not supported by Windows IE 6 and below, but are in IE7 and above and other modern browsers. Style information is as shown below:
h2+h3 {margin-top: 0.5em;}
Pseudo elements are the selectors :first-line and :first-letter and :after and :before. They all work in newer browsers (including IE8 and above) but only the first two will work in IE7 and below. :first-letter can be used quite successfully as a drop cap - see http://www.javascriptkit.com/howto/pseudoletter.shtml for example.
To print the URLs, the choice was to use the pseudo element a:after to print all the urls that appear in the main area of the page, in the form:
div#content a:link:after, div#content a:visited:after {
content: " (" attr(href) ") ";
color: #999;
text-decoration: none;
font-size: 80%;
}
which prints in square brackets after the link the url from the href of a link in div#content - as here: show this link. This won’t work in the browsers mentioned above. In the new University template print stylesheet this is being used to give an extra feature for browsers that can render it.
A problem is that for local links we use relative urls and this code does not expand relative urls to absolute urls. The way urls are referred to could change and they could be addressed from the root, then a new style could be added that introduces the server name, but this then breaks urls that are not for local pages:
a.printrelurl:after {content: " [http://www.cam.ac.uk"attr(href)"]"}
Css support for printing (CSS2 and CSS3) markup is incomplete, although there is more support in the newest browsers (IE8 and above, Firefox 4 and Opera 9 and above), which don't reliably appear in comparison tables. (A more complex comparison table may be found at http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29.)
CSS3 is bringing in some new effects – some of which are merely decorative (like adding curves, colour gradients, text shadowing, animations), others much more functional like multiple background images and new attributes useful for streamlining code. At present IE 8 and above are less likely to display CSS3 effects than are Firefox, Opera, Safari and Chrome, although IE9 is catching up.
This pseudo-class will allow you to easily add alternate row tint to tables, by using the style:
tr:nth-child(odd) td { background-color: #86B486; }
‘odd’ and ‘even’ are the common keywords used here. ‘2n’ is equivalent to ‘odd’. You can also use ‘3n’ for every third row, and so on.
The ‘last-child’ selector can be used, say, for the last item in a list, to make it format differently without having to add a class.
There are several tools you can use to produce slides, using xhtml, css and javascript – s5 (http://meyerweb.com/eric/tools/s5/) and slidy (http://www.w3.org/Talks/Tools/Slidy/) are the most well known. Both of these tools work with a single xhtml file and need a knowledge of xhtml and css to make the presentation work properly and look professional. s5 is said to have better documentation. There is an xml management tool for slidy called XSlidy (see http://dret.net/projects/xslidy/latest/).
There are a couple of alternatives that may be worth looking at if you are familiar with ruby (s9 - http://slideshow.rubyforge.org/) or ajax (Ajax-S - http://www.robertnyman.com/ajax-s/).
For a local overview of Slidy see http://web-support.csx.cam.ac.uk/webliaison/wlg1206/ - these slides are produced with Slidy.
The 'media' attribute can be used if you want a different stylesheets to be used for different presentation, for instance printing, in which case in the <head> part of the document you might have:
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all"> <link href="mystyleprint.css" rel="stylesheet" type="text/css" media="print">
The available media types are print, screen, braille, aural, TV, handheld, projection. Screen and print are mainstream; handheld, projection, braille and aural have some support but cannot be relied upon. See http://www.w3.org/TR/REC-CSS2/media.html for full information.
You can use a media stylesheet for printing to change the look of or remove information from the screen that the user won't need, and add information that they will. If minimal changes are needed then you can use an @media rule in the style information in the head of a document (see later). If used carefully, you may be able to bypass having to create pdf versions of pages. Since (x)html is much more accessible this would be very advantageous. A good outline for use of media-dependent stylesheets, with links to information about designing for each media type may be read at http://css-discuss.incutio.com/?page=MediaStylesheets, and another good (an up to date) source of information is http://www.howtocreate.co.uk/tutorials/css/mediatypes
Mobile phones and smartphones use mobile-specific browsers, which may manage rendering and use of stylesheets in a different way from standard browsers. If you look in your logs of what operating systems connections are being made from, you will see iPhone, iPod, Symbian OS, Blackberry, and Android, possibly other less-used systems too.
The iPhone and iPod users will be connecting with a modified version of Safari, which gives a miniature but enlargable version of the page. If you sign up as an iPhone developer, you can download a kit that includes an iPhone emulator for desk-top use. iPhone does not support the handheld.css stylesheet.
Opera mini is widely used by Symbian OS users; it employs an algorithm (which can work very well) to linearise pages and resize pictures (this can be emulated in Opera by selecting View > Small screen - this will then cause any stylesheet labelled as 'handheld' to be loaded). It is hard to intervene in this process, and, as long as you have good clean semantic markup the browser by and large does a better job than you can (see http://www.howtocreate.co.uk/tutorials/css/mediatypes for specific information).
There is a good overview article about handheld devices and stylesheets, with advice about how to push a special style sheet to unwilling device, at http://www.alistapart.com/articles/return-of-the-mobile-stylesheet. In the future (CSS3) it will be possible to add CSS media queries, so that, for instance a style rule can be passed to a handheld device on the basis of screen width. This is very much in its infancy and it is yet to be seen whether it works.
All the pages using the current University template, including Computing Service documentation, have a print stylesheet to produce a neater and clearer paper copy (see http://www.cam.ac.uk/univ/learning/univrole.html as an example). To add or remove areas on either the printed or screen version, we use styles called .noshow and .noprint, as they are very explicit and easy to remember. These are both defined in the stylesheet as {display: none;}; the first in the all media stylesheet and the second in the print stylesheet. Different parts of the page, either tables or sections marked as <div> have been given ids to identify them, so, for instance the printing of the global navigation bar can be 'turned off' by styling:
div#navigation {display: none;}
We remove the global navigation and the breadcrumb trail navigation - each of the sections is a <div> that has an id, which is referenced in the stylesheet as above. If they were not defined in <div> but a table, you would add an id to a table that could be referenced by a style. We also removed the left hand navigation and slid the content of the page leftwards to use the space.
In the print stylesheet we define a different typeface, to allow easier reading, and add some extra information, giving the url of the document (gained from the apache server) and for further information, as well as printing urls of links in the content area of the page, if they are not already used as link text. This information is added with enclosing spans or divs styled to allow them to be hidden on-screen.
To print URLs of links in the document, see previous section for the sophisticated approach. For cross-browser compatibility, put the URL in a span that only shows up when the document is printed. This requires forethought and isn’t really recommended as a sustainable solution.
There are open-source and third-party applications (for instance PDFreactor or Prince) that will produce pdfs either on the fly or statically, using a style sheet, but these can often get very complicated (requiring xslt as well). Consider whether page layout and numbering is as important to users as you think it is.
Instead of having a stylesheet that is persistent ('always on'), a stylesheet or group of stylesheets can be marked as preferred, which means they can be over-ridden by users able to select alternate stylesheets (see below). To mark a stylesheet as preferred, it has to have a title attribute, but otherwise is marked similarly to a persistent stylesheet:
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all" title="standard stylesheet">
The HTML standard also has rules for alternate style sheets so the user may choose an appropriate version through their browser. In a browser that supports alternate stylesheets (Mozilla/Firefox, Opera, IE8 do; other versions of IE and Safari do not), you get the option to choose (from the View menu) which stylesheet you wish to use. The title in the stylesheet link is what appears in the browser option:
<link rel="stylesheet" type="text/css" media="print" href="/print.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="bigtype" href="/nucss3.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="friendly fonts" href="/friendly.css" />
When there are alternate style sheets, what you see in the View menu is (this from http://www.w3.org/Style/CSS/ - very few other sites use them, probably because browsers have been very slow to adopt them).
Looking at http://www.cam.ac.uk/global/style/layout.css, after some commented remarks it starts:
@import "reset.css"; @import "content.css"; @import "typography.css"; @import "forms.css"; @import "lists.css";
@import allows import of rules from other style sheets. It can be very useful, particularly because older browsers (Netscape 4.7 and below) don't understand it and ignore it, therefore making it possible to add styles for newer browsers only. This is ideal for some CSS2 elements that get badly mangled by older browsers but are well supported by more modern ones (see http://www.nypl.org/styleguide/ for more information and an example. @import is also useful if you want to use several stylesheets, keeping separate particular functionality, but call them all from a single stylesheet.
@import must always come first either in rule sets or in a stylesheet. If a separate @import stylesheet is added to a page it may be used in the header, like this:
<style type="text/css" media="all">@import "/style/import.css";</style> <link rel="stylesheet" type="text/css" href="/style/camstyle.css" media="all" /> <link rel="stylesheet" href="/style/print.css" type="text/css" media="print" />@import can include media types as well (which saves using an @media rule as well (see below). Media="all" will be assumed as the default. Another way of including a media type in an @import rule looks like this:
<style type="text/css">@import url("fineprint.css") print; </style>
@media rules can be used if you just want to add a few simple css rules for different media, as follows:
<style type="text/css">
@media print {body { font-size: 10pt} }
@media screen {body { font-size: 12pt} }
@media screen, print {body { line-height: 1.2} }
</style>
Add media stylesheets in a link in preference to using either this method or @import, as it is more reliably supported by browsers.
There are always several ways of writing stylesheet information. The arrangement on the page makes no difference to the browser reading it - only the syntax is important, and how clear it is for you to follow what the styles are for. Comments can and should be added to annotate the stylesheet to help you remember what styles were set up for: enclose the note between /* and */.
Look at the examples at http://webhost.salford.ac.uk/common/general.css and http://www.danwebb.net/stylesheets/base.css to see different ways of laying out a stylesheet.
Margins: When using syntax such as margin: 1em 0 2em 0.5em; to define separately the margin widths on four side of an element, the order follows the quarters of a clock, clockwise, from 12, so the first is the top, the second, right; the third, bottom; fourth, left.
margin: 1em 0 2em 0.5;
| 1em | ||
| 0.5 | 0 | |
| 2em |
If they are all the same, one value will suffice.
margin: 1em;
| 1em | ||
| 1em | 1em | |
| 1em |
If the values for the top and bottom are the same and the left and right the same, then two values will do the job.
margin: 1em 0.5em;
| 1em | ||
| 0.5 | 0.5em | |
| 1em |
If one pair of values are the same, then three values will suffice:
margin: 1em 0.5em 2em ;
| 1em | ||
| 0.5 | 0.5 | |
| 2em |
You can specify values for each margin separately as needed (margin-right, etc), but beware that if you don't specifying all values when you use this method it may cause unexpected spacing problems.
The same system can be used for defining padding.
For colour definitions, when a hex number is composed of three sets of pairs, for instance #330066, the number can be compacted to a single number for each pair, for instance #306 (if you use web safe colours they will always be expressed as sets of pairs).
When it comes to syntax, some expressions can be compacted. For definition of borders, there are several individual properties that can be defined separately (border-width, border-style, border-color), and there is the shorthand border property that, when all four borders are to be the same, allows you to define all these three properties at once, making
{ border-width: 1px; border-style: solid; border-color:#333;}
into
{border: 1px solid #333;}
- the order of the property values doesn't matter but all three values must be present.
For definition of font, a similar shorthand can be employed, making
h1 {font-weight: bold; font-size: 120%; color: #990000; ;
font-family: Arial, Helvetica, sans-serif}
into
h1 {font: bold 120% #900 Arial, Helvetica, sans-serif;}
Many web designers (particularly for consumer sites) use hacks to accommodate giving style information (particularly) to versions of IE, all of which have serious flaws of various kinds. It is much better (and no more difficult) to seek a standards-based style solution and avoid using hacks, since, once you start, you are pretty much stuck with maintaining it. It is the case that IE7 and IE8 will break hacks previously designed to generally service IE problems - see http://msdn2.microsoft.com/en-us/ie/ for:
If you do start using hacks, http://robertmaldon.blogspot.com/2008/03/css-tricks-that-target-specific.html has useful information and other techniques for targeting stylesheets at specific browsers.
As we saw in the first part of the course, elements specified in style sheets, for instance the colour of the base type set in the <body> tag, may be inherited by all elements through the document. Other elements are not inherited but may be computed, for instance the font size when specified proportionally will be calculated from the size of the base font (which will be there as a default setting but may be adjusted by the user). Many problems arising in older browsers come about because inheritance and calculation don't work properly.
Multiple stylesheets can be used in a document - there are rules built into the browser about how multiple stylesheets interact (or cascade - see http://www.w3.org/TR/REC-CSS2/cascade.html). As a rule the stylesheets specified by the author will be used in order of listing in the head, so the styles listed last will prevail (this includes style information in <style></style>). So if you need to use <style></style> always add it after any external links to stylesheets then you know they will always be used. In the end, if two different styles are ascribed to the same element, the one specified last in the chain will usually 'win'. Imported stylesheets will also cascade but often styles imported into another stylesheet will 'lose'. In the browser, stylesheets can usually be turned off so the user can implement their own needs. As a general rule, don't try and be too complicated with your use of stylesheets since there is an overhead of linking to many separate stylesheets for each web page and the results may be fragile. Keep stylesheets as clear as you can.
Information about styles used on a web page can be viewed easily with the web developer toolbar, by going to the CSS menu and selecting 'View style information'. A cross-hair and an extra browser toolbar will appear, and when the cross-hair is moved across the screen the container boundary and the style 'tree' will be shown for that part of the page.
It can be difficult to target a container, especially when its sole contents are other containers. Sometimes it helps to look at the page with block level elements outlined, but if your stylesheet is organized so all the styles for a section of the page are collected together, locating the first style may be good enough to lead you to the others.
Firefox add-ons called DOM inspector (https://addons.mozilla.org/en-US/firefox/addon/6622) or Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843)are very useful for showing styles that are being inherited by a selected part of the page.
The other points to look out for:
In the head part of your pages, if you need to, provide ie6 or ie7 stylesheets like this:
<!--[if IE 6]><link rel="stylesheet" href="global/style/ie6.css" type="text/css" media="screen" /><![endif]--> <!--[if IE 7]><link rel="stylesheet" href="global/style/ie7.css" type="text/css" media="screen" /><![endif]-->
You can also provide ie browser directed javascript in the same way.