lecture five
agenda
- style sheets review
- firefox extensions
- css advantages
- css box model
- css positioning properties
- exercises
- readings
style sheets review
- three parts to a CSS rule parts
- selector
- property
- value
- three types of selectors
- HTML - simplest and most straightforward
- class - identifies a number of elements as being part of a conceptual group; requires the use of the
classattribute within your markup - id - identifies a unique element within a document; requires the use of the
idattribute within your markup - three places to put style information:
- external - linked from each page in a web site
- embedded - placed in the
<head>of the document to apply only to that document - inline - applied to a single element using the
styleattribute
div and span
div and span are tagsets which allow you to define your own blocks of code for styling. Both of them require either a class or id to be assigned.
Use div to define a block of code that can be styled and positioned using css. The div tag is a block-element tag.
<div class="contentblock">content</div>
Use span to define a block of code for styling. The span tag is an in-line tag, and thus is not appropriate for positioning.
<span class="tabledata">content</span>
firefox extensions
- Firefox is a free, customizable web browser that is one of the most standards-compliant browser available today
- learn more:
- several extensions (small add-ons that add new functionality to Mozilla applications) make web development much easier
- to view installed extensions and add new ones:
- go to Tools > Add-ons to launch the Add-ons window
- click "Get Add-ons" at top of window
- you can browse installed Add-ons or click Browse All Add-ons to visit the Add-ons database online
- other useful developer extensions:
- css viewer - view the css of a page
- edit css - edit css for a page without making permanent changes
- css validator - validate your css rules
- html validator - get warning and error reports when you view source on a page
- x-ray - see the code beneath a page without needing to flip to view source
- colorzilla - get a colour reading from any point in your browser
- Firebug - edit, debug, and monitor CSS, HTML, and JavaScript live in any web page
- More Web Development Add-Ons
css advantages
- greater typography control
- style is separate from structure
- potentially smaller documents
- easier site maintenance
- increased page layout control
- increased accessibility
- ability to define styles for multiple media types
css box model
- as far as a style sheet is concerned, everything in your HTML is inside a box
- from the outside in it looks like this:
marginborderpadding
this is some content - content: text & web page elements in the container
- padding: area between the content and the margin
- border: between the padding and the margin
- margin: determines the empty space between the element and adjacent elements
- content width vs. visible width:
- content width is the size of the visible content (text, images, etc.)
- visible width, however, includes everything out to the edges of border
css positioning properties
- Relative
- Use to slightly change the location of an element in relation to where it would otherwise appear
- Hands-on: Create a new XHTML document using the following embedded rules:
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#myContent { position: relative;
left:30px;
font-family:Arial,sans-serif;
}
- Absolute
- Use to precisely specify the location of an element in the browser window
- Hands-on: Create a new XHTML document using the following embedded rules:
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#content {position: absolute;
left:200;
top:100;
font-family:Arial,sans-serif;
width:300;
}
- As an example of using CSS for positioning compare this page which uses no styling, to the same page that has been linked to an external stylesheet.
textbook resources
See these pages for common CSS properties (1) and box model and positioning properties (2).
- Table 3.1 on page 78
- Table 6.1 on page 230-232
- Figure 6.4 on page 218
- 6.6 CSS debugging tips page 246
external resources
- A CSS property index
By Brian Wilson (no not THAT Brian Wilson) - W3Schools
Tutorials and examples. - Complete CSS Guide
From Westciv. - 50 Useful Coding Techniques
CSS Layouts, Visual Effects and Forms - from Smashing Magazine. - Lists, Floats and Selectors
Great tutorials from MaxDesign - Position is Everything
Advanced CSS techniques for dealing with browserr issues. - The Layout Reservoir
From bluerobot.com. - CSS Layout Techniques
From glish.com. - 10 CSS tricks you may not know.
From webcredible.co.uk. - Little Boxes
More CSS layout techniques - Rich In Style
CSS Guides, free stylesheets, bug reports, example pages, etc.
in class exercises
Download materials from shared space on signalflare.
- Using the files in the ex1_223 folder, complete the code on page 223 in the textbook (Hands-on Practice 6.2).
- For exercise 2, follow along with your instructor using the files in the ex2 folder.
- Using the files in the ex3_242 folder, complete the code on page 242 in the textbook (Hands-on Practice 6.6).
optional exercises
- Hands-On Practice 6.4, page 233. Use the files in the ex4_233 folder
- Create an advanced list:
Recreate the code required to produce the linked list. Use XHTML and verify that your code is valid. - Turn a list into a navigation bar:
Walk through the steps required to recreate a navigation bar described by Roger Johansson in his excellent tutorial.
