Cascading Style Sheets

Cascading Style Sheets Positioning 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 Without clear declaration 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

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 parentlocation (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 a f s s or r s r r a .parent { background:#66ccff; /* position: static; relative; */ float:right; width:400px; } .child { background: #6699cc; /* position: static; relative; absolute; fixed; */ top: 50px; //from top left: 20%; //from left right: 30%; //from right } s r No fixed right edge to be relative to

Did you see those overlaps? Several elements can stack on top of each other in space Elements 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 visible scroll

Positioning Effects: Display & Visibility • Control if a box displays as a block, inline or not at all a {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.

Positioning - typical layout .columnA {width: 45%;} .columnB {margin-left: 55%;} Column A is here. Column B is here.

Positioning - typical layout .columnA {width: 45%; float: left; } .columnB {margin-left: 55%;} Column B is here. Column A 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

Positioning - getting crazy .shadow {position: relative;} .front {position: absolute; top: -10px; left: -10px;} front shadow some stuff caption

Positioning - getting crazy .shadow {position: relative;} .front {position: absolute; top: -10px; left: -10px;} .caption {position: relative; top: -70px;} front shadow some stuff caption

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>

<cite> & <blockquote> elements <p> <cite> Eric Meyer wrote: <cite></p> <blockquote><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></blockquote> <p>An excellent contrast between those who want to build new things and those who want to tear them down.</p>

<cite> & <blockquote> elements <p> <cite> Eric Meyer wrote: <cite></p> <blockquote cite="http://meyerweb.../social-protocols”><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></blockquote> <p>An excellent contrast between those who want to build new things and those who want to tear them down.</p>

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