Lecture 10 - Intro to CSSP

8/22/2019 Lecture 10 - Intro to CSSP

1/26

Advanced Styling and Layout

with CSS

INFO 1300:

Introductory Web Design and

Programming


2/26

Part I: Understanding basic or

default layout


3/26

Two classes of elements

Block-level

Generally contain otherelements and/or text

By default (unless you tellit something different),

the browser puts a line

break before and after

each block-level element

Examples:

, ,

Inline-level

Generally contain onlytext, or nothing

Do not cause a line break MUST be nested (be a

descendent) of a block-

level element Examples: , ,


4/26

Browser default layout


5/26

Thinking in terms of boxes


6/26

Well not really.


7/26

But at this point we dont have

control over those boxes

And the boxes are pretty simple


8/26

We need to understand the

structure of the boxesThe box model


9/26

Fusce metus. Lorem ipsum dolor sit amet,

consectetuer adipiscing elit. Nullam orci arcu,vestibulum at, sollicitudin in, dictum a, nisi.

Pellentesque est. Ut semper lobortis erat.

width

height







background-color

border-color border-width border-style

Nullam pretium lectus id purus. Integer vitae ipsum.,


Fusce metus. Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Nullam orci arcu,vestibulum at, sollicitudin in, dictum a, nisi.




padding {-left right top bottom}



margin {-left right top bottom}




10/26

Lets try this out

Playing with simple boxes


11/26

Remember the tree?

The default positioning of a box is relativeto its parent

Or said differently, the box are nested


12/26

This parent child nesting means


13/26

Lets try it


14/26

Placing block-level elements

Block-level elements: As wide as parent; linebreak

Examples:


15/26

Placing in-line elements

In-line elements: As wide as contents; no newline

Examples:


16/26

Note1: more about nesting

The top level parent is the browser window When a parent is moved, its children move with it

For now we know how to move boxes with margins, padding But just wait


17/26

Note2: valid XHTML

In XHTML, blocks are outside and in-line elements areinside.

In-line elements must be inside block elements E.g. no ,
, etc. without a

(or other blockelement) around it

Block elements must be outside in-line elements E.g. no

inside a


18/26

Part II: Controlling Box

Position


19/26

1. Static positioning


20/26

Static positioning

h1 { position: static; } .normal { position:

static; }

#normal { position:static; }

p { position: static; }

Lays elements in theplace they wouldnormally (by default)

go

Not so interestingyet


21/26

2. Floating layout


22/26

Floating layout

Float: moves box to left or right margin Other content wraps around it .myclass { float: left; } or #myid { float: right; } or h1 { float: none; }


23/26

Using Float

floats boxes to the left or right, and other content wrapsaround

.imagebox { float: left; } specify widths to make box size independent of

contents

sizes as percent makes a fluid layout better usability: layout adapts to users screen size percents are relative to parents size


24/26

Lets do it!


25/26

Things to remember about

float: float can be set to left | right | none You must set a width for float elements. In the HTML file the floating element mustappearbefore the content that is going to

flow around it.

This can be a disadvantage, why?


26/26

Carls site revisited

CSS:

#bodyText {

line-height: 150%;

text-align: justify;

font-size: 90%;

border: 1px dashed #CC9933;

padding: 5px;

margin-right: 250px;}

#menuBar {

float: right;

width: 205px;

background-color: #CCCC99;

text-align: right;

padding-top: 10px;

padding-left: 10px;

padding-right: 5px;

border: 4px solid #CC9933;

margin-left: 15px;

padding-bottom: 5px;

}

http://www.cs.cornell.edu/lagoze/

Documents

Lecture 10 - Intro to CSSP