ADVANCED CSS: (LAYERED) DISPLAY & PRESENTATION

PA 70b – Giordon Stark

Table of Contents

Review of Last TimeIntroduction to LayoutsElaboration on <div> and <span>More CSS PropertiesLet’s learn some CSS!

Display, Dimension, Position, LayeringPractice Sessions

Recreation and Adaptation: Getting rid of tables

BECAUSE NOT EVERYONE HAS PERFECT MEMORY RECALL.

A Review of Last Time

Terminology

Rule Contains the selector and one or more declarations

Selector A group of styles – creates the link between the

element and rules to apply 3 types: HTML Tag Selector, Class Selector, ID

SelectorDeclaration

A property and value pair, uses the format “property:value;”

W3C:

The CSS “Recipe”

Internal CSS<style type="text/css">

/* CSS here */</style>Inline CSS (use sparingly, if at all!)<tag1 style=“<!--declarations here -->” />External CSS

File Type: .css No necessary ‘wrappers’ <link rel="stylesheet" type="text/css"

href="mystyle.css" />

Selectors

Tag Selectors – Multiple Elementshr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}

Class Selectors – Multiple Elements.headline {font-family:arial; font-size:14px; color:red} HTML:

<b class="headline">stuff</b><i class="headline">other stuff</i>

ID Selectors – Singular Element#layer1 {position:absolute; left:100;top:100; z-Index:0} HTML:

<div id="layer1">stuff</div>

Multiple Style Sheets + Cascading

Styles are specified inside an HTML element inside the head section of an HTML page in an external CSS file

When you have multiple style sheets for one page, including both internal, external, and inline; CSS cascades all the rules into one singular rule.

The hierarchy is (from highest priority to lowest) Inline Style Internal Style Sheet External Style Sheet Browser Default

An example: http://w3schools.com/css/css_howto.asp

Inline Elements versus Block Elements

Block level elements include Heading Division Paragraph Blockquote Ordered and Unordered Lists

Inline elements include Span Anchor

Block Level and Inline Elements

Block Level elements display text on its own line (line breaks before and after) – my definition of ‘layout’ elements

Rules Block Level elements can contain other block-level elements and inline

elements Inline elements cannot contain block-level elements

Bad Example<div>

<a href=“#”><h1><span>Heading</span></h1></a></div>

Fixed Example<div>

<h1><a href=“#”><span>Heading</span></a></h1></div>

Block Level and Inline Elements

In CSS Inline elements are used for changing

Colors (background and text) Font styles (font weight, text decoration, font family, etc..)

Block level elements are used for changing Positioning declarations (locational) Dimensional declarations (width and height) Padding and Margins

Major Differences Block elements take 100% of available width (of their

parent element) Takes whatever height it needs to fill its content

Some Tips and Tricks

Let’s do a quick refresher and learn some extra tricks on our CSS coding: http://www.thefloatingfrog.co.uk/2008/09/10-css-short

hand-techniques-youll-use-everyday/ http://carsonified.com/blog/features/design/creating-s

exy-stylesheets/ http://stylizedweb.com/2008/03/12/most-used-css-trick

s/ http://www.smashingmagazine.com/2008/11/12/12-pri

nciples-for-keeping-your-code-clean/

GOOD LAYOUTS, GOOD CSS, GOOD TIMES…

Introduction to Layouts

Good Layouts

What should a good layout have? Header Footer Content Left and/or Right Columns Navigation Menu Logo/Banner

Where might these be on a page?

CSS and Layouts

A major benefit is that you’re no longer forced to use tables to create layouts with complete control http://www.yourhtmlsource.com/examples/positioning

2.html http://www.howtocreate.co.uk/tutorials/positionExamp

le.phpWe use block level elements (divs) and inline

elements (span) to make these layoutsDon’t forget about the box model, everything

is made possible!

The Box Model (again)

WHY DO WE CARE ABOUT THESE TWO?HOW ARE THEY GOOD FOR LAYOUTS?

WHY DO WE CALL THEM “CLEAN SLATES”?

Division and Span

Division and Span

Div (short for division) divides the content into individual sections.

Each section can then have its own formatting, as specified by the CSS.

Div is a block-level container, meaning that there is a line feed after the </div> tag.

Division and Span

Span is similar to div in that they both divide the content into individual sections.

The difference is that span goes into a finer level, so we can span to format a single character if needed.

There is no line feed after the </span> tag.

The Clean Slates

Have you ever thought that it would make sense to have a ‘blank slate’ html tag that had absolutely zero styles?

For Block Level elements: division tag. <div></div>

For Inline elements: span tag. <span></span>

Neither really have any HTML attributes applied by default which makes them perfect canvases for styling pages.

Division and Span

So exactly how are they used in HTML? http://essentialkeystrokes.com/css-classroom-div-vs-sp

an/ http://www.html.net/tutorials/css/lesson8_ex2.asp

BECAUSE THE WORLD IS NOT ENOUGH…

More CSS Properties!

CSS Properties

Mainly, we’ll be talking about division and span. In fact, we’ll use website tutorials to make the point clearer… because nobody explains it better than these guys (other than me).

Let’s learn about the following properties: position: {absolute, relative, static, inherit}; top/left/right/bottom: {number}; float: {left, right, both, none}; clear: {left, right, both, none};

CSS Properties

Websites http://www.yourhtmlsource.com/stylesheets/csslayout.

html http://www.brainjar.com/css/positioning/ http://www.barelyfitz.com/screencast/html-training/css

/positioning/We’ll summarize key concepts on the next

few slides

CSS Properties

Float Push it as far as possible to the right or to the left, and

allow text to wrap around it Required with variable height columns

Clear Used on a floated element to force it below adjacent

floatsThese are very hard to master. If you ever get

confused on how they work, Google “CSS Floats” for examples. http://css.maxdesign.com.au/floatutorial/tutorial0801.ht

m http://css.maxdesign.com.au/floatutorial/tutorial0901.ht

m

CSS Properties

Absolute & Fixed Positioning Position is determined by its offset values (top, left, right,

bottom) from its containing element Removed from the normal flow The containing block is the nearest element outside it that has

a position of absolute, relative or fixed If there is no such element, the browser window is used If it is fixed positioning, the browser window is ALWAYS used

Relative Positioning Position is determined by its offset values Not removed from normal flow The containing block of their closest, block-level ancestor

For absolute elements the containing element can be an inline element (not for relatively positioned elements)

CSS Properties

Stacking Order – use the z-index! Two things determine the stacking order: the stacking

context and the z-index value An element with a higher z-index appears in front of

an element with a lower z-index When two elements have the same value (or if neither

has been assigned a value) the source order is used Stacking context also determines the stacking order

http://www.brainjar.com/css/positioning/stackdemo.html

Finally, some elements just get overlapped regardless of z-index: “Overlapping plug-ins”

Summary

For a quick reference to other properties and their values, just use w3schools website: Categorized (in particular, look at pseudo-elements)

http://www.w3schools.com/cssref/default.asp

For a list of supported units http://www.w3schools.com/cssref/css_units.asp

For a (short) list of colors http://www.w3schools.com/cssref/css_colors.asp

For a list of selectors http://www.w3schools.com/cssref/css_selectors.asp

When in doubt, Google is your friend.

RECREATION AND ADAPTATION( D E S T R O Y I N G TA B L E S E V E R Y W H E R E ! )

Practice Session

Baby Steps – The Exercise

floatingLayout.htmlWe’re going to recreate this layout step-by-

step. The layout we need to re-create is:

http://www.ugcs.caltech.edu/~kratsg/PA070b/Lecture3/examples/floatingLayout.png

THE START OF YOUR PROJECT!

Exercise/Homework

Exercise/Homework

No image! This is the first week of creating your layout page (one page) for your student website. To get started…1. Visualize your site layout, draw it. Where do you want your

(vertical/horizontal) navigation? Where’s your content? What colors do you want to use? (find those colors).

2. Develop a skeleton using the simplest of html elements: div, span, paragraph, heading, anchor links, lists.

3. Develop the CSS, starting with dimensions and positions, then working down to the coloring. (It helps if you add borders to the elements you’re moving, so you can see where they are).

4. Add in colors, themes, styles, and filler content. Personalize it and make it unique.

Exercise/Homework

You will be graded on the following criteria: Creativity

of layout – how original is the layout? of color scheme – how well do the colors blend together?

Clash? Efficiency

How well is your layout separated from your styles? 100% Efficiency: http://www.csszengarden.com/

Etiquette Is your code presentable, easy-to-read, indented, and

structured properly? Does it conform to standards of XHTML strict coding?

Example (don’t mimic this)

Another Example (don’t mimic this)