Cascading Style Sheets (CSS) Part II IT210: Web-based IT.
-
Upload
amy-weaver -
Category
Documents
-
view
221 -
download
0
description
Transcript of Cascading Style Sheets (CSS) Part II IT210: Web-based IT.
![Page 1: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/1.jpg)
Cascading Style Sheets (CSS)
Part IIIT210: Web-based IT
![Page 2: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/2.jpg)
Some slides modified based upon Charles Severance’s Creative Common’s
Licensed CSS intro slides available in full here:
http://open.umich.edu/sites/default/files/Severance-SI502-W09-Week10-CSS.ppt
![Page 3: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/3.jpg)
A Slight Diversion
![Page 4: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/4.jpg)
MicroformatsA microformat is a web-based approach to semantic markup that seeks to re-use existing HTML/XHTML tags to convey metadata and other attributes in web pages... (Wikipedia)In other words, microformats are standards for using agreed upon “class” names for specific things like geographic coordinates, recipe ingredients, phone numbers…
![Page 6: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/6.jpg)
CSS Positioning
![Page 7: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/7.jpg)
Every CSS element in a document is considered to be
a rectangular box
![Page 8: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/8.jpg)
The Box Model
![Page 9: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/9.jpg)
CSS Box Model Properties• height and width properties size the block element
• margin properties define the space around the block element
• border properties define the borders around a a block element
• padding properties define the space between the element border and the element content
• background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page
http://reference.sitepoint.com/css/boxmodel
![Page 10: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/10.jpg)
Two kinds of boxes (i.e. elements)
• Inline - affects how text looks
•EM, SPAN, actual text or images
•Block - Containers that can be laid out
•P, DIV, TABLE, etc
•CSS can change a tag from inline to block using the “display” property
#navigation li { display: inline;}
![Page 11: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/11.jpg)
Inline Elements
•Flowed with other text
•span, em, strong, cite, a
•Inline tags can be nested as long as they are both inline
•<span class=”important”><cite>Stuff</cite></span>
•Block can contain inline - but inline cannot contain block
![Page 12: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/12.jpg)
Block Level Elements•Starts on its own line - ends
justification and starts a new block
•Can be a container for other elements
•h1 - h6, p, div, blockquote, ul, ol, form
•Blocks can contain other blocks
<div id=”content”> <p>One </p> <p>Two</p></div>
![Page 13: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/13.jpg)
A block contained inside a block
![Page 14: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/14.jpg)
Positioning/Layout Methods•Normal Flow (i.e., static positioning) = default•Relative (“shifted” from normal flow position) •Absolute (position specified; scrolls as usual) •Fixed (position specified; doesn’t scroll)•Floating (floats to a side; content wraps around
it)
![Page 15: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/15.jpg)
Normal Flowof Block-level elements =
verticalNote the collapsed
Margins!
![Page 16: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/16.jpg)
Normal Flow of In-line elements = horizontal (with
wrapping)
![Page 17: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/17.jpg)
Relative Positioning
Overlaps are
allowed!
Original space of
box is still taken up!
p {position:relative;left:20px;top:25x;}
![Page 18: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/18.jpg)
Absolute Positioning Treated as
block-level elements
Removed from
normal flow & can
overlap other
elements
p {position:absolute;left:20px;top:25x;}
![Page 19: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/19.jpg)
Fixed PositioningSame as Absolute
Positioning except the element does not
move when scrolling
p {position:fixed;left:20px;top:25x;}
![Page 20: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/20.jpg)
Floats
Floated elements
are treated like blocks
even if they are
inline elements
span {float:right;width:200px}
![Page 21: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/21.jpg)
Adjacent FloatsMultiple floated
elements stack horizontally (unless you
use the clear property to stack them vertically)
![Page 22: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/22.jpg)
CSS Resources
![Page 23: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/23.jpg)
CSS Validation•You can validate your CSS to make sure it has no syntax
errors
•Browsers will generally quietly ignore bad CSS syntax
•http://jigsaw.w3.org/css-validator
•The validator can save you time and sanity
Source: W3C http://validator.w3.org/check
![Page 24: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/24.jpg)
![Page 25: Cascading Style Sheets (CSS) Part II IT210: Web-based IT.](https://reader036.fdocuments.net/reader036/viewer/2022062317/5a4d1ad97f8b9ab05997433a/html5/thumbnails/25.jpg)
Browser CSS Charts
*Look into Quirks & Strict mode if you’re designing for old browsers