Cascading Style Sheets CSS

CSS Positioning Normal Flow Top -> bottom | left -> right Arranged in the order they appear in the code make room for one another (objects affect the layout of the objects around them)

CSS Positioning float Values: left | right | none Ex: img { float: right; } positions an element to left or right allowing surrounding content to wrap around Floating Inline Elements Must provide width & height values Floating Block Elements Must provide width & height values Elements do not float higher than their reference in the source code

CSS Positioning Clearing floated elements clear Values: left | right | both | none Prevents elements from appearing next to a floated element

CSS Positioning position Values: static | relative | absolute | fixed Static: elements positioned as in normal flow Relative: moves an element relative to its original position space it would have occupied is preserved (empty space left behind) Overlap happens

CSS Positioning position Values: static | relative | absolute | fixed Static: elements positioned as in normal flow Relative: moves an element relative to its original position space it would have occupied is preserved (empty space left behind) Overlap happens Absolute: removes element from normal document flow Absolute positioned elements have NO influence on layout of surrounding elements Positioned relative to its containing element Space it would have occupied is closed Overlap happens Fixed: element fixed in one position (does not scroll) Similar to absolute positioning Offset values are relative to the browser window (viewport)

CSS Positioning offset Values: top | right | bottom | left Defines the distance the element should be moved Ex: em { position: relative; top: 30px; left: 60px; }

CSS Positioning Stacking Order Elements stack in the order they appear in the source doc. Z-index (change the stacking order) Higher the z-index - higher the element will appear in the stack

CSS Page Layout Liquid (fluid): Page reflow in browser window Advantage: Design for any monitor resolution Disadvantage: may end up with long lines of text (uncomfortable to read) Fixed: page stays a specific pixel width Advantage: predictable layout, more control Disadvantage: right edge may not be seen on smaller browsers Text elements may be re-sized affecting layout Elastic: layout expands and contracts with size of text (em based) Advantage: provides consistent layout while allowing flexibility in text size Disadvantage: images can’t be dynamically resized

div … Used like a container to group content Gives context to the elements in the grouping Give it a descriptive name with id or class Ex: can be used to group an with to show they are conceptually related Ex: can be used to group a section of content for context, structure or layout purposes.

span … Generic inline element Used to add meaning to content Ex: Andy: Joe:

Element identifiers - id Id identifier Used to identify a piece of data Unique element in the document Value of id must be used only once in a document (masthead & navigation here) (main content elements here) (list of links here) (news sidebar items here) (copyright info, etc)

Element identifiers - class class identifier Used to group similar elements Multiple elements may share a class name The Complete Manual of Typography, James Felici A combination of type history and examples of good and bad type. A combination of type history and examples of good and bad type.

Let’s see how this works…