Cascading Style Sheets

+

Cascading Style SheetsPositioning for any XHTML container tag (selected by name, class or id)

+ The Fundamental Objects

Elements nested within elements = boxes within boxes

Size and position of each element is determined by its enclosing box

+ Sizing: width & height

auto • [Number]px • [Number]% p {width:auto;}

Block element box occupies full width of parent box.

p {width:50em;}Block element box 50 ems

wide. em {width:auto;}

Inline element box takes only what their contents need within the parent.

em {width: 40px;}Inline element contents

will ignore unless positioned, but background and some other box-related attributes won’t.

p {height: 80%;}Percentages are relative

to parent dimensions

+What is Positioning?

Controlling the location of elements (boxes) on the screen

+ Default Flow vs. Positioning

Browser-controlled Flow Follow order in which

the elements appear in the code, inserting line breaks before and after blocks

Positioning Make specific

instructions to the contrary

Stone in the stream? Cookie cutter cut-out? Collage?

will be rewarded.<h4>Clean-Up</h4><ol class="level2”><li>Copy (cp, not mv) your project1 directory files (including style sheet) into the <strong>www/imm/project2</strong> directory.</li>

+ Float

+ Relative

+ Absolute

+ Simplest: float

Want the element to hug a side with everything else flowing around it?

.pict {float:right;}float: right; // Aligns element to the

right (other elements wrap around it’s left)

left • right

+ Simplest: float

Want the element to hug a side with everything else flowing around it?

.pict {float:right; clear:right;}clear: right; // Don’t display element

until right side is “clear” of other floaters

left • right • both

Without clear

declaration

+More Complex: position(with top, right, bottom, left) static: follow default flow within parent

Inline just right of previous element Block just under previous element, width of

parent relative: position relative to default

location (0,0 = normal location) Does not change flow location for later

elements absolute: position relative to parent

location (0,0 = upper-left non-static parent corner)

fixed: position relative to <html> tag location (0,0 = upper-left window corner)

+More Complex: position

.parent { background:#cccc66;position: relative;float:right;width:400px;

}.child {background: #66cccc;

position: absolute;top: 50px;left: 20%;right: 30%;

}

+More Complex: position

.parent { background:#66ccff; /* position: static; relative; */float:right;width:400px;

}

.child {background: #6699cc;/* position: static; relative; absolute; fixed; */top: 50px; //from topleft: 20%; //from leftright: 30%; //from right

}

ss

s or rr

sa r a r

f

No fixed right edge to be relative to

+

Did you see those overlaps?Several elements can stack on top of each other in spaceElements appearing later in the code go on top

+ Positioning Effects: Overflow

What happens to a child box within a parent box when the child box is too big?

.parent {overflow:hidden;}

// visible • hidden • scroll hidden

scroll

visible

+ Positioning Effects: Display & Visibility

Control if a box displays as a block, inline or not at alla {display:block;

width:200px;}// block • inline • list-item • none

Make box transparent (same flow)..ghost {visibility:hidden;}

// visible • hidden • collapse

+ Positioning - typical layout

<div class=”columnA"> Column A is here.</div><div class="columnB"> Column B is here.</div>

Column A is here.

Column B is here.


.columnA {width: 45%;}

.columnB {margin-left: 55%;}

Column A is here.

Column B is here.


.columnA {width: 45%; float: left; }

.columnB {margin-left: 55%;}

Column A is here.

Column B is here.

+ Positioning - getting crazy

<div class="shadow">shadow<span class="front">front</span>some stuff <div class="caption">caption</div>

</div>

shadow some stuff

front

caption


.shadow {position: relative;}

.front {position: absolute; top: -10px; left: -10px;}

shadow some stufffront

caption


.shadow {position: relative;}

.front {position: absolute; top: -10px; left: -10px;}

.caption {position: relative; top: -70px;}

shadow some stufffrontcaption

+

Random Useful Stuff

+ CSS Pseudo Classes

a.snowman:link {color: blue;

}a.snowman:visited {

color: purple;}a.snowman:active {

color: red;}a.snowman:hover {

text-decoration: none;color: blue;background-color: yellow;

}

Suggested order: link for an unvisited link. visited for a link that

has already been visited. active for when a link

gains focus (tabbed to or clicked on).

hover for when the cursor is held over a link (not keyboard interactions).

+ CSS Properties I’ve known & loved white-space: normal | pre |

nowrap display: block | compact |

inline | list-item | none max-width: 50em; min-width: 100px; text-transform: capitalize; line-height 1.2;

Also fun… letter-spacing and word-spacing

When I want a truly clean slate for spacing around blocks,

* { padding: 0; margin:0; border: 0;}

If you want set-width content to be centered in container,

margin: 0 auto;

Also, having items belong to more than one class can be handy,

<p class=“disorder minor”>split-personality disorder</p>

+<cite> & <blockquote> elements

<p> Eric Meyer wrote: </p>

<p>

What's so interesting to me is that the guys who decided to focus on the positive went out and did something; those who want to mix in the negative seem to have nothing to offer except complaints.

</p>

<p>An excellent contrast between those who want to build new things and those who want to tear them down.</p>


<p> <cite> Eric Meyer wrote: <cite></p>

<blockquote><p>


</p></blockquote>



<p> <cite> Eric Meyer wrote: <cite></p>

<blockquote cite="http://meyerweb.../social-protocols”><p>


</p></blockquote>


+ Conversation in XHTML

<ol><li><cite>Costello</cite><blockquote><p>Well then who's on

first?</p></blockquote></li><li><cite>Abbott</cite><blockquote><p>Yes.</p></blockquote></li><li><cite>Costello</cite><blockquote><p>I mean the fellow's

name.</p></blockquote></li><li><cite>Abbott</cite><blockquote><p>Who.</p></blockquote></li><li><cite>Costello</cite><blockquote><p>The guy on first.</p></blockquote></li><li><cite>Abbott</cite><blockquote><p>Who.</p></blockquote></li></ol>

Cascading Style Sheets

Documents

Transcript of Cascading Style Sheets