lecture 10 - intro to cssp
TRANSCRIPT
-
8/22/2019 Lecture 10 - Intro to CSSP
1/26
Advanced Styling and Layout
with CSS
INFO 1300:
Introductory Web Design and
Programming
-
8/22/2019 Lecture 10 - Intro to CSSP
2/26
Part I: Understanding basic or
default layout
-
8/22/2019 Lecture 10 - Intro to CSSP
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: , ,
-
8/22/2019 Lecture 10 - Intro to CSSP
4/26
Browser default layout
-
8/22/2019 Lecture 10 - Intro to CSSP
5/26
Thinking in terms of boxes
-
8/22/2019 Lecture 10 - Intro to CSSP
6/26
Well not really.
-
8/22/2019 Lecture 10 - Intro to CSSP
7/26
But at this point we dont have
control over those boxes
And the boxes are pretty simple
-
8/22/2019 Lecture 10 - Intro to CSSP
8/26
We need to understand the
structure of the boxesThe box model
-
8/22/2019 Lecture 10 - Intro to CSSP
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
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.
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.
background-color
border-color border-width border-style
Nullam pretium lectus id purus. Integer vitae ipsum.,
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.
Pellentesque est. Ut semper lobortis erat.
Nullam pretium lectus id purus. Integer vitae ipsum.,
Nullam pretium lectus id purus. Integer vitae ipsum.,
padding {-left right top bottom}
Nullam pretium lectus id purus. Integer vitae ipsum.,
Nullam pretium lectus id purus. Integer vitae ipsum.,
margin {-left right top bottom}
Nullam pretium lectus id purus. Integer vitae ipsum.,
Nullam pretium lectus id purus. Integer vitae ipsum.,
-
8/22/2019 Lecture 10 - Intro to CSSP
10/26
Lets try this out
Playing with simple boxes
-
8/22/2019 Lecture 10 - Intro to CSSP
11/26
Remember the tree?
The default positioning of a box is relativeto its parent
Or said differently, the box are nested
-
8/22/2019 Lecture 10 - Intro to CSSP
12/26
This parent child nesting means
-
8/22/2019 Lecture 10 - Intro to CSSP
13/26
Lets try it
-
8/22/2019 Lecture 10 - Intro to CSSP
14/26
Placing block-level elements
Block-level elements: As wide as parent; linebreak
Examples:
-
8/22/2019 Lecture 10 - Intro to CSSP
15/26
Placing in-line elements
In-line elements: As wide as contents; no newline
Examples:
-
8/22/2019 Lecture 10 - Intro to CSSP
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
-
8/22/2019 Lecture 10 - Intro to CSSP
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
-
8/22/2019 Lecture 10 - Intro to CSSP
18/26
Part II: Controlling Box
Position
-
8/22/2019 Lecture 10 - Intro to CSSP
19/26
1. Static positioning
-
8/22/2019 Lecture 10 - Intro to CSSP
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
-
8/22/2019 Lecture 10 - Intro to CSSP
21/26
2. Floating layout
-
8/22/2019 Lecture 10 - Intro to CSSP
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; }
-
8/22/2019 Lecture 10 - Intro to CSSP
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
-
8/22/2019 Lecture 10 - Intro to CSSP
24/26
Lets do it!
-
8/22/2019 Lecture 10 - Intro to CSSP
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?
-
8/22/2019 Lecture 10 - Intro to CSSP
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/