Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
EASINGINTO WEBDEVELOPMENT6.6 CSS
1   INTRODUCTION    2   HTML    3   TABLES    4   FORMS    5   HTTP    6   CSS    7   CSS FRAMEWORKS    8   DIGITAL MEDIA2...
What is CSS?3       Cascading St l Sh t (CSS) i the W3C        C      di Style Sheets          is h W3C-approved d       ...
Why CSS?4       There are numerous advantages of using CSS                                       f       CSS:         Gr...
So why is separating appearance from content so    important?    i         ?5        Currently ( ith t CSS) th vast major...
Example Problem6    What is the actual content of this document?
Example Problem7       This page’s content:           Date           Image           News Navigation Links            ...
HTML for the Content8    <div id=“news”>        <div id=“newsNavigationLinks”>         <ul>             <li><a href=???>Ne...
Actual HTML (which contains content and presentation)9    <table width 720 border="0" align="center" cellpadding="0" cells...
Mixing Presentation with Content10        Combining presentation and content makes the HTML h d         C b              ...
Mixing Presentation with Content11        In fact the entire main content pages (thousands of pages) of the www.mtroyal.c...
Mixing Presentation with Content12        To k         T make a site-wide change to the font face, size, or              ...
What does cascading mean?13        CSS are considered cascading because the         styles can use a hierarchy which pass...
What does cascading mean?                       g          body         font-face: Arial, Helvetica, sans-serif; color: bl...
CSS Rules15        Style sheets consist of one or more rules.        Each rule defines what an element should look like ...
CSS Rule Placement16        There are three ways in which rules can be applied         to a document:          Inlinesty...
Inline Styles17        Are added to a tag via the style attribute.           <h2 style="color: green;">           <p   st...
Embedded Styles18        Are added in the head of the page and affects all         instance of the defined tag.          ...
External Styles19        Are t d in         A stored i an external fil and linked or imported i t a page.                ...
CSS Rule Composition20        A CSS rule i composed of two parts:                 l is        d ft        t            S...
Document Structure21        As mentioned, XHTML should describe the structure         and content of the document, while ...
Document Structure22                       html                                                   body is an ancestor of i...
Selectors23        Selectors are what connect the style definitions to         the specific tags that are to be modified....
HTML Selectors24        You h         Y have already seen HTML selectors. These are the styles                     l d   ...
Class Selectors25        A class selector is used to specify the styles of         elements that have been classified usi...
Class Selectors Examples26        An         A HTML element can be classified using the class                    l       ...
Class Selectors27        You can also specify multiple classes via the class         attribute.     .box {       box {   ...
ID Selectors28        An ID selector is used to target specific instances         (those with the ID) rather than classif...
ID Selectors Examples29        An HTML element can be identified using the id         attribute.          The following ...
ID Selectors Examples30        We can also combine HTML and ID selectors.          p#5511 { font‐style: italic; color: bl...
Class versus ID selectors31        Classes can be applied to any number of elements.          Use classes to style a num...
Contextual Selectors32        There are specialized contextual selectors:          Descendant   selectors          Chil...
Contextual Selectors33        These are rules that operate only in specific         structural or contextual situations. ...
Descendant Selectors34        Instead, we could use a contextual selector.          For instance, we could use a descend...
Child Selectors35        Matches/selects all elements that are immediate         child of a specified element, including ...
Child Selectors36     <div class="box">        <p>This text will be green</p>        <p>This text will be green as well</p...
Adjacent Sibling Selectors37        Selects all elements that are the adjacent (i.e.,         follows immediate) siblings...
Attribute Selectors38        Will match elements on the basis of the presence of         an attribute or a match of the a...
Attribute Selectors39            <label>Name </label>            <label>Name </label>            <input type="text" /><br/...
Pseudo Classes40        Pseudo classes refer to a variety of additional         labels that can be added to a selector ba...
Pseudo Classes41        In CSS 1, only the <a> element supports four         different pseudo-classes         A  link th...
Pseudo Classes42          CSS 2 introduced a few other pseudo classes (not           uniformly supported by IE 7):       ...
Selectors Exercise43     <div id="logo">        <img src="whatever.gif" />                    .extra { color: green; }    ...
div.extra { color: green; }     .extra { color: green; }      extra { color: green; }                                     ...
#logo { color: green; }                               div p { color: green; }                                             ...
div p:first‐child { color: green; }div p:first‐child { color: green; }                                                    ...
h2>p { color: green; }   div>p { color: green; }                                                        <div id="logo">   ...
div[class] { color: green; }                                    <div id="logo">                                       <img...
Font Formatting with CSS49        font formatting properties and possible values                                         ...
Font Formatting with CSS50        The font-family property should always specify a         generic font family name in ca...
Platform Considerations51        Do not assume that a font you have is one that is on         the viewers computer.      ...
CSS Sizes52        Font sizes (and all CSS sizes) can be specified using         absolute or relative units          Rel...
Sizing Fonts53        Generally, the most common approach is to set the         size in pixels.         h2 { font-size: 1...
Sizing Fonts54        Not all users have the same eye strength.          Browsers  provide user with ability to resize f...
Sizing Fonts55        It is better to use a relative unit for sizing fonts, even         though it is initially a bit tri...
Percentage Size56        This is a percentage of the elements parents font         size. body { font-size: 10px; }       ...
Percentage Size57        Unfortunately, the previous example doesnt allow         resizing due to absolute setting of bod...
Percentage Size58        body { font-size: 10px; }               body { font-size: 100%; }              #logo { font-siz...
Percentage Size59        Advantage to this approach is that you can change         the overall size of text in your site ...
Em sizes60        As an alternative to percentages, you can use em         sizes.          An  em unit when used for siz...
em sizes61     body { font-size: 1em; }     #logo { font-size: 1.2em; }     h2 { font-size: 1.5em; }     .dwarf { font-siz...
Conclusion: Font Sizes62        Set the base body font-size relatively (i.e., using         keyword, em, or percentage). ...
Text Formatting63        text formatting properties and possible values.     text-indent: [length] | [percentage]     let...
Block Level Inline Level     Block-Level vs Inline-Level elements64        Block-level elements          Generate    an ...
Element Boxes65        CSS assumes that every element generates a         rectangular box called the element box (sometim...
Element Boxes66        CSS assumes that every HTML element exists in a         rectangle called the element box.         ...
Element Box67     Molly Holzschlag,”Thinking Outside the Grid”, http://www.alistapart.com/articles/outsidethegrid
Element Box68        You can adjust the following parts of the box with         CSS          Width    and Height        ...
Width and Height69        You can change the width and height of the element         box in quite a few different ways.  ...
Width and Height70        Unfortunately, the width and height properties have         a different meaning in CSS standard...
Border71        Can specify each axis individually, e.g.         border-top-style: dashed;         border left color:    ...
Padding72        The space between the border and the content area        Can specify each side individually or all at o...
Margins73        Margins provide separation between element boxes        Can specify each side individually or all at on...
Margin Demo              <h1>Margin demo</h1>74            <p>Cascading Style Sheets (CSS) is the W3C-approved            ...
Padding versus Margins75                         padding                         margin
Collapsing Margins76        For adjacent vertical block-level elements in the         normal document flow, only the marg...
Collapsing Margins                                 <div>before</div>                                                      ...
Collapsing Margins78     .box {        margin: 10px;                                                    <div class="box a"...
Collapsing Margins79        You can stop vertical margins collapsing by adding         a border or padding.         .box ...
Collapsing Margins80           However, IE 7 will NOT collapse margins if the            collapsed element has layout (i....
Collapsing Margins81        Also, margins don’t collapse (in all browsers) for:          floated  elements          abs...
Collapsing Margins82     .box {       margin: 10px;       float: left;     }                           Firefox, Safari, Ch...
Can I just forget IE 7 (and 6)?83     http://stats.wikimedia.org/wikimedia/squids/SquidReportClients.htm     http://www.st...
Element box size revisited84        Recall that in CSS standard, the width and height         properties set the size of ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   ...
Containing Boxes86        Block boxes act as a containing block for any         boxes within them.         <div>         ...
Positioning87        You can change the position of an element box via         the position, top, left, bottom, and right...
Positioning Property Values88       static         Eachposition is laid out based on the normal flow of the          doc...
Static Positioning89        Element boxes flow vertically starting at the top         of their containing block with each...
Positioning90        positioned elements are placed in relation to their                  d l             l d        l   ...
<style type="text/css">        #logo {          border: 1                  1px solid black; width: 300                    ...
<style type="text/css">        #logo {          border: 1                  1px solid black; width: 300                    ...
<body>    <div id="logo">       <h1><span>Pearson Education</span></h1>       <h2><span>Book Rep System</span></h2>    </d...
<body>                                                                     <div id="logo">                                ...
20px    100px                                                                           <style type="text/css">           ...
100px      20px     <style type="text/css">                       Without #logo h2 positioning       #logo {       #l     ...
Positioning97        Absolute positioning is sometimes used to position an         element off-screen.          An  exam...
Floats98               Floating is achieved by setting the float property on                an elements style to either l...
Clearing Floats99        Block-level elements will continue to wrap around         floated element for the entire height ...
Clearing Floats100         The CSS property clear forces an element to          display beneath any floated elements.    ...
Clear101         clear: l f           l     left             The element is moved below the bottom outer edge of any    ...
Floats102          Floated boxes will move to the left or right until           their outer edge touches the containing b...
Floating Left and Right103         You can float items in a container both left and          right.                      ...
Floating Left and Right104         Once you’ve floated all the elements within a          container, that container will ...
Floating Left and Right105         To avoid this problem, set an explicit height for the          containing block.      ...
Multi Column      Multi-Column Layouts106         Two approaches for creating multi-column layouts:           Using floa...
Multi Column      Multi-Column Layouts107         A complicated float-based layout:           canbe tricky and fragile (...
Source Order108         refers to how page elements are arranged, or          ordered in the source.         This is imp...
Upcoming SlideShare
Loading in …5
×

WEB I - 06 - CSS

2,803 views

Published on

CSS for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.

Published in: Technology, Education

WEB I - 06 - CSS

  1. 1. EASINGINTO WEBDEVELOPMENT6.6 CSS
  2. 2. 1 INTRODUCTION 2 HTML 3 TABLES 4 FORMS 5 HTTP 6 CSS 7 CSS FRAMEWORKS 8 DIGITAL MEDIA2 9 USABILITY
  3. 3. What is CSS?3  Cascading St l Sh t (CSS) i the W3C C di Style Sheets is h W3C-approved d method for specifying and enriching the visual p presentation of web pages. p g  CSS is not HTML but does enhance HTML by allowing you to redefine how pre-existing tags work.  A style sheet is written according to the grammar defined in the W3C CSS 1 or CSS 2 recommendations.  It I can b contained in : be i di  A text file (which has a .css suffix)  Embedded within <style> element contained within the <head> element  Inline within any element via the style= attribute.
  4. 4. Why CSS?4  There are numerous advantages of using CSS f CSS:  Greater control over textual effects and page layout.  Separates document content (HTML) from its appearance (CSS). R d i Reducing d li i of style commands. duplication f l d  Increase ease in web site maintenance.  The disadvantages of CSS is: f  Harder to learn than straight HTML  Some unevenness with browser support  IE prior to vers. 7 in particular has several CSS bugs
  5. 5. So why is separating appearance from content so important? i ?5  Currently ( ith t CSS) th vast majority of a given HTML C tl (without CSS), the t j it f i document’s markup is devoted to formatting/layout.  These types of documents are very hard to maintain and change.  Using markup, there is no easy way to replicate a design change over an entire site site.  Using markup for layout (i.e., tables) creates fragile and hard to change layouts.  These documents are not accessible (i.e., not easily usable by people with visual disabilities).  These documents are hard to index (e.g., by search engines) (e g accurately.  Google “is in effect the world’s most active blind user” (Meyer, 3). Eric Meyer, Cascading Style Sheets, 2nd Ed,  (O’Reilly, 2004).
  6. 6. Example Problem6 What is the actual content of this document?
  7. 7. Example Problem7  This page’s content:  Date  Image  News Navigation Links  Link Newsroom  Link Events  Link Media Centre  Link Mount Royal Experts  News & Events  Feature Story  Policy Studies program joins forces with Students Association to host all-candidates debate  Just days before Canadians cast their votes in our federal election, Mount Royal College will host an all- all candidates debate  Link  Image  Caption  Tami Rothery VP Student Life etc  Newsroom  Link  Link  Link  Link  Link
  8. 8. HTML for the Content8 <div id=“news”> <div id=“newsNavigationLinks”> <ul> <li><a href=???>NewsRoom</a></li> <li><a href=???>Events</a></li> etc </ul> </div> <p>Date</p> <img src=???> <h1>News & Events</h1> <div id=“story”> <h2>Feature Story</h2> y <img> <p id=caption>Tami Rothery VP Student Life etc</p> <p><em>Policy Studies program joins forces with Students Association  to host all‐candidates debate</em></p> <p>Just days before Canadians cast their votes in our federal  election, Mount Royal College will host an all‐candidates debate</p> , y g p <a href=???>More</a> </div> <div id=“newsLinks”> <h2>Newsroom</h2> <ul> <li><a href=???>Current News</a></li> / / <li><a href=???>News Archive</a></li> etc </ul> </div> </div>
  9. 9. Actual HTML (which contains content and presentation)9 <table width 720 border="0" align="center" cellpadding="0" cellspacing="0" valign="top"><tr><td valign="top" width="620" <table width="720" border 0  align center  cellpadding 0  cellspacing 0  valign top ><tr><td valign top  width 620   height="9"><img src="images/spacer.gif" width="620" height="9" border="0"></td></tr><tr><td valign="top" width="620"  height="29"><img src="images/spacer.gif" width="63" height="5" border="0"><script language="JavaScript"><small><font color=white  face=Arial size=1><b>January 11, 2006</b></font></small></td></tr><tr><td valign="top" width="620" height="98"><img  src="images/spacer.gif" width="620" height="98" border="0" alt="News & Events"></td></tr></table></td></tr></table><table  width="720" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="100" valign="top" bgcolor="#003399"><a  _ g _ jpg _ g _ jpg g href="newsroom.php" onMouseOver="document.ne_new.src=images/ne_newr.jpg" onMouseOut="document.ne_new.src=images/ne_new.jpg"><img  src="images/ne_new.jpg" alt="Newsroom" title="Newsroom" name="ne_new" border="0"></a><br><a href="events.php" onMouseOver="document.ne_eve.src=images/ne_ever.jpg“ onMouseOut="document.ne_eve.src=images/ne_eve.jpg"> <img  src="images/ne_eve.jpg" alt="Events" title="Events" name="ne_eve" border="0"></a><br> <a href="mediarelations.shtml" onMouseOver="document.ne_med.src=images/ne_medr.jpg"  onMouseOut="document.ne_med.src=images/ne_med.jpg"><img src="images/ne_med.jpg" alt="Media Centre" title="Media Centre"  name="ne_med" border="0"></a><br><a href="experts.php" onMouseOver="document.ne_exp.src=images/ne_expr.jpg"  onMouseOut="document.ne_exp.src=images/ne_exp.jpg"> <img src="images/ne_exp.jpg" alt="Mount Royal Experts" title="Mount Royal  Experts" name="ne_exp" border="0"></a></td><td width="35" valign="top"><img src="images/homepage_top1.jpg"></td><td width="550"  valign="top"><font face="arial" size="2"><img src="images/homepage_top2.jpg"><br><table width="550" align="center" cellpadding="0"  cellspacing="0" border="0"><tr><td width="355" valign="top" colspan="3"><img src="images/title_featurestory.jpg" alt="Feature  Story"></td><td width="35" valign="top"><img src="images/featureshadow1.jpg"></td><td width="160" valign="top"><img  src="images/title_newsroom.jpg" alt="Newsroom"></td></tr><tr><td width="355" height="163" valign="top" colspan="3"  background= images/feature_bg.jpg ><table width= 355 align center cellpadding 0 cellspacing 0 border 0 ><tr><td width= 355 background "images/feature bg jpg"><table width "355" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width "355"  height="12" colspan="5" valign="top"><img src="images/spacer.gif" width="355" height="12" border="0"></td></tr><tr><td width="12"  height="139" valign="top"><img src="images/spacer.gif" width="12" height="139" border="0"></td><td width="147" height="139"  valign="top"><img src="featurestories/images/candidatedebate.jpg" border="0" alt="Tami Rothery, V.P. Student Affairs and Jackie  Chuckrey, SAMRC President overlook the location of the upcoming candidates debate."></td><td width="12" height="139"  valign="top"><img src="images/spacer.gif" width="12" height="139" border="0"></td><td width="171" height="139" valign="top"><font  size 2 face="arial"><strong>Policy Studies program joins forces with Students Association to host all‐candidates size="2" face arial ><strong>Policy Studies program joins forces with Students  Association to host all candidates  debate</strong></font>  <p><font size="1" face="arial">Just days before Canadians cast their votes in our federal election, Mount  Royal College will host an all‐candidates debate... &nbsp;&nbsp;> <a href="featurestories/candidatedebate.shtml">More</a></font></p>   </td><td width="12" height="139" valign="top"><img src="images/spacer.gif" width="12" height="139" border="0"></td></tr><tr><td  width="355" height="12" colspan="5" valign="top"><img src="images/spacer.gif" width="355" height="12"  border="0"></td></tr></table></td><td width="35" valign="top"><img src="images/featureshadow2.jpg"></td><td width="160"  g p g g p g g p p valign="top"><font face="arial" size="1"><img src="images/spacer.gif" width="160" height="15"><br><a href="newsroom.php">Current  News</a> <img src="images/spacer.gif" width="160" height="5"><br><a href="archive.php">News Archives</a> <img  src="images/spacer.gif" width="160" height="5"><br><a href="/alumni/e_news.shtml">Alumni News</a> <img src="images/spacer.gif"  width="160" height="5"><br><a href="http://cougars.mtroyal.ca/">Cougar News</a> <img src="images/spacer.gif" width="160"  height="5"><br><a href="/conservatory/news.php">Conservatory News</a></font></td></tr></table>
  10. 10. Mixing Presentation with Content10  Combining presentation and content makes the HTML h d C b d k h harder to understand and to maintain.  Almost all of this sample consists of position markup (all the table tags), formatting markup, and gratuitous images (single pixels for spacing, simple text images for headings).  This little code snippet has 8 font tags: each one made the same change (white color, font name=Arial and size=small).  The entire page in fact had 20 font tags doing the same thing.  To change to a different color and font and size, we will have to change 60 attributes in a total of 20 tags.  With CSS Wi h CSS, we can specify this font rule just once. if hi f l j  To make the same change we only have to make one change to three CSS rules.
  11. 11. Mixing Presentation with Content11  In fact the entire main content pages (thousands of pages) of the www.mtroyal.ca site used to have tens of thousands of font tags, almost all of which were one of the following: <font face="Arial, Helvetica, sans-serif" size=2> <font face="Arial, Helvetica, sans-serif" size=1> <font face="Arial, Helvetica, sans-serif"> <font face "Arial"> face="Arial"> <font size=2> <font size=1> <font size=4> <font face="Arial" size=2 bgcolor=white> <font face="Arial" size=2 bgcolor=black> <font face="Arial" size=1 bgcolor=white> <font face="Arial" size=1 bgcolor=black> <font face="Arial, Helvetica, sans-serif" size=2 bgcolor=black> <font face="Arial, Helvetica, sans-serif" size=1 bgcolor=black> <font face="Arial" size=4 bgcolor=white> <font face="Arial" size=4 bgcolor=black> o t ace a s e bgco o b ac
  12. 12. Mixing Presentation with Content12  To k T make a site-wide change to the font face, size, or i id h h f f i color, for www.mtroyal.ca site would take hundreds of very tedious hours. y  To change the font used in all the images would again take hundreds of very tedious hours  If the same site had been designed to separate presentation from content and to properly structured that content, the same change would take under a content minute.  An entire site can use a single CSS file.  If the CSS is properly cascaded, we would only have to make a few changes to that one file.
  13. 13. What does cascading mean?13  CSS are considered cascading because the styles can use a hierarchy which passes styles down to the elements elements.  Previously defined styles are applied unless a new, overriding style change is made.
  14. 14. What does cascading mean? g body font-face: Arial, Helvetica, sans-serif; color: black;14 h1 font-size:14pt; p font-size:10pt; div id=story font-size:12pt; font-weight: bold; div id=news background:white; div id=story position: relative; left: 125px; width: 200px p font-weight: normal;
  15. 15. CSS Rules15  Style sheets consist of one or more rules.  Each rule defines what an element should look like and how it should behave in the browser window.  The following contains two rules.  The first indicates that the use of h2 should result in the text being colored green. The second indicates text in a b i l d Th d i di i p tag should be 12pt Arial or some sans-serif font. h2 { color: green; } p { font-size: 12pt; font-face: Arial, sans-serif; }
  16. 16. CSS Rule Placement16  There are three ways in which rules can be applied to a document:  Inlinestyles  Embedded styles y  External styles
  17. 17. Inline Styles17  Are added to a tag via the style attribute. <h2 style="color: green;"> <p style="font-size: 12pt; font-face: Arial, sans-serif;">  Affects only that instance of the tag.  Not recommended recommended.
  18. 18. Embedded Styles18  Are added in the head of the page and affects all instance of the defined tag. <head> <style type="text/css"> h2 { color: green; } p { font-size: 12pt; font-face: Arial sans-serif; Arial, } </style> </head>
  19. 19. External Styles19  Are t d in A stored i an external fil and linked or imported i t a page. t l file d li k d i t d into  Generally the best approach since a single external stylesheet file can be used in multiple pages.  They thus provide a way to achieve consistent styling across an entire site.  Two approaches pp  Linking <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>  Importing <style type="text/css"> @import url(styles.css); @import url(colours.css); </style>
  20. 20. CSS Rule Composition20  A CSS rule i composed of two parts: l is d ft t  Selector  Declaration block  The selector defines which part of the document is to be affected.  The declaration block consists of one or more declarations.  Each declaration is separated by semicolons semicolons.  A declaration is a combination of CSS property and a value for that property. Declaration Block h1 { color: green; font-size: 24pt; } Selector Declaration property value
  21. 21. Document Structure21  As mentioned, XHTML should describe the structure and content of the document, while CSS describes its appearance.  Understanding this XHTML structure is a necessary part of mastering CSS.  XHTML documents contain a hierarchy of elements M y
  22. 22. Document Structure22 html body is an ancestor of img head body body is the parent of ul title link h1 p a ul ul is a child of body a img li li img is a descendent of body
  23. 23. Selectors23  Selectors are what connect the style definitions to the specific tags that are to be modified.  There are three basic forms of selectors:  HTML selectors  Class selectors  ID select
  24. 24. HTML Selectors24  You h Y have already seen HTML selectors. These are the styles l d l Th h l that directly effect an HTML tag element. h1 { color: red; }  These selectors can also be grouped into comma-separated lists (this modifies all elements in list). h2, h3, p { color: blue; }
  25. 25. Class Selectors25  A class selector is used to specify the styles of elements that have been classified using the class attribute in the HTML tags.  Theseallow you to define styles independently of the HTML elements. period indicating list of property- st o p ope ty a class selector value pairs .classname { property: value; } name of class selector
  26. 26. Class Selectors Examples26  An A HTML element can be classified using the class l b l ifi d i h attribute.  The following shows that two tag instances have been classified as warning tags: <em class="warning">Do not apply to exposed skin.</em> <h4 class="warning">Do not induce vomitting.</h4> <h4 l " i ">D t i d itti </h4>  With these elements classified, we can set up a style for the class “warning”: warning : .warning { font‐size: 36pt; color: red; }  We can also combine HTML and class selectors to more narrowly target some classes: b.warning { font size: 36pt; color: red; } b warning { font‐size: 36pt; color: red; } h4.warning { font‐size: 48pt; color: red; }
  27. 27. Class Selectors27  You can also specify multiple classes via the class attribute. .box { box { <div class= box a > <div class="box a"> margin: 10px; <div class="box b"> } .a { background: green; } .b { background: red; }
  28. 28. ID Selectors28  An ID selector is used to target specific instances (those with the ID) rather than classifying elements # symbol indicating list of property- an ID selector value pairs #idname { property: value; } name off ID selector
  29. 29. ID Selectors Examples29  An HTML element can be identified using the id attribute.  The following shows that this tag instance has been identified with the value 5511: <p id="5511">hot sales on now!</p>  With this element identified, we can set up a style for the id “5511” h “5511”: #5511 { font-style: italic; color: blue; }
  30. 30. ID Selectors Examples30  We can also combine HTML and ID selectors. p#5511 { font‐style: italic; color: blue; } #5511 { font‐style: italic; color: blue; } Both of these do the same thing. The fi t Th first one is however more self- i h lf documenting.
  31. 31. Class versus ID selectors31  Classes can be applied to any number of elements.  Use classes to style a number of different but related elements.  IDs are used once and only once in an HTML y document.  Use ids to style a unique element uniquely.
  32. 32. Contextual Selectors32  There are specialized contextual selectors:  Descendant selectors  Child selectors  Adjacent Sibling selectors j g  Attribute selectors
  33. 33. Contextual Selectors33  These are rules that operate only in specific structural or contextual situations.  Forinstance, in the example below, lets change only the <h2> element within the <div> to green 24pt text. <div id="logo"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> </div> <h2>Technical Books</h2>  How would we do this?  We could add an id to the specific h2 element (or a class if we had multiples). However, over time, our markup and css can become too bloated (and too complicated) with ids and classes.
  34. 34. Descendant Selectors34  Instead, we could use a contextual selector.  For instance, we could use a descendant selector, which selects/matches all elements that are descendants of an element. <div id="logo"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> </div> <h2>Technical Books</h2> / a div that contains a h2 div h2 {color: green; font-size: 24pt; } h2 is a descendant of the di div h2 contained within a div div is the ancestor of the h2
  35. 35. Child Selectors35  Matches/selects all elements that are immediate child of a specified element, including elements that are not direct descendants. <div id="logo"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> </div> <h2>Technical Books</h2> / NOT Supported by IE 6 div>h2 {color: green; font-size: 24pt; } or earlier h2 is direct child of div
  36. 36. Child Selectors36 <div class="box"> <p>This text will be green</p> <p>This text will be green as well</p> <div class="title"> <p>this text will be green as well if we use descendant selector,  <p>this text will be green as well if we use descendant selector but if we use a child selector it will be red. </p> </div> </div> <p>What color will I be?</p> p { p { color: red; } ; } p { color: red; } .box p { color: green; } .box>p { color: green; } b { l }
  37. 37. Adjacent Sibling Selectors37  Selects all elements that are the adjacent (i.e., follows immediate) siblings of an element. <h1>Pearson Education</h1> / <p>This is the first</p> Only the first <p> will be <p>This is the second</p> selected h1+p {color: green; font-size: 24pt; } NOT Supported by IE 6 or earlier p is direct adjacent sibling of h1
  38. 38. Attribute Selectors38  Will match elements on the basis of the presence of an attribute or a match of the attribute value. input[type="text"] { background‐color: yellow; color: red; } NOT Supported by IE 6 or earlier
  39. 39. Attribute Selectors39 <label>Name </label> <label>Name </label> <input type="text" /><br/> <label>Phone </label> <input type="text" /><br/> <label>Password </label> <input type="password" /><br/> <input type="submit" /> Matches elements that contain that attribute (regardless of its value) Matches only elements with a particular attribute value input[type] { background‐color: yellow; color: red; input[type="text"] { } background‐color: yellow; color: red; }
  40. 40. Pseudo Classes40  Pseudo classes refer to a variety of additional labels that can be added to a selector based on its user state.  Indicated via a colon (:) ()
  41. 41. Pseudo Classes41  In CSS 1, only the <a> element supports four different pseudo-classes A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways.  E.g. a:link {color: blue;} a:visited {color: purple;} a:hover {color: red; text-decoration: none; font-weight:bold; } a:active {color: olive}  Order of these is important  Link Link, visited hover active visited, hover,
  42. 42. Pseudo Classes42  CSS 2 introduced a few other pseudo classes (not uniformly supported by IE 7):  :focus  :first-child  :first-letter <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </ l> <h1>Heading Is Here</h1> input[type="text"]:focus { border: 2px solid blue; li:first‐child { h1:first‐letter { } color: red; color: green; } }
  43. 43. Selectors Exercise43 <div id="logo"> <img src="whatever.gif" /> .extra { color: green; } <p>tagline</p> </div> div.extra { color: green; } <div class="header"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> #logo { color: green; } <p>Some random text.</p> <p>here is some more.</p> </div> div p { color: green; } p { g ; } <p>My name is Ishmael.</p> <p>Some years ago</p> div p:first‐child { color: green; } <div class="extra"> <p>Some more random text.</p> p { g ; } h2+p { color: green; } <h2>Products</h2> <p>This paragraph will be displayed.</p> <p>So will this one.</p> h2>p { color: green; } <div id="subtext"> <p>never mind how long</p> p g p div>p { color: green; } p { g ; } </div> </div> div[class] { color: green; } <p class="extra">having little or no money</p>
  44. 44. div.extra { color: green; } .extra { color: green; } extra { color: green; } <div id="logo"> <img src="whatever.gif" /> <p>tagline</p> </div> <div class="header"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> <p>Some random text.</p> <p>here is some more.</p> </div> <p>My name is Ishmael.</p> <p>My name is Ishmael </p> <p>Some years ago</p> <div class="extra"> <p>Some more random text.</p> <h2>Products</h2> <p>This paragraph will be displayed.</p <p>So will this one.</p> <div id="subtext"> <p>never mind how long</p> </div> </div> <p class extra >having little or no mone <p class="extra">having little or no mone44
  45. 45. #logo { color: green; } div p { color: green; } <div id="logo"> <img src="whatever.gif" /> <p>tagline</p> </div> <div class="header"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> <p>Some random text.</p> <p>here is some more.</p> </div> <p>My name is Ishmael.</p> <p>My name is Ishmael </p> <p>Some years ago</p> <div class="extra"> <p>Some more random text.</p> <h2>Products</h2> <p>This paragraph will be displayed.</p> <p>So will this one.</p> <div id="subtext"> <p>never mind how long</p> </div> </div> <p class extra >having little or no money</ <p class="extra">having little or no money</45
  46. 46. div p:first‐child { color: green; }div p:first‐child { color: green; } <div id="logo"> h2+p { color: green; } <img src="whatever.gif" /> <p>tagline</p> </div> <div class="header"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> <p>Some random text.</p> <p>here is some more.</p> </div> <p>My name is Ishmael.</p> <p>My name is Ishmael </p> <p>Some years ago</p> <div class="extra"> <p>Some more random text.</p> <h2>Products</h2> <p>This paragraph will be displayed.</p> <p>So will this one.</p> <div id="subtext"> <p>never mind how long</p> </div> </div> <p class extra >having little or no money</ <p class="extra">having little or no money</46
  47. 47. h2>p { color: green; } div>p { color: green; } <div id="logo"> <img src="whatever.gif" /> <p>tagline</p> </div> <div class="header"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> <p>Some random text.</p> <p>here is some more.</p> </div> <p>My name is Ishmael.</p> <p>My name is Ishmael </p> <p>Some years ago</p> <div class="extra"> <p>Some more random text.</p> <h2>Products</h2> <p>This paragraph will be displayed.</p> <p>So will this one.</p> <div id="subtext"> <p>never mind how long</p> </div> </div> <p class extra >having little or no money</p <p class="extra">having little or no money</p47
  48. 48. div[class] { color: green; } <div id="logo"> <img src="whatever.gif" /> <p>tagline</p> </div> <div class="header"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> <p>Some random text.</p> <p>here is some more.</p> <p>here is some more </p> </div> <p>My name is Ishmael.</p> <p>Some years ago</p> <div class="extra"> <p>Some more random text.</p> <h2>Products</h2> h d /h <p>This paragraph will be displayed.</p> <p>So will this one.</p> <div id="subtext"> <p>never mind how long</p> / </div> </div> <p class="extra">having little or no money</p>48
  49. 49. Font Formatting with CSS49  font formatting properties and possible values values. font-family: [family name], [family name], etc font-size: [height] | [percentage] | small | medium | large | smaller | etc font-style: italic | oblique | normal font-weight: normal | bold | bolder | lighter | etc font-variant: small-caps | normal font: [font-style]|[font-weight] [font-size][/line-height] [font-family]
  50. 50. Font Formatting with CSS50  The font-family property should always specify a generic font family name in case the computer viewing the page does not have one of the specified fonts. Generic family name font-family: Arial, Tahoma, sans-serif;  The font property allows you to combine multiple font styles into one declaration. font: bold 12pt Arial, Tahoma, sans-serif;
  51. 51. Platform Considerations51  Do not assume that a font you have is one that is on the viewers computer.  Fonts common (for most users) to both Mac and Windows:  Arial,Arial Black, Arial Narrow, Comic Sans, Courier New  Georgia, Impact, Tahoma, Times New Roman  Trebuchet MS, Verdana
  52. 52. CSS Sizes52  Font sizes (and all CSS sizes) can be specified using absolute or relative units  Relative  smaller, larger keywords  Percentages  em value  This is the height of the character box for the font  Absolute  small, medium, large, etc keywords.  Inches (in), points (pt), pixels (px), etc.
  53. 53. Sizing Fonts53  Generally, the most common approach is to set the size in pixels. h2 { font-size: 18px; }  Advantage is that the designer has complete control over what the user sees in terms of the size of the font.  Any problems with this? yp
  54. 54. Sizing Fonts54  Not all users have the same eye strength.  Browsers provide user with ability to resize font size.  Unfortunately, with IE 6 and 7, if the pages CSS uses pixel unit to set font size then the text will not be resized.
  55. 55. Sizing Fonts55  It is better to use a relative unit for sizing fonts, even though it is initially a bit tricky.  Three approaches  Use keywords (x‐small, small, medium, large, etc) x small, small, medium, large  Unfortunatelynot as much control over ultimate size due to limited number of sizes.  Use em unit h2 { font-size: 1.5 em; }  Use percentage size h2 { font-size: 120%; }
  56. 56. Percentage Size56  This is a percentage of the elements parents font size. body { font-size: 10px; } font size: #logo { font-size: 150%; } h2 { font-size: 200%; } .dwarf { font-size: 75%; } <body> <div id="logo"> <h2>Book Rep System</h2> 30px ( (10*2.00)* 1.5 ) </div> <h2>Technical Books</h2> 20px (10 * 2.00) <p>Here is some regular text</p> 10px <p class="dwarf">really small</p> 7.5px (10 * 0.75) </body> y
  57. 57. Percentage Size57  Unfortunately, the previous example doesnt allow resizing due to absolute setting of body font size.  Instead, we should use a relative setting for the body.y
  58. 58. Percentage Size58  body { font-size: 10px; } body { font-size: 100%; }  #logo { font-size: 150%; } h2 { font-size: 200%; } .dwarf { font-size: 75%; }  body { font-size: small; } #logo { font-size: 150%; } g h2 { font-size: 200%; } .dwarf { font-size: 75%; }
  59. 59. Percentage Size59  Advantage to this approach is that you can change the overall size of text in your site by making just one change: the font-size of the body.  Disadvantage is that it can get quite complicated g g q p with percentages and nested elements.
  60. 60. Em sizes60  As an alternative to percentages, you can use em sizes.  An em unit when used for sizing fonts is relative to the baseline size of the parent.  If the parent of an element has a font size of 14 pixels, then 1em is 14 pixels; if the font size is 24 pixels, then 1 em is 24 pixels.  Most browsers have a default font size of 1em (about 16 pixels).
  61. 61. em sizes61 body { font-size: 1em; } #logo { font-size: 1.2em; } h2 { font-size: 1.5em; } .dwarf { font-size: 0 i 0.75em; } <body> <div id="logo"> g <h2>Book Rep System</h2> 28px ( (16*1.2)* 1.5 ) </div> <h2>Technical Books</h2> 24px (16 * 1.5) <p>Here is some regular text</p> p g p 16px p <p class="dwarf">really small</p> 12px (16 * 0.75) </body>
  62. 62. Conclusion: Font Sizes62  Set the base body font-size relatively (i.e., using keyword, em, or percentage).  Use percentage or em for all other sizes, remembering that they are relative to the size set g y for the body.
  63. 63. Text Formatting63  text formatting properties and possible values. text-indent: [length] | [percentage] letter-spacing: [length] | normal word spacing: word-spacing: [length] | normal text-decoration: none | underline | line-through | overline line-height: [height] | [percentage] | normal | etc text-transform: uppercase | l t t t f lowercase | capitalize | none it li text-align: left | center | right | justify vertical-align: middle | bottom | top | etc  Just as with font sizes, you should use relative units (percentage or em) for lengths.
  64. 64. Block Level Inline Level Block-Level vs Inline-Level elements64  Block-level elements  Generate an element box that fills its parent elements content area.  That is, they generate "breaks" before and after the element box.  E.g. <p>, <div>, <ul>, <table>  Inline-level elements  Generate an element box within a line of text text.  E.g., <a>, <span>, <strong>
  65. 65. Element Boxes65  CSS assumes that every element generates a rectangular box called the element box (sometimes also called the box model).  Each element box has a content area,  a background color and/or image image,  a margin,  a possible b d ibl border  internal padding.
  66. 66. Element Boxes66  CSS assumes that every HTML element exists in a rectangle called the element box. Background image and/or color margin g border padding This is a content area. CSS assumes that every HTML element exists in a rectangle called the element box. height width Element box
  67. 67. Element Box67 Molly Holzschlag,”Thinking Outside the Grid”, http://www.alistapart.com/articles/outsidethegrid
  68. 68. Element Box68  You can adjust the following parts of the box with CSS  Width and Height  Border  Thickness, style, and color of the border  Margin g  Setthe distance between the box and adjacent elements boxes  Padding  Set the distance of the content from the border of the box
  69. 69. Width and Height69  You can change the width and height of the element box in quite a few different ways.  The most straightforward way is via the width and height properties H1 { width: 50%; height: 25px; }  Remember, the width and height properties set the size of the content area, not the element box itself. i f th t t t th l t b it lf margin p padding g This is a content area. CSS assumes that every HTML element exists in a rectangle called the element box. height width
  70. 70. Width and Height70  Unfortunately, the width and height properties have a different meaning in CSS standard than in IE 5 or IE 6 in quirks mode.  Recall that unless you have a valid DOCTYPE specifying xhtml strict or xhtml transitional DTD, IE will display document in quirks mode.  For IE in quirks mode, width and height refer to the element box not to the content area.
  71. 71. Border71  Can specify each axis individually, e.g. border-top-style: dashed; border left color: border-left-color: red; border-right-width: 5px;  Can specify all 4 axis at once identically, e.g. p y y, g border-style: solid; border-color: green;  Can C specify multiple axis at once i di id ll e.g. if li l i individually, border-width: 2px 3px 4px 5px; TOP p p property: top right bottom left y p g TRouBLe left right border-color: green red; green red green red bottom  Can also specify multiple properties at once border: 1px double green; border: width style color;
  72. 72. Padding72  The space between the border and the content area  Can specify each side individually or all at once, e.g., padding-top: 5px; TOP padding: 3px 2px 5px 4px; left right  Default is no padding bottom  If you have a border on box containing text, it is a good idea to add padding padding.
  73. 73. Margins73  Margins provide separation between element boxes  Can specify each side individually or all at once, p y y , e.g., margin-top: 5px; margin: 3px 2px 5px 4px;
  74. 74. Margin Demo <h1>Margin demo</h1>74 <p>Cascading Style Sheets (CSS) is the W3C-approved method for specifying and enriching the visual presentation of web pages.</p> i f b / <p>CSS is not HTML but does enhance HTML by allowing you to redefine how pre-existing tags work. A style sheet is written according to the grammar defined in the W3C CSS 1 or CSS 2 recommendations. </p> <style> * { border: 1px solid black; } </style> <style> * { border: 1px solid black; margin: 0; } </style>
  75. 75. Padding versus Margins75 padding margin
  76. 76. Collapsing Margins76  For adjacent vertical block-level elements in the normal document flow, only the margin of the element with the largest margin value will be honoured,  while the margin of the element with the smaller margin value will be collapsed to zero.
  77. 77. Collapsing Margins <div>before</div> <p>line one</p> <p>line two</p>77 <p>line three</p> <div>after</div> <style> div { border: 1px solid black; margin: 0;} p { background-color: silver; height: 50px; margin-top: 50px; margin-bottom: 0px;} </style> <style> div { border: 1px solid black; margin: 0;} p { background-color: silver; height: 50px; margin-top: 50px; margin-bottom: 20px;} </style> Notice that vertical margins collapse!!! o a a ag o ap When top and bottom margins meet they overlap until one of the margins touches the border of the other element element.
  78. 78. Collapsing Margins78 .box { margin: 10px; <div class="box a"> } <div class="box b"> .a { <div class="box c"> background: #777; <div class="box d"> } <div class="box e"> .b { b { The top and bottom margins collapse but the left and  background: #999; right margins dont. The top and bottom  margins also  } collapse in IE 7 because the elements dont have a  .c { layout. background: #bbb; </div> } </div> .d { .d { </div> background: #ddd; </div> } </div> .e { background: #fff; } Tommy Olsson & Paul O’Brien, The Ultimate CSS Reference (SitePoint, 2008).
  79. 79. Collapsing Margins79  You can stop vertical margins collapsing by adding a border or padding. .box { margin: 10px; padding: 1px; }
  80. 80. Collapsing Margins80  However, IE 7 will NOT collapse margins if the collapsed element has layout (i.e., has a width setting). .box { margin: 10px; width: 400px; } Firefox IE 7
  81. 81. Collapsing Margins81  Also, margins don’t collapse (in all browsers) for:  floated elements  absolutely positioned elements  inline-block elements  cleared elements  overflow set to anything other than visible
  82. 82. Collapsing Margins82 .box { margin: 10px; float: left; } Firefox, Safari, Chrome, IE8 IE 7
  83. 83. Can I just forget IE 7 (and 6)?83 http://stats.wikimedia.org/wikimedia/squids/SquidReportClients.htm http://www.statowl.com/web_browser_market_share.php?mes=ndd
  84. 84. Element box size revisited84  Recall that in CSS standard, the width and height properties set the size of the content area, not the element box itself.  Any p y padding or borders increases the size of the g element box  However, However with IE in quirks mode (or version 5) the 5), width and height indicate the size of the element box. box  Padding and borders thus shrinks the size of the content area.
  85. 85. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE in quirks mode <style> p { background-color: silver; height: 100px; width: 100px; } 100px 100px </style> 100px 100px <style> p { background-color: silver; height: 100px; width: 100px; padding: 20px; } </style> 140px 100px 100px 100 140px <style> p { background-color: silver; height: 100px; width: 100px; padding: 20px; 100px border: 6px solid black; } 152px / y </style>85 100px 152px
  86. 86. Containing Boxes86  Block boxes act as a containing block for any boxes within them. <div> This is the first sentence. <p>This is the second sentence.</p> </div>  In this code, the div element establishes a containing , g block for both the first string of text and the P element.  The p element in turn creates a containing block for the second text string string.
  87. 87. Positioning87  You can change the position of an element box via the position, top, left, bottom, and right properties.  Note: it doesn’t make sense to set both left and right.  Note: it doesn’t make sense to set both top and bottom.
  88. 88. Positioning Property Values88  static  Eachposition is laid out based on the normal flow of the document (default)  relative  Moves an element relative to its normal (static) position.  absolute  Moves an element absolutely relative to its containing block, y g , and not relative to the page or window.  fixed  Moves an element absolutely relative to the browser window so that the element never moves, even when the page is scrolled (not supported in IE 6 or lower).  This can be used to replicate HTML frames in CSS
  89. 89. Static Positioning89  Element boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one.  Inline boxes flow horizontally from left to right.
  90. 90. Positioning90  positioned elements are placed in relation to their d l l d l h containing blocks (but are not confined by this containing block) block).  Fixed  Containing block is browser window  Absolute  Containing bo is closest positioned ancestor box ancestor.  If there is no positioned ancestor, the initial containing block is the browser window.  Relative  Does not have a containing block.  It is positioning away from its normal (static) position.
  91. 91. <style type="text/css"> #logo { border: 1 1px solid black; width: 300 i i 300px; position: relative; top: 200px; left: 100px; } </style> <body> <body> <div id="logo"> You can change the position of an element … <h1><span>Pearson Education</span></h1> You can change the position of an element … <h2><span>Book Rep System</span></h2> You can change the position of an element … </div> <div id="logo"> </body> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body>91 Remember that relative moves an element relative to its normal position
  92. 92. <style type="text/css"> #logo { border: 1 1px solid black; width: 300 i i 300px; position: absolute; top: 200px; left: 100px; } </style> <body> <body> <div id="logo"> You can change the position of an element … <h1><span>Pearson Education</span></h1> You can change the position of an element … <h2><span>Book Rep System</span></h2> You can change the position of an element … </div> <div id="logo"> </body> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body>92
  93. 93. <body> <div id="logo"> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body> <style type="text/css"> #logo { border: 1px solid black; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: absolute; top: 20px; left: 100px; } </style> <style type="text/css"> y yp #logo { border: 1px solid black; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: relative; top: 20px; left: 100px; } </style> Remember that absolute moves an element absolutely relative to its containing block, and93 not relative to the page or window.
  94. 94. <body> <div id="logo"> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </di > </body> 100px 20px <style type="text/css"> #logo { border: 1px solid black; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: absolute; top: 20px; left: 100px; } </style> Remember that absolute moves an element absolutely relative to its containing block, and94 not relative to the page or window.
  95. 95. 20px 100px <style type="text/css"> #logo { border: 1px solid black; p ; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: absolute; top: 20px; left: 100px; } </style> <style type="text/css"> #logo { <body> border: 1px solid black; <div id="logo"> <h1><span>Pearson Education</span></h1> width: 300px; height: 100px; <h2><span>Book Rep System</span></h2> h2 B k R S t / /h2 } </div> #logo h2 { </body> position: absolute; top: 20px; left: 100px; } </style> Remember that absolute moves an element absolutely relative to its containing block, which is closest95 positioned ancestor; if none, then container is browser window.
  96. 96. 100px 20px <style type="text/css"> Without #logo h2 positioning #logo { #l border: 1px solid black; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: relative; top: 20px; left: 100px; } <body> </style> <div id="logo"> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body> y96 Remember that relative moves an element relative to its normal position
  97. 97. Positioning97  Absolute positioning is sometimes used to position an element off-screen.  An example is the click to skip navigation link added for screen readers.
  98. 98. Floats98  Floating is achieved by setting the float property on an elements style to either left or right.  Non-floated content will flow along the side opposite to the specified float direction. pp p .image { float: left; } No float .image { float: right; } <img src="images/pic.gif" class="image" /> <p> Floated boxes will move to the left or right until … </p>
  99. 99. Clearing Floats99  Block-level elements will continue to wrap around floated element for the entire height of floated element.
  100. 100. Clearing Floats100  The CSS property clear forces an element to display beneath any floated elements. No clear .clear { clear: both; ; } <img src="images/pic.gif" class="image" /> <p>Float boxes … <p class="clear">Floating an image …
  101. 101. Clear101  clear: l f l left  The element is moved below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the g source document.  clear: right  The element is moved below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.  clear: both  The element is moved below all floating boxes of earlier elements in the source d l i h document.  clear: none
  102. 102. Floats102  Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float. <div id="logo"> <img src="images/pic.gif" class="image" /> <p> Floated boxes will …  </p> </div> #logo { margin: 50px;  border: 1px solid black;} div p {background‐color: yellow; border: 1px dashed black; } .image { float: left; }
  103. 103. Floating Left and Right103  You can float items in a container both left and right. .leftImage { float: left; } .rightImage { float: right; } <img src= images/pic.gif class="leftImage" /> <img src="images/pic gif" class= leftImage  /> <img src="images/pic.gif" class="rightImage" />
  104. 104. Floating Left and Right104  Once you’ve floated all the elements within a container, that container will no longer have any non-floated content, so the container will collapse to zero height. Notice no background color <div id="logo"> #logo { margin: 50px;  <img src="images/pic.gif" class="leftImage" /> border: 1px solid black;  <img src="images/pic.gif" class="rightImage" /> background‐color:yellow; } </div>
  105. 105. Floating Left and Right105  To avoid this problem, set an explicit height for the containing block. #logo { margin: 50px;  height: 120px; border: 1px solid black;  background‐color:yellow; }
  106. 106. Multi Column Multi-Column Layouts106  Two approaches for creating multi-column layouts:  Using floats  Using positioning  Note: this refers to how the basic multi-column multi column layout is created.  One might still use floats (for other elements, such as a elements header) within a layout created via positioning.
  107. 107. Multi Column Multi-Column Layouts107  A complicated float-based layout:  canbe tricky and fragile (esp. in IE before version 8).  Hard to preserve source-order (see next slide).  A complicated position-based layout: position based  has fewer problems with IE  it i really t is ll troublesome to di l a f t b l th bl t display footer below the columns.
  108. 108. Source Order108  refers to how page elements are arranged, or ordered in the source.  This is important for:  accessibility reasons  SEO (Search Engine Optimization)  We want the page s content to appear in the markup page’s before things like secondary navigation columns.

×