CPS 353: Internet Programming

CSS and Page Layout

Marcos Elugardo

Gordon College

Last Modified: 09/29/2014

Agenda

Check-in
Web Programming Project and Milestone 1
CSS
Class Exercise
More CSS

Notes should go here...

Check-in

Web Programming Project Overview

Milestone 1

3.1: Basic CSS

3.1: Basic CSS
3.2: CSS Properties
3.3: More CSS Syntax

The bad way to produce styles

<p>
	<font face="Arial">Welcome to Greasy Joe's.</font>
	You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat 
	<font size="+4" color="red">OUR</font> prices!
</p>

Welcome to Greasy Joe's. You will never, ever, EVER beat OUR prices!

tags such as b, i, u, and font are discouraged in strict HTML
- Why is this bad?

Cascading Style Sheets (CSS): `<link>`

<head>
	...
	<link href="filename" type="text/css" rel="stylesheet" />
	...
</head>

<link href="style.css" type="text/css" rel="stylesheet" />

CSS describes the appearance and layout of information on a web page
- (as opposed to HTML, which describes the content of the page)
can be embedded in HTML or placed into separate .css file (preferred)

Basic CSS rule syntax

selector {
	property: value;
	property: value;
	...
	property: value;
}

p {
  font-family: sans-serif;
  color: red;
}

a CSS file consists of one or more rules
a rule's selector specifies HTML element(s) and applies style properties
- a selector of * selects all elements

CSS properties for colors

p {
	color: red;
	background-color: yellow;
}

This paragraph uses the style above.

property	description
`color`	color of the element's text
`background-color`	color that will appear behind the element

Specifying colors

p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }

This paragraph uses the first style above.

This h2 uses the second style above.

This h4 uses the third style above.

color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow
RGB codes: red, green, and blue values from 0 (none) to 255 (full)
hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
Color Chart

CSS properties for fonts

property	description
`font-family`	which font will be used
`font-size`	how large the letters will be drawn
`font-style`	used to enable/disable italic style
`font-weight`	used to enable/disable bold style
Complete list of font properties

`font-family`

p {
	font-family: Georgia;
}
h2 {
	font-family: "Courier New";
}

This paragraph uses the first style above.

This h2 uses the second style above.

enclose multi-word font names in quotes

More about `font-family`

p {
	font-family: Garamond, "Times New Roman", serif;
}

This paragraph uses the above style.

can specify multiple fonts from highest to lowest priority
generic font names:
serif, sans-serif, cursive, fantasy, monospace
if the first font is not found on the user's computer, the next is tried
generally should specify similar fonts
placing a generic font name at the end of your font-family value ensures that every computer will use a valid font

`font-size`

p {
	font-size: 14pt;
}

This paragraph uses the style above.

units: pixels (px) vs. point (pt) vs. m-size (em)
- pt specifies number of point, where a point is 1/72 of an inch onscreen
- px specifies a number of pixels on the screen
- em specifies number of m-widths, where 1 em is equal to the font's current size
16px, 16pt, 1.16em
vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
percentage font sizes, e.g.: 90%, 120%

`font-weight`, `font-style`

p {
	font-weight: bold;
	font-style: italic;
}

This paragraph uses the style above.

either of the above can be set to normal to turn them off (e.g. headings)

Grouping styles

p, h1, h2 {
	color: green;
}
h2 {
	background-color: yellow;
}

This paragraph uses the above style.

This h2 uses the above styles.

a style can select multiple elements separated by commas
the individual elements can also have their own styles (like h2 above)

CSS comments: `/` ... `/`

/* This is a comment.
  It can span many lines in the CSS file. */
p {
	color: red;
	background-color: aqua;
}

CSS (like HTML) is usually not commented as much as code such as Java
the // single-line comment style is NOT supported in CSS
the  HTML comment style is also NOT supported in CSS

W3C CSS Validator

<p>
	<a href="http://jigsaw.w3.org/css-validator/check/referer">
		<img src="http://jigsaw.w3.org/css-validator/images/vcss"
			alt="Valid CSS!" /></a>
</p>

jigsaw.w3.org/css-validator/
checks your CSS to make sure it meets the official CSS specifications
more picky than the web browser, which may render malformed CSS correctly

3.2: CSS Properties

3.1: Basic CSS
3.2: CSS Properties
3.3: More CSS Syntax

CSS properties for text

property	description
`text-align`	alignment of text within its element
`text-decoration`	decorations such as underlining
`line-height`, `word-spacing`, `letter-spacing`	gaps between the various portions of the text
`text-indent`	indents the first letter of each paragraph
Complete list of text properties

`text-align`

blockquote { text-align: justify; }
h2 { text-align: center; }

The Emperor's Quote

[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.

can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)

`text-decoration`

p {
	text-decoration: underline;
}

This paragraph uses the style above.

can also be overline, line-through, blink, or none
effects can be combined:
text-decoration: overline underline;

CSS properties for backgrounds

property	description
`background-color`	color to fill background
`background-image`	image to place in background
`background-position`	placement of bg image within element
`background-repeat`	whether/how bg image should be repeated
`background-attachment`	whether bg image scrolls with page
`background`	shorthand to set all background properties

`background-image`

body {
	background-image: url("images/draft.jpg");
}

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

background image/color fills the element's content area

`background-repeat`

body {
	background-image: url("images/draft.jpg");
	background-repeat: repeat-x;
}

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

can be repeat (default), repeat-x, repeat-y, or no-repeat

`background-position`

body {
	background-image: url("images/draft.jpg");
	background-repeat: no-repeat;
	background-position: 370px 20px;
}

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

value consists of two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc.
value can be negative to shift left/up by a given amount

The `list-style-type` property

ol { list-style-type: lower-roman; }

Possible values:
1. none : No marker
2. disc (default), circle, square
3. decimal : 1, 2, 3, etc.
4. decimal-leading-zero : 01, 02, 03, etc.
5. lower-roman : i, ii, iii, iv, v, etc.
6. upper-roman : I, II, III, IV, V, etc.
7. lower-alpha : a, b, c, d, e, etc.
8. upper-alpha : A, B, C, D, E, etc.
9. lower-greek : alpha, beta, gamma, etc.
10. others: hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha

Styling tables

table { border: 2px solid black; caption-side: bottom; }
tr { font-style: italic; }
td { background-color: yellow; text-align: center; width: 30%; }

My important data
Column 1	Column 2
1,1	1,2 okay
2,1 real wide	2,2

all standard CSS styles can be applied to a table, row, or cell
table specific CSS properties:
- border-collapse, border-spacing, caption-side, empty-cells, table-layout

The `border-collapse` property

table, td, th { border: 2px solid black; }
table { border-collapse: collapse; }

Without `border-collapse`
Column 1	Column 2
1,1	1,2
2,1	2,2

With `border-collapse`
Column 1	Column 2
1,1	1,2
2,1	2,2

by default, the overall table has a separate border from each cell inside
the border-collapse property merges these borders into one

The `rowspan` and `colspan` attributes

<table>
	<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	<tr><td colspan="2">1,1-1,2</td>
		<td rowspan="3">1,3-3,3</td></tr>
	<tr><td>2,1</td><td>2,2</td></tr>
	<tr><td>3,1</td><td>3,2</td></tr>
</table>

Column 1	Column 2	Column 3
1,1-1,2		1,3-3,3
2,1	2,2
3,1	3,2

colspan makes a cell occupy multiple columns; rowspan multiple rows
text-align and vertical-align control where the text appears within a cell

Column styles: `<col>`, `<colgroup>`

<table>
	<col class="urgent" />
	<colgroup class="highlight" span="2"></colgroup>
	
	<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
	<tr><td>2,1</td><td>2,2</td><td>2,3</td></tr>
</table>

Column 1	Column 2	Column 3
1,1	1,2	1,3
2,1	2,2	2,3

col tag can be used to define styles that apply to an entire column (self-closing)
colgroup tag applies a style to a group of columns (NOT self-closing)

Don't use tables for layout!

(borderless) tables appear to be an easy way to achieve grid-like page layouts
- many "newbie" web pages do this
but, a table has semantics; it should be used only to represent actual tabular data
instead of tables, use divs, widths/margins, floats, etc. to perform layout

tables should not be used for layout!
Tables should not be used for layout!!
TABLES SHOULD NOT BE USED FOR LAYOUT!!!
TABLES SHOULD NOT BE USED FOR LAYOUT!!!!

CSS 3 new features

new selectors: nth-child, inline-block, :not, +
ability to embed fonts in a page (yay)
easy built-in support for multi-column layouts
transparency/opacity, color gradients, shadows
rounded corners/borders
animations and transitions (like jQuery)
affine transformations (scaling, rotation, perspective)

3.3: More CSS Syntax

3.1: Basic CSS
3.2: CSS Properties
3.3: More CSS Syntax

Body styles

body {
	font-size: 16px;
}

to apply a style to the entire body of your page, write a selector for the body element
saves you from manually applying a style to each element

Styles that conflict

body { color: green; }
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }

This paragraph uses the first style above.

This heading uses both styles above.

when two styles set conflicting values for the same property, the latter style takes precedence
(later we will learn about more specific styles that can override more general styles)

Embedding style sheets: `<style>` (BAD!)

<head>
	<style type="text/css">
		p { font-family: sans-serif; color: red; }
		h2 { background-color: yellow; }
	</style>
</head>

CSS code can be embedded within the head of an HTML page
this is bad style; DO NOT DO THIS (why?)

Inline styles: the `style` attribute (BAD!)

<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>

higher precedence than embedded or linked styles
used for one-time overrides and styling a particular element
this is bad style; DO NOT DO THIS (why?)

Content vs. presentation

HTML is for content; what is on the page (heading; list; code; etc.)
CSS is for presentation; how to display the page (bold; centered; 20px margin; etc.)
keeping content separate from presentation is a very important web design principle
If the HTML contains no styles, its entire appearance can be changed by swapping .css files
see also: CSS Zen Garden

Cascading style sheets

it's called Cascading Style Sheets because the properties of an element cascade together in this order:
- browser's default styles (reference)
- external style sheet files (in a <link> tag)
- internal style sheets (in a <style> tag in the page header)
- inline style (the style attribute of an HTML element)

Inheriting styles (explanation)

body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: overline underline; }
h2 { font-weight: bold; text-align: center; }

This is a heading.

A styled paragraph. Previous slides are available on the web site.

a bulleted list

when multiple styles apply to an element, they are inherited
a more tightly matching (specific) rule can override a more general inherited rule
not all properties are inherited (notice link's color above)

CSS pseudo-classes

a:link    { color: #FF0000; }      /* unvisited link */
a:visited { color: #00FF00; }      /* visited link */
a:hover   { color: #FF00FF; }      /* mouse over link */

Buy early, buy often!

class	description
`:active`	an activated or selected element
`:focus`	an element that has the keyboard focus
`:hover`	an element that has the mouse over it
`:link`	a link that has not been visited
`:visited`	a link that has already been visited
`:first-letter`	the first letter of text inside an element
`:first-line`	the first line of text inside an element
`:first-child`	an element that is the first one to appear inside another
`:nth-child(N)`	applies to every Nth child of a given parent

Class Exercises

Busy Schedule: Given the following HTML code, write CSS to make the following style changes:

All elements in the body should have a white background with a text color of #330033 and the font Verdana or any serif available on the viewer's computer.
The first-level headers are 40px bold serif font. The second-level headers are 24px underlined sans serif.
Paragraph text and lists should have a width of 550px and a top and bottom padding of 10px.
Ordered lists should have a background color of #FFCC99 and unordered lists should have a background color of #CCFFCC. All list elements should be in italics.
Links should never show the default underlining and upon hovering they should become neon green (#33ff33).

Class exercise: html

<h1>Being Busy</h1>
<p>It's not easy being busy! But that doesn't mean it can't be fun.</p> 

<h2>Important Things To Do</h2> 
<ol> 

 <li><a href="phys.html">Turn in</a> Physics HW!</li> 

 <li>Do Reading for English</li> 

 <li>Go To the Store for Groceries</li> 

 <li>Pay Tuition</li> 

 <li>Make sure program compiles...</li> 

</ol> 
<h2>Fun Things To Do</h2> 

<ul> 

 <li>Sleep In</li> 

 <li>Out to Dinner with Friends</li> 

 <li>Go Swimming</li> 

 <li>Finish Painting</li> 

 <li>Go to the Movies: <a href="movies.html">see what's  playing</a></li>

</ul>

4.1: Styling Page Sections

4.1: Styling Page Sections
4.2: Introduction to Layout
4.3: Floating Elements
4.4: Sizing and Positioning

Motivation for page sections

flow

want to be able to style individual elements, groups of elements, sections of text or of the page
(later) want to create complex page layouts

The HTML `id` attribute

<p>Spatula City!  Spatula City!</p>
<p id="mission">Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers <q>esplode</q> with splendor!</p>

Spatula City! Spatula City!

Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor!

allows you to give a unique ID to any element on a page
each ID must be unique; can only be used once in the page

Linking to sections of a web page

<p>Visit <a href=
		"http://www.textpad.com/download/index.html#downloads">
	textpad.com</a> to get the TextPad editor.</p>

<p><a href="#mission">View our Mission Statement</a></p>

Visit textpad.com to get the TextPad editor.

View our Mission Statement

a link target can include an ID at the end, preceded by a #
browser will load that page and scroll to element with given ID

CSS ID selectors

#mission {
	font-style: italic;
	font-family: "Garamond", "Century Gothic", serif;
}

Spatula City! Spatula City!

Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor!

applies style only to the paragraph that has the ID of mission
element can be specified explicitly: p#mission {

The HTML `class` attribute

<p class="shout">Spatula City!  Spatula City!</p>
<p class="special">See our spectacular spatula specials!</p>
<p class="special">Today only: satisfaction guaranteed.</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

Today only: satisfaction guaranteed.

classes are a way to group some elements and give a style to only that group
(I don't want ALL paragraphs to be yellow, just these three...)
unlike an id, a class can be reused as much as you like on the page

CSS class selectors

.special {                   /* any element with class="special" */
	background-color: yellow;
	font-weight: bold;
}
p.shout {                    /* only p elements with class="shout" */
	color: red;
	font-family: cursive;
}

Spatula City! Spatula City!

See our spectacular spatula specials!

Today only: satisfaction guaranteed.

applies rule to any element with class special, or a p with class shout

Multiple classes

<h2 class="shout">Spatula City!  Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p class="special shout">Satisfaction guaranteed.</p>
<p class="shout">We'll beat any advertised price!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

Satisfaction guaranteed.

We'll beat any advertised price!

an element can be a member of multiple classes (separated by spaces)
note that absense of classes to elements which do not apply

CSS for following examples

.special {
	background-color: yellow;
	font-weight: bold;
}
.shout {
	color: red;
	font-family: cursive;
}

for the next several slides, assume that the above CSS rules are defined

Sections of a page: `<div>`

a section or division of your HTML page (block)

<div class="shout">
	<h2>Spatula City!  Spatula City!</h2>
	<p class="special">See our spectacular spatula specials!</p>
	<p>We'll beat any advertised price!</p>
</div>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

a tag used to indicate a logical section or area of a page
has no appearance by default, but you can apply styles to it

Inline sections: `<span>`

an inline element used purely as a range for applying styles

<h2>Spatula City!  Spatula City!</h2>
<p>See our <span class="special">spectacular</span> spatula specials!</p>
<p>We'll beat <span class="shout">any advertised price</span>!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span

CSS context selectors

selector1 selector2 {
	properties
}

applies the given properties to selector2 only if it is inside a selector1 on the page

selector1 > selector2 {
	properties
}

applies the given properties to selector2 only if it is directly inside a selector1 on the page (selector2 tag is immediately inside selector1 with no tags in between)
Remember if they are separated by a comma, this is selcting more than one unrelated element

Context selector example

<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
	<li>The <strong>best</strong> prices in town!</li>
	<li>Act while supplies last!</li>
</ul>

li strong { text-decoration: underline; }

Shop at Hardwick's Hardware...

The best prices in town!
Act while supplies last!

More complex example

<div id="ad">
	<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
	<ul>
		<li class="important">The <strong>best</strong> prices!</li>
		<li>Act <strong>while supplies last!</strong></li>
	</ul>
</div>

#ad li.important strong { text-decoration: underline; }

Shop at Hardwick's Hardware...

The best prices!
Act while supplies last!

4.2: Introduction to Layout

4.1: Styling Page Sections
4.2: Introduction to Layout
4.3: Floating Elements
4.4: Sizing and Positioning

The CSS Box Model

for layout purposes, every element is composed of:
- the actual element's content
- a border around the element
- padding between the content and the border (inside)
- a margin between the border and other content (outside)
width = content width + L/R padding + L/R border + L/R margin
height = content height + T/B padding + T/B border + T/B margin
- IE6 doesn't do this right

Document flow - block elements

flow

Document flow - block and inline elements

flow

CSS properties for borders

h2 { border: 5px solid red; }

This is a heading.

property	description
`border`	thickness/style/color of border on all 4 sides

thickness (specified in px, pt, em, or thin, medium, thick)
style (none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid)
color (specified as seen previously for text and background colors)

More border properties

property	description
`border-color`, `border-width`, `border-style`	specific properties of border on all 4 sides
`border-bottom`, `border-left`, `border-right`, `border-top`	all properties of border on a particular side
`border-bottom-color`, `border-bottom-style`, `border-bottom-width`, `border-left-color`, `border-left-style`, `border-left-width`, `border-right-color`, `border-right-style`, `border-right-width`, `border-top-color`, `border-top-style`, `border-top-width`	properties of border on a particular side
Complete list of border properties

Border example 2

h2 {
	border-left: thick dotted #CC0088;
	border-bottom-color: rgb(0, 128, 128);
	border-bottom-style: double;
}

This is a heading.

each side's border properties can be set individually
if you omit some properties, they receive default values (e.g. border-bottom-width above)

CSS properties for padding

property	description
`padding`	padding on all 4 sides
`padding-bottom`	padding on bottom side only
`padding-left`	padding on left side only
`padding-right`	padding on right side only
`padding-top`	padding on top side only
Complete list of padding properties

Padding example 1

p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background-color: yellow; }

This is the first paragraph

This is the second paragraph

This is a heading

Padding example 2

p {
	padding-left: 200px; padding-top: 30px;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph

each side's padding can be set individually
notice that padding shares the background color of the element

Padding Shorthand

padding:10px 5px 15px 20px;	top padding is 10px right padding is 5px bottom padding is 15px left padding is 20px
padding:10px 5px 15px;	top padding is 10px right and left padding are 5px bottom padding is 15px
padding:10px 5px;	top and bottom padding are 10px right and left padding are 5px
padding:10px;	all four paddings are 10px

CSS properties for margins

property	description
`margin`	margin on all 4 sides
`margin-bottom`	margin on bottom side only
`margin-left`	margin on left side only
`margin-right`	margin on right side only
`margin-top`	margin on top side only
Complete list of margin properties

Margin example 1

p {
	margin: 50px;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph

notice that margins are always transparent
(they don't contain the element's background color, etc.)

Margin example 2

p {
	margin-left: 8em;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph

each side's margin can be set individually

margin shorthand works just like padding shorthand

CSS properties for dimensions

p { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }

This paragraph uses the first style above.

An h2 heading

property	description
`width`, `height`	how wide or tall to make this element (block elements only)
`max-width`, `max-height`, `min-width`, `min-height`	max/min size of this element in given dimension

Centering a block element: `auto` margins

p {
	margin-left: auto;
	margin-right: auto;
	width: 750px;
}

or

p {
	margin: 0 auto;
	width: 750px;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...

works best if width is set (otherwise, may occupy entire width of page)
to center inline elements within a block element, use text-align: center;

Top/bottom margin collapse

margin collapse

when two block elements appear on top of each other, their margins are collapsed
their shared margin is the larger of the two individual margins

4.3: Floating Elements

4.1: Styling Page Sections
4.2: Introduction to Layout
4.3: Floating Elements
4.4: Sizing and Positioning

The CSS `float` property (reference)

property	description
`float`	side to hover on; can be `left`, `right`, or `none` (default)

a floating element is removed from normal document flow
underlying text wraps around it as necessary

Float example

<img src="images/borat.jpg" alt="Borat" class="headericon" />
Borat Sagdiyev (born July 30, 1972) is a ...

img.headericon {
	float: left;
}

Borat Sagdiyev (born July 30, 1972) is a fictional Kazakhstani journalist played by British-Jewish comedian Sacha Baron Cohen. He is the main character portrayed in the controversial and successful film Borat: Cultural Learnings of America for Make Benefit Glorious Nation of Kazakhstan ...

Float vs. alignment

none 1 before

none 2 before

right #1

right #2

left #1

left #2

none 1 after

none 2 after

using Firebug, toggle the above divs from being aligned to floated...

Common `float`ing content and width

I am not floating, no width set

I am floating right, no width set

I am floating right, no width set, but my text is very long so this paragraph doesn't really seem like it's floating at all, darn

I am not floating, 45% width

I am floating right, 45% width

often floating elements should have a width property value
- if no width is specified, other content may be unable to wrap around the floating element

The `clear` property

p { background-color: fuchsia; }
h2 { clear: right; background-color: yellow; }

Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ...

My Homestar Runner Fan Site

property	description
`clear`	disallows floating elements from overlapping this element; can be `left`, `right`, `both`, or `none` (default)

Clear diagram

div#sidebar { float: right; }
p { clear: right; }

float clear

Common error: container too short (4.3.3)

<p><img src="images/homestar_runner.png" alt="homestar runner" />
	Homestar Runner is a Flash animated Internet cartoon.
	It mixes surreal humour with ....</p>

p { border: 2px dashed black; }
img { float: right; }

Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....

We want the p containing the image to extend downward so that its border encloses the entire image

The `overflow` property

p { border: 2px dashed black; overflow: hidden; }

Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....

property	description
`overflow`	specifies what to do if an element's content is too large; can be `auto`, `visible`, `hidden`, or `scroll`

Multi-column layouts

<div>
	<p>the first paragraph</p>
	<p>the second paragraph</p>
	<p>the third paragraph</p>
	Some other text that is important
</div>

p { float: right; width: 20%; margin: 0.5em;
    border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; }

the first paragraph

the second paragraph

the third paragraph

Some other text that is important

4.4: Sizing and Positioning

4.1: Styling Page Sections
4.2: Introduction to Layout
4.3: Floating Elements
4.4: Sizing and Positioning

The `position` property

div#ad {
	position: fixed;
	right: 10%;
	top: 15%;
}

Here I am!

property	value	description
`position`
	`static`	default position
	`relative`	offset from its normal static position
	`absolute`	a fixed position within its containing element
	`fixed`	a fixed position within the browser window
`top`, `bottom`, `left`, `right`	positions of box's corners

Absolute positioning

#menubar {
	position: absolute;
	left: 400px;
	top: 50px;
}

removed from normal flow (like floating ones)
positioned relative to the block element containing them (assuming that block also uses absolute or relative positioning)
actual position determined by top, bottom, left, right values
should often specify a width property as well

Relative positioning

#area2 { position: relative; }

absolute-positioned elements are normally positioned at an offset from the corner of the overall web page
to instead cause the absolute element to position itself relative to some other element's corner, wrap the absolute element in an element whose position is relative

Fixed positioning

removed from normal flow (like floating ones)
positioned relative to the browser window
- even when the user scrolls the window, element will remain in the same place

Alignment vs. float vs. position

if possible, lay out an element by aligning its content
- horizontal alignment: text-align
  - set this on a block element; it aligns the content within it (not the block element itself)
- vertical alignment: vertical-align
  - set this on an inline element, and it aligns it vertically within its containing element
if alignment won't work, try floating the element
if floating won't work, try positioning the element
- absolute/fixed positioning are a last resort and should not be overused

The `vertical-align` property

property	description
`vertical-align`	specifies where an inline element should be aligned vertically, with respect to other content on the same line within its block element's box

can be top, middle, bottom, baseline (default), sub, super, text-top, text-bottom, or a length value or %
- baseline means aligned with bottom of non-hanging letters

`vertical-align` example

<p style="background-color: yellow;">
<span style="vertical-align: top; border: 1px solid red;">
Don't be sad!  Turn that frown
<img src="images/sad.jpg" alt="sad" /> upside down!
<img style="vertical-align: bottom" src="images/smiley.jpg" alt="smile" />
Smiling burns calories, you know.
<img style="vertical-align: middle" src="images/puppy.jpg" alt="puppy" />
Anyway, look at this cute puppy; isn't he adorable!  So cheer up,
and have a nice day.  The End.
</span></p>

Don't be sad! Turn that frown sad upside down! Smiling burns calories, you know. puppy Anyway, look at this cute puppy; isn't he adorable! So cheer up, and have a nice day. The End.

Common bug: space under image

<p style="background-color: red; padding: 0px; margin: 0px">
<img src="images/smiley.png" alt="smile" />
</p>

red space under the image, despite padding and margin of 0
this is because the image is vertically aligned to the baseline of the paragraph (not the same as the bottom)
setting vertical-align to bottom fixes the problem (so does setting line-height to 0px)

Details about inline elements

size properties (width, height, min-width, etc.) are ignored for inline elements
margin-top and margin-bottom are ignored, but margin-left and margin-right are not
the containing block box's text-align property controls horizontal position of inline elements within it
- text-align does not align block boxes within the page
each inline box's vertical-align property aligns it vertically within its block box

The `display` property

h2 { display: inline; background-color: yellow; }

This is a heading

This is another heading

property	description
`display`	sets the type of CSS box model an element is displayed with

values: none, inline, block, run-in, compact, ...
know what you're doing when you use this, because it can radically alter the page layout (which can be a good thing -- i.e. inline-block)

Displaying block elements as inline

<ul id="topmenu">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

#topmenu li {
	display: inline;
	border: 2px solid gray;
	margin-right: 1em;
}

Item 1
Item 2
Item 3

lists and other block elements can be displayed inline
- flow left-to-right on same line
- width is determined by content (block elements are 100% of page width)

The `visibility` property

p.secret {
	visibility: hidden;
}

Since nobody can see this anyway: Professor Miner is a weirdo!!!

property	description
`visibility`	sets whether an element should be shown onscreen; can be `visible` (default) or `hidden`

hidden elements will still take up space onscreen, but will not be shown
- to make it not take up any space, set display to none instead
can be used to show/hide dynamic HTML content on the page in response to events

HTML5 and layout: The old way

web pages often have to give semantic meaning to content through class and id attributes, rather than through the tag elements themselves

HTML5 semantically meaningful tags

Highlights from the Learn Layout Website

The benefits of max-width
Comparison of position, float, and inline-block based layouts
Introduction to media queries (more on these later...)
Overview of new and upcoming CSS features

Class Exercises

Given a list of people with their birth and end years (all between 1900 and 2000), find the year with the most number of people alive.

If you can, do this using c#

CPS 353: Internet Programming

Lecture 2: CSS and Page Layout

CPS 353: Internet Programming

CSS and Page Layout

Marcos Elugardo

Gordon College

Last Modified: 09/29/2014

Agenda

Check-in

Web Programming Project Overview

Milestone 1

3.1: Basic CSS

The bad way to produce styles

Cascading Style Sheets (CSS): <link>

Basic CSS rule syntax

CSS properties for colors

Specifying colors

This h2 uses the second style above.

This h4 uses the third style above.

CSS properties for fonts

font-family

This h2 uses the second style above.

More about font-family

font-size

font-weight, font-style

Grouping styles

This h2 uses the above styles.

CSS comments: /* ... */

W3C CSS Validator

3.2: CSS Properties

CSS properties for text

text-align

The Emperor's Quote

text-decoration

CSS properties for backgrounds

background-image

background-repeat

background-position

The list-style-type property

Styling tables

The border-collapse property

The rowspan and colspan attributes

Column styles: <col>, <colgroup>

Don't use tables for layout!

CSS 3 new features

3.3: More CSS Syntax

Body styles

Styles that conflict

This heading uses both styles above.

Embedding style sheets: <style> (BAD!)

Inline styles: the style attribute (BAD!)

Content vs. presentation

Cascading style sheets

Inheriting styles (explanation)

This is a heading.

CSS pseudo-classes

Class Exercises

Class exercise: html

4.1: Styling Page Sections

Motivation for page sections

The HTML id attribute

Linking to sections of a web page

CSS ID selectors

The HTML class attribute

CSS class selectors

Multiple classes

Spatula City! Spatula City!

CSS for following examples

Sections of a page: <div>

Spatula City! Spatula City!

Inline sections: <span>

Spatula City! Spatula City!

CSS context selectors

Context selector example

More complex example

4.2: Introduction to Layout

The CSS Box Model

Document flow - block elements

Document flow - block and inline elements

CSS properties for borders

Cascading Style Sheets (CSS): `<link>`

`font-family`

More about `font-family`

`font-size`

`font-weight`, `font-style`

CSS comments: `/` ... `/`

`text-align`

`text-decoration`

`background-image`

`background-repeat`

`background-position`

The `list-style-type` property

The `border-collapse` property

The `rowspan` and `colspan` attributes

Column styles: `<col>`, `<colgroup>`

Embedding style sheets: `<style>` (BAD!)

Inline styles: the `style` attribute (BAD!)

The HTML `id` attribute

The HTML `class` attribute

Sections of a page: `<div>`

Inline sections: `<span>`

Centering a block element: `auto` margins

The CSS `float` property (reference)

Common `float`ing content and width

The `clear` property

The `overflow` property

The `position` property

The `vertical-align` property

`vertical-align` example

The `display` property

The `visibility` property