WEB I 06 - CSS

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + dan_o Dan Olsen 4 months ago
    you’ve created a great summary reference for CSS. are the slides available for download anywhere?
Post a comment
Embed Video
Edit your comment Cancel

2 Favorites

WEB I 06 - CSS - Presentation Transcript

  1. CSS Cascading Style Sheets
  2. What is CSS?
    • Cascading Style Sheets (CSS) is the W3C-approved method for specifying and enriching the visual presentation of web pages.
    • 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 can be contained in :
      • 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.
  3. Why CSS?
    • There are numerous advantages of using CSS:
      • Greater control over textual effects and page layout.
      • Separates document content (HTML) from its appearance (CSS).
      • Reducing duplication of style commands.
      • Increase ease in web site maintenance.
    • The disadvantages of CSS is:
      • Harder to learn than straight HTML
      • Some unevenness with browser support
        • IE prior to vers. 7 in particular has several CSS bugs
  4. So why is separating appearance from content so important?
    • Currently (without CSS), the vast majority of a given HTML 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.
      • 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) accurately.
      • Google “is in effect the world’s most active blind user” (Meyer, 3).
    Eric Meyer, Cascading Style Sheets, 2 nd Ed , (O’Reilly, 2004).
  5. Example Problem What is the actual content of this document?
  6. Example Problem
    • 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-candidates debate
          • Link
          • Image
          • Caption
            • Tami Rothery VP Student Life etc
        • Newsroom
          • Link
          • Link
          • Link
          • Link
          • Link
  7. HTML for the Content
    • <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>
    • <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>
    • <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>
  8. Actual HTML (which contains content and presentation)
    • <table width=&quot;720&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; valign=&quot;top&quot;><tr><td valign=&quot;top&quot; width=&quot;620&quot; height=&quot;9&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;620&quot; height=&quot;9&quot; border=&quot;0&quot;></td></tr><tr><td valign=&quot;top&quot; width=&quot;620&quot; height=&quot;29&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;63&quot; height=&quot;5&quot; border=&quot;0&quot;><script language=&quot;JavaScript&quot;><small><font color='white' face='Arial' size='1'><b> January 11, 2006 </b></font></small></td></tr><tr><td valign=&quot;top&quot; width=&quot;620&quot; height=&quot;98&quot;> <img src=&quot;images/spacer.gif&quot; width=&quot;620&quot; height=&quot;98&quot; border=&quot;0&quot; alt=&quot;News & Events&quot;> </td></tr></table></td></tr></table><table width=&quot;720&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;><tr><td width=&quot;100&quot; valign=&quot;top&quot; bgcolor=&quot;#003399&quot;> <a href=&quot;newsroom.php&quot; onMouseOver=&quot;document.ne_new.src='images/ne_newr.jpg'&quot; onMouseOut=&quot;document.ne_new.src='images/ne_new.jpg'&quot;><img src=&quot;images/ne_new.jpg&quot; alt=&quot;Newsroom&quot; title=&quot;Newsroom&quot; name=&quot;ne_new&quot; border=&quot;0&quot;></a><br> <a href=&quot;events.php&quot; onMouseOver=&quot;document.ne_eve.src='images/ne_ever.jpg'“ onMouseOut=&quot;document.ne_eve.src='images/ne_eve.jpg'&quot;> <img src=&quot;images/ne_eve.jpg&quot; alt=&quot;Events&quot; title=&quot; Events &quot; name=&quot;ne_eve&quot; border=&quot;0&quot;></a><br>
    • <a href=&quot;mediarelations.shtml&quot; onMouseOver=&quot;document.ne_med.src='images/ne_medr.jpg'&quot; onMouseOut=&quot;document.ne_med.src='images/ne_med.jpg'&quot;><img src=&quot;images/ne_med.jpg&quot; alt=&quot;Media Centre&quot; title=&quot;Media Centre&quot; name=&quot;ne_med&quot; border=&quot;0&quot;></a><br><a href=&quot;experts.php&quot; onMouseOver=&quot;document.ne_exp.src='images/ne_expr.jpg'&quot; onMouseOut=&quot;document.ne_exp.src='images/ne_exp.jpg'&quot;> <img src=&quot;images/ne_exp.jpg&quot; alt=&quot;Mount Royal Experts&quot; title=&quot;Mount Royal Experts&quot; name=&quot;ne_exp&quot; border=&quot;0&quot;></a></td><td width=&quot;35&quot; valign=&quot;top&quot;><img src=&quot;images/homepage_top1.jpg&quot;></td><td width=&quot;550&quot; valign=&quot;top&quot;><font face=&quot;arial&quot; size=&quot;2&quot;><img src=&quot;images/homepage_top2.jpg&quot;><br><table width=&quot;550&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;><tr><td width=&quot;355&quot; valign=&quot;top&quot; colspan=&quot;3&quot;><img src=&quot;images/title_featurestory.jpg&quot; alt=&quot; Feature Story &quot;></td><td width=&quot;35&quot; valign=&quot;top&quot;><img src=&quot;images/featureshadow1.jpg&quot;></td><td width=&quot;160&quot; valign=&quot;top&quot;><img src=&quot;images/title_newsroom.jpg&quot; alt=&quot; Newsroom &quot;></td></tr><tr><td width=&quot;355&quot; height=&quot;163&quot; valign=&quot;top&quot; colspan=&quot;3&quot; background=&quot;images/feature_bg.jpg&quot;><table width=&quot;355&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;><tr><td width=&quot;355&quot; height=&quot;12&quot; colspan=&quot;5&quot; valign=&quot;top&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;355&quot; height=&quot;12&quot; border=&quot;0&quot;></td></tr><tr><td width=&quot;12&quot; height=&quot;139&quot; valign=&quot;top&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;12&quot; height=&quot;139&quot; border=&quot;0&quot;></td><td width=&quot;147&quot; height=&quot;139&quot; valign=&quot;top&quot;> <img src=&quot;featurestories/images/candidatedebate.jpg&quot; border=&quot;0&quot; alt=&quot;Tami Rothery, V.P. Student Affairs and Jackie Chuckrey, SAMRC President overlook the location of the upcoming candidates debate.&quot;> </td><td width=&quot;12&quot; height=&quot;139&quot; valign=&quot;top&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;12&quot; height=&quot;139&quot; border=&quot;0&quot;></td><td width=&quot;171&quot; height=&quot;139&quot; valign=&quot;top&quot;><font size=&quot;2&quot; face=&quot;arial&quot;><strong> Policy Studies program joins forces with Students' Association to host all-candidates debate </strong></font> <p><font size=&quot;1&quot; face=&quot;arial&quot;> Just days before Canadians cast their votes in our federal election, Mount Royal College will host an all-candidates debate... &nbsp;&nbsp;> <a href=&quot;featurestories/candidatedebate.shtml&quot;>More</a></font></p> </td><td width=&quot;12&quot; height=&quot;139&quot; valign=&quot;top&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;12&quot; height=&quot;139&quot; border=&quot;0&quot;></td></tr><tr><td width=&quot;355&quot; height=&quot;12&quot; colspan=&quot;5&quot; valign=&quot;top&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;355&quot; height=&quot;12&quot; border=&quot;0&quot;></td></tr></table></td><td width=&quot;35&quot; valign=&quot;top&quot;><img src=&quot;images/featureshadow2.jpg&quot;></td><td width=&quot;160&quot; valign=&quot;top&quot;><font face=&quot;arial&quot; size=&quot;1&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;160&quot; height=&quot;15&quot;><br> <a href=&quot;newsroom.php&quot;>Current News</a> <img src=&quot;images/spacer.gif&quot; width=&quot;160&quot; height=&quot;5&quot;><br> <a href=&quot;archive.php&quot;>News Archives</a> <img src=&quot;images/spacer.gif&quot; width=&quot;160&quot; height=&quot;5&quot;><br> <a href=&quot;/alumni/e_news.shtml&quot;>Alumni News</a> <img src=&quot;images/spacer.gif&quot; width=&quot;160&quot; height=&quot;5&quot;><br> <a href=&quot;http://cougars.mtroyal.ca/&quot;>Cougar News</a> <img src=&quot;images/spacer.gif&quot; width=&quot;160&quot; height=&quot;5&quot;><br> <a href=&quot;/conservatory/news.php&quot;>Conservatory News</a> </font></td></tr></table>
  9. Mixing Presentation with Content
    • Combining presentation and content makes the HTML 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, we can specify this font rule just once.
        • To make the same change we only have to make one change to three CSS rules.
  10. Mixing Presentation with Content
    • 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=&quot;Arial, Helvetica, sans-serif&quot; size=2>
        • <font face=&quot;Arial, Helvetica, sans-serif&quot; size=1>
        • <font face=&quot;Arial, Helvetica, sans-serif&quot;>
        • <font face=&quot;Arial&quot;>
        • <font size=2>
        • <font size=1>
        • <font size=4>
        • <font face=&quot;Arial&quot; size=2 bgcolor=white>
        • <font face=&quot;Arial&quot; size=2 bgcolor=black>
        • <font face=&quot;Arial&quot; size=1 bgcolor=white>
        • <font face=&quot;Arial&quot; size=1 bgcolor=black>
        • <font face=&quot;Arial, Helvetica, sans-serif&quot; size=2 bgcolor=black>
        • <font face=&quot;Arial, Helvetica, sans-serif&quot; size=1 bgcolor=black>
        • <font face=&quot;Arial&quot; size=4 bgcolor=white>
        • <font face=&quot;Arial&quot; size=4 bgcolor=black>
  11. Mixing Presentation with Content
    • To make a site-wide change to the font face, size, or color, for www.mtroyal.ca site would take hundreds of very tedious hours.
    • 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 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.
  12. What does cascading mean?
    • CSS are considered cascading because the styles can use a hierarchy which passes styles down to the elements.
    • Previously defined styles are applied unless a new, overriding style change is made.
  13. What does cascading mean? body h1 p div id=news div id=story div id=story p font-face: Arial, Helvetica, sans-serif; color: black; font-size:14pt; font-size:10pt; font-size:12pt; font-weight: bold; background:white; position: relative; left: 125px; width: 200px font-weight: normal;
  14. CSS Rules
    • 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 p tag should be 12pt Arial or some sans-serif font.
        • h2 { color: green; }
        • p { font-size: 12pt; font-face: Arial, sans-serif;
        • }
  15. Replaced vs Nonreplaced Elements
    • Replaced elements
      • Element's content is replaced by something not contained within element's container.
      • E.g., img, input, textarea
    • Nonreplaced elements
      • Element's content is displayed inside an element box .
      • E.g., most XHTML tags
  16. Block-Level vs Inline-Level elements
    • Block-level elements
      • Generate an element box that fills its parent element's content area.
      • That is, they generate &quot;breaks&quot; before and after the element box.
      • E.g. <p>, <div>, <ul>, <table>
    • Inline-level elements
      • Generate an element box within a line of text.
      • E.g., <a>, <span>, <strong>
  17. Element Boxes
    • 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 or image,
      • a margin,
      • a possible border
      • internal padding.
  18. Element Box Molly Holzschlag,”Thinking Outside the Grid”, http://www.alistapart.com/articles/outsidethegrid
  19. CSS Rule Placement
    • There are three ways in which rules can be applied to a document:
      • Inline styles
      • Embedded styles
      • External styles
  20. Inline Styles
    • Are added to a tag via the style attribute.
        • <h2 style=&quot;color: green;&quot;>
        • <p style=&quot;font-size: 12pt; font-face: Arial, sans-serif;&quot;>
    • Affects only that instance of the tag.
    • Not recommended.
  21. Embedded Styles
    • Are added in the head of the page and affects all instance of the defined tag.
        • <head>
        • <style type=&quot;text/css&quot;>
        • h2 { color: green; }
        • p { font-size: 12pt; font-face: Arial, sans-serif; }
        • </style>
        • </head>
  22. External Styles
    • Are stored in an external file and linked or imported into a page.
    • 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
      • Linking
        • <head>
        • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot;>
        • </head>
      • Importing
        • <style type=&quot;text/css&quot;>
        • @import url(styles.css);
        • @import url(colours.css);
        • </style>
  23. CSS Rule Composition
    • A CSS rule is composed of two parts:
      • 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.
      • A declaration is a combination of CSS property and a value for that property.
        • h1 { color: green; font-size: 24pt; }
    Declaration Block Declaration Selector property value
  24. Selectors
    • Selectors are what connect the style definitions to the specific tags that are to be modified.
    • There are three forms of selectors:
      • HTML selectors
      • Class selectors
      • ID selectors
  25. HTML Selectors
    • You have already seen HTML selectors. These are the styles that directly affect an HTML tag element.
      • h1 {color:red;}
    • These selectors can be grouped into comma-separated lists.
      • h2, h3, p {color:blue;}
    • You can also specify styles for a tag based on its context.
      • These are called contextual selectors (or descendent selectors ) and use spaces to separate the elements
      • e.g., the following makes emphasized text red when it is located in the context of (i.e., within) an h4 tag:
      • h4 em {color : red;}
      • <h4>This is <em>red</em></h4>
      • <em>This is not red</em>
  26. Class Selectors
    • A class selector is used to specify the styles of elements that have been classified using the CLASS attribute in the HTML tags.
      • These allow you to define styles independently of the HTML elements.
    .classname { property: value; } name of class selector list of property- value pairs period indicating a class selector
  27. Class Selectors Examples
    • An HTML element can be classified using the class 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>
    • With these elements classified, we can set up a style for the class “warning”:
      • .warning { font-size: 36pt; color: red; }
    • We can also specify dependent classes to differentiate bold elements classified as warning and h4 elements classified as warning:
      • b.warning { font-size: 36pt; color: red; }
      • h4.warning { font-size: 48pt; color: red; }
  28. ID Selectors
    • An ID selector is used to target specific instances (those with the ID) rather than classifying elements
    #idname { property: value; } name of ID selector list of property- value pairs # symbol indicating an ID selector
  29. ID Selectors Examples
    • 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=&quot;5511&quot;>hot sales on now!</p>
      • With this element identified, we can set up a style for the id “5511”:
      • #5511 { font-style: italic; color: blue; }
  30. ID Selectors Examples
    • We can also specify dependent identifiers.
      • p.5511 { font-style: italic; color: blue; }
  31. Class versus ID selectors
    • 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 document.
      • Use ids to style a unique element uniquely.
  32. Font Formatting with CSS
    • font formatting properties and possible 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]
  33. Font Formatting with CSS
    • 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.
      • 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;
    Generic family name
  34. Platform Considerations
    • Do not assume that a font you have is one that is on the viewer's 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
  35. CSS Sizes
    • 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.
  36. Sizing Fonts
    • Generally, the most common approach is to set the size in pixels.
      • h2 { font-size: 18pt; }
      • 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?
  37. Sizing Fonts
    • 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 page's CSS uses pixel unit to set font size then the text will not be resized.
  38. Sizing Fonts
    • 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)
        • Unfortunately not 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%; }
  39. Percentage Size
    • This is a percentage of the elements parent's font size.
    • <body>
      • <div id=&quot;logo&quot;>
      • <h2>Book Rep System</h2>
      • </div>
      • <h2>Technical Books</h2>
      • <p>Here is some regular text</p>
      • <p class=&quot;dwarf&quot;>really small</p>
    • </body>
    body { font-size: 10px; } #logo { font-size: 150%; } h2 { font-size: 200%; } .dwarf { font-size: 75%; } 20px (10 * 2.00) 30px ( (10*2.00)* 1.5 ) 10px 7.5px (10 * 0.75)
  40. Percentage Size
    • Unfortunately, the previous example doesn't allow resizing due to absolute setting of body font size.
    • Instead, we should use a relative setting for the body.
  41. Percentage Size 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%; } h2 { font-size: 200%; } .dwarf { font-size: 75%; }   
  42. Percentage Size
    • 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 with percentages and nested elements.
  43. Em sizes
    • 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).
  44. em sizes body { font-size: 1em; } #logo { font-size: 1.2em; } h2 { font-size: 1.5em; } .dwarf { font-size: 0.75em; }
    • <body>
      • <div id=&quot;logo&quot;>
      • <h2>Book Rep System</h2>
      • </div>
      • <h2>Technical Books</h2>
      • <p>Here is some regular text</p>
      • <p class=&quot;dwarf&quot;>really small</p>
    • </body>
    24px (16 * 1.5) 28px ( (16*1.2)* 1.5 ) 16px 12px (16 * 0.75)
  45. Conclusion: Font Sizes
    • 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 for the body .
  46. Text Formatting
    • text formatting properties and possible values.
    • text-indent: [length] | [percentage]
    • letter-spacing: [length] | normal
    • word-spacing: [length] | normal
    • text-decoration: none | underline | line-through | overline
    • line-height: [height] | [percentage] | normal | etc
    • text-transform: uppercase | lowercase | capitalize | none
    • 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.
  47. Document Structure
    • 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
  48. Document Structure body is the parent of ul ul is a child of body img is a descendent of body body is an ancestor of img html head title link h1 body p a ul li li a img
  49. Descendant Selectors
    • These are rules that operate only in specific structural situations.
      • For instance, in the example below, let's change only the <h2> element within the <div> to green 24pt text.
      • To do so, we can use a descendant selector
    <div id=&quot;logo&quot;> <h1>Pearson Education</h1> <h2>Book Rep System</h2> </div> <h2>Technical Books</h2> div h2 {color: green; font-size: 24pt; } h2 within a div
  50. Other Contextual Selectors
    • Other ways of selecting:
      • child selector
      • Id contextual selector
    <div id=&quot;logo&quot;> <h1>Pearson Education</h1> <h2>Book Rep System</h2> </div> <h2>Technical Books</h2> div>h2 {color: green; font-size: 24pt; } h2 is child of div NOT Supported by IE 6 or earlier div#logo h2 {color: green; font-size: 24pt; } h2 is descendant of a div with an id of logo .
  51. Pseudo Elements
    • Pseudo classes are used to add special effects to some selectors.
    • Anchor
      • 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, visited, hover, active
  52. Element Boxes
    • CSS assumes that every HTML element exists in a rectangle called the element box.
    This is a content area. CSS assumes that every HTML element exists in a rectangle called the element box. padding margin border Element box Background image and/or color height width
  53. Element Box
    • You can adjust the following parts of the box with CSS
      • Width and Height
      • Border
        • Thickness, style, and color of the border
      • Margin
        • Set the distance between the box and adjacent element's boxes
      • Padding
        • Set the distance of the content from the border of the box
  54. Width and Height
    • 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.
    This is a content area. CSS assumes that every HTML element exists in a rectangle called the element box. padding margin height width
  55. Width and Height
    • 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.
  56. Border
    • Can specify each axis individually, e.g.
      • border-top-style: dashed;
      • border-left-color: red;
      • border-right-width: 5px;
    • Can specify all 4 axis at once identically, e.g.
      • border-style: solid;
      • border-color: green;
    • Can specify multiple axis at once individually, e.g.
      • border-width: 2px 3px 4px 5px;
      • property: top right bottom left
      • border-color: green red;
    • Can also specify multiple properties at once
      • border: 1px double green;
      • border: width style color;
    TR ou BL e green red green red TOP right bottom left
  57. Padding
    • The space between the border and the content area
    • Can specify each side individually or all at once, e.g.,
      • padding-top: 5px;
      • padding: 3px 2px 5px 4px;
    • Default is no padding
    • If you have a border on box containing text, it is a good idea to add padding.
    TOP right bottom left
  58. Margins
    • Margins provide separation between element boxes
    • Can specify each side individually or all at once, e.g.,
      • margin-top: 5px;
      • margin: 3px 2px 5px 4px;
  59. Margin Demo <style> * { border: 1px solid black; margin: 0; } </style> <style> * { border: 1px solid black; } </style> <h1>Margin demo</h1> <p>Cascading Style Sheets (CSS) is the W3C-approved method for specifying and enriching the visual presentation of web pages.</p> <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>
  60. Collapsing Margins <style> div { border: 1px solid black; margin: 0;} p { background-color: silver; height: 50px; margin-top: 50px; margin-bottom: 0px; } </style> <div>before</div> <p>line one</p> <p>line two</p> <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: 20px; } </style> Notice that vertical margins collapse!!! When top and bottom margins meet they overlap until one of the margins touches the border of the other element.
  61. Padding versus Margins padding margin
  62. Element box size revisited
    • Recall that in CSS standard, the width and height properties set the size of the content area, not the element box itself.
    • Any padding or borders increases the size of the element box
    • However, with IE in quirks mode (or version 5), the width and height indicate the size of the element box.
      • Padding and borders thus shrinks the size of the content area.
  63. <style> p { background-color: silver; height: 100px; width: 100px; } </style> <style> p { background-color: silver; height: 100px; width: 100px; padding: 20px; } </style> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd &quot;> <style> p { background-color: silver; height: 100px; width: 100px; padding: 20px; border: 6px solid black; } </style> 100px 100px 100px 100px 100px 100px IE in quirks mode 140px 140px 152px 152px 100px 100px
  64. Containing Boxes
    • 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 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.
  65. Positioning
    • You can change the position of an element box via the position , top , left , bottom , and right properties.
    • position property values
      • static
        • Each position 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, 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
  66. Static Positioning
    • 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.
  67. Positioning
    • positioned elements are placed in relation to their containing blocks (but are not confined by this containing block).
    • Fixed
      • Containing block is browser window
    • Absolute
      • Containing box is closest positioned 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.
  68. <style type=&quot;text/css&quot;> #logo { border: 1px solid black; width: 300px; position: relative; top: 200px; left: 100px; } </style> <body> You can change the position of an element … You can change the position of an element … You can change the position of an element … <div id=&quot;logo&quot;> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body> <body> <div id=&quot;logo&quot;> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body> Remember that relative moves an element relative to its normal position
  69. <style type=&quot;text/css&quot;> #logo { border: 1px solid black; width: 300px; position: absolute ; top: 200px; left: 100px; } </style> <body> You can change the position of an element … You can change the position of an element … You can change the position of an element … <div id=&quot;logo&quot;> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body> <body> <div id=&quot;logo&quot;> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body>
  70. <style type=&quot;text/css&quot;> #logo { border: 1px solid black; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: absolute; top: 20px; left: 100px; } </style> <body> <div id=&quot;logo&quot;> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body> <style type=&quot;text/css&quot;> #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, and not relative to the page or window.
  71. <style type=&quot;text/css&quot;> #logo { border: 1px solid black; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: absolute; top: 20px; left: 100px; } </style> 100px 20px Remember that absolute moves an element absolutely relative to its containing block, and not relative to the page or window. <body> <div id=&quot;logo&quot;> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body>
  72. <style type=&quot;text/css&quot;> #logo { border: 1px solid black; width: 300px; height: 100px; } #logo h2 { position: absolute; top: 20px; left: 100px; } </style> Remember that absolute moves an element absolutely relative to its containing block, which is closest positioned ancestor; if none, then container is browser window. <style type=&quot;text/css&quot;> #logo { border: 1px solid black; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: absolute; top: 20px; left: 100px; } </style> 20px 100px <body> <div id=&quot;logo&quot;> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body>
  73. Remember that relative moves an element relative to its normal position <style type=&quot;text/css&quot;> #logo { border: 1px solid black; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: relative ; top: 20px; left: 100px; } </style> Without #logo h2 positioning <body> <div id=&quot;logo&quot;> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body> 100px 20px
  74. Floats
    • Floating is achieved by setting the float property on an element's style to either left or right .
    • When specified, the element box is
      • positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box.
      • positioned horizontally, it is shifted as far to the right or left of its containing block as possible.
  75. Floats
    • 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.
    • Surrounding inline content is then allowed to flow around the opposite side.
      • Content flows down the right side of a left-floated box
      • Content flows down the left side of a right-floated box.
  76. Float Tutorial <body> <div class=&quot;sample&quot;> <img src=&quot;images/image.gif&quot; alt=&quot;&quot; width=&quot;100&quot; height=&quot;100&quot;><br> Caption here </div> <p> Lorem ipsum dolor sit amet, consectetuer ... </p> </body> http://css.maxdesign.com.au/floatutorial
  77. Float Tutorial http://css.maxdesign.com.au/floatutorial .sample { float: right; width: 100px; } This will force the div over to the right edge of its containing box (which in this case is the body). A width is also required when floating an element - unless it is an image. <body> <div class=&quot;sample&quot;> <img src=&quot;images/image.gif&quot; alt=&quot;&quot; width=&quot;100&quot; height=&quot;100&quot;><br> Caption here </div> <p> Lorem ipsum dolor sit amet, consectetuer ... </p> </body>
  78. Floats
    • If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.
    http://css.maxdesign.com.au/floatutorial
  79. Floats
    • Block level elements above a floated element will not be affected by it.
    • Elements below will wrap around the floated element.
    • While content will wrap around a floated element, border, background image and background color will extend underneath.
    http://css.maxdesign.com.au/floatutorial
  80. Clear
    • If you do not want elements below a floated element to wrap around it, you can apply the clear property to the element after the floated element.
      • use clear: left , clear: right or clear: both
    <div class=&quot;sample&quot;></div> <p class=&quot;highlight&quot;>Lorem ipsum dolor …</p> .sample { float: left; width: 100px; height: 100px; border: 2px solid #F63; } p { background-color: #ccc; clear: left; } http://css.maxdesign.com.au/floatutorial
  81. Clear
    • clear: left
      • The element is moved below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the 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 document.
    • clear: none

+ randyconnollyrandyconnolly, 8 months ago

custom

563 views, 2 favs, 0 embeds more stats

CSS for Web Development 1 Course suitable for degre more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 563
    • 563 on SlideShare
    • 0 from embeds
  • Comments 1
  • Favorites 2
  • Downloads 0
Most viewed embeds

more

All embeds

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories