Lecture2 CSS 2


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Show boxModel.html
  • Top = doctype - “standards mode” As pages will appear in IE 6 and up with a doctype Bottom = no doctype - “quirks mode” As pages appear in IE 5 and prior and for files without the right doctype. In version 6, Microsoft addressed this issue by implementing the W3C box model, if "standards mode" was enabled, which is done by defining a supported DOCTYPE on the first line of the HTML output.
  • The "box model hack" developed by Tantek Çelik . Developed during his time at Microsoft working on Internet Explorer for the Macintosh, which is not affected by the bug — involves specifying a width for Internet Explorer for Windows which is then over-ridden by another width specification. This second specification is hidden from Internet Explorer for Windows by exploiting a bug in the way that browser parses CSS rules. width: 350px; - Width for IE voice-family:””}””; - IE is tricked into thinking rule has finished voice-family: inherit; - voice-family is reset for any browser that understands the property width: 300px; - the "real" width is set for all other browsers.
  • Also attribute selectors but these are so poorly supported at present that I’m not going to talk about them here.
  • First em is affected. Second is not.
  • Don't forget plain a
  • a
  • Focus - can be applied to any element but in the few browsers that offer any support for it, generally only form elements can make use of it. Firstchild - as it suggests - e.g. Li:first-child - targets the first li of a list. Before and after allow for generated content to be inserted before or after an element: Blockquote:before{content:"“" font-size: 24px} Blockquote:after{content:"“" font-size: 24px} There is also :lang(ab).
  • Lecture2 CSS 2

    1. 1. Lecture 2: CSS II SFDV2001 Web Development
    2. 2. The Box Model <ul><li>In CSS every element in your HTML file is contained within a rectangular box. </li></ul><ul><li>There are four main components to this box: </li></ul><ul><ul><ul><li>Content </li></ul></ul></ul><ul><ul><ul><li>Margin </li></ul></ul></ul><ul><ul><ul><li>Padding </li></ul></ul></ul><ul><ul><ul><li>Border </li></ul></ul></ul><ul><li>Additionally there a couple of background components: </li></ul><ul><ul><ul><li>background colour </li></ul></ul></ul><ul><ul><ul><li>background image </li></ul></ul></ul>
    3. 3. Image source: http://www.hicksdesign.co.uk/boxmodel/
    4. 4. The Box Model <ul><li>Margins are always transparent. </li></ul><ul><li>Padding is the space between the content and the border. </li></ul><ul><li>Background colour and/or image extend throughout the box model to the border. </li></ul><ul><li>If a style of border used has gaps in it (e.g. dashed), the background shows through those gaps. </li></ul><ul><li>The background of the parent element shows through the margin area of the box. </li></ul>
    5. 5. Width <ul><li>The width set for an element is the width of the content . Padding, border and margin are additional to this width. </li></ul><ul><li>h1{ </li></ul><ul><li>width: 300px; </li></ul><ul><li>padding: 5px; </li></ul><ul><li>border: solid 10px #ff69b4; </li></ul><ul><li>margin: 10px; </li></ul><ul><li>} </li></ul>Total width on page for this element = 350 pixels Unless your IE: IE implements the box model incorrectly.
    6. 7. IE 5 (Mac) Safari Firefox
    7. 8. Source: http://en.wikipedia.org/wiki/Image:Box-model-bug.png
    8. 9. Solutions <ul><li>There are hacks to combat many of the flaws in IE’s CSS rendering. Most exploit other IE bugs to provide workarounds. </li></ul><ul><li>The Box Model hack (by Tantek Çelik) </li></ul><ul><li>width: 350px; </li></ul><ul><li>voice-family:””}””; </li></ul><ul><li>voice-family: inherit; </li></ul><ul><li>width: 300px; </li></ul><ul><li>IE doesn’t see the second width specification. </li></ul>
    9. 10. Selectors <ul><li>Recap: </li></ul><ul><li>selector{ </li></ul><ul><li>property: value; </li></ul><ul><li>} </li></ul><ul><li>There are many different kinds of selectors: </li></ul><ul><ul><li>Standard element selectors </li></ul></ul><ul><ul><li>Contextual selectors </li></ul></ul><ul><ul><li>Class selectors </li></ul></ul><ul><ul><li>ID selectors </li></ul></ul><ul><ul><li>Pseudoselectors </li></ul></ul>
    10. 11. Element selectors <ul><li>H1{ </li></ul><ul><li>color: #456678; </li></ul><ul><li>} </li></ul><ul><li>You can group selectors: </li></ul><ul><li>H1, p, li{ </li></ul><ul><li>color: #456678; </li></ul><ul><li>} </li></ul>You can affect any element using the universal ( * ) selector.
    11. 12. Contextual Selectors <ul><li>Allow you to affect elements based on their context. That is, their relationship to other elements. </li></ul><ul><li>Descendant selectors </li></ul><ul><li>Elements that are contained within other elements: </li></ul><ul><li>ul li{ </li></ul><ul><li> color: #456678; </li></ul><ul><li>} </li></ul><ul><li>ul li a{ </li></ul><ul><li> color: #456678; </li></ul><ul><li>} </li></ul>
    12. 13. Contextual Selectors <ul><li>Child Selectors </li></ul><ul><li>Similar to descendant selectors but it target only a direct child of an element: </li></ul><ul><li>p > em{ </li></ul><ul><li> color: #456678; </li></ul><ul><li>} </li></ul>
    13. 14. Contextual Selectors <ul><li>Adjacent sibling selectors </li></ul><ul><li>H1 + p{ </li></ul><ul><li>margin-left: 5%; </li></ul><ul><li>} </li></ul><ul><li>Affects an element that comes immediately after another. </li></ul><ul><li>In the above example the first paragraph after a top-level heading will be indented. </li></ul>
    14. 15. Class and ID selectors <ul><li>You can’t always style every element you want to with the standard selectors available and some times you need to make your own. </li></ul><ul><li>There are two kinds of “custom-made” selectors: class and ID . </li></ul><ul><li>Class is used for a style that you may wish to use multiple times in a single html file. </li></ul><ul><li>ID is used for a style you wish to be unique in any one html file. </li></ul><ul><li>You must set the class or ID in your HTML code. </li></ul>
    15. 16. Class and ID selectors <ul><li>IDs take care of unique structural elements: </li></ul>Class is used for elements that are used multiple times : Heading Navigation Footer
    16. 18. Class and ID selectors <ul><li>In your style sheet: </li></ul><ul><li>Class </li></ul><ul><li>p.question{ </li></ul><ul><li>color: navy; </li></ul><ul><li>} </li></ul><ul><li>Or </li></ul><ul><li>.question{ </li></ul><ul><li> color: navy; </li></ul><ul><li>} </li></ul>
    17. 19. Class and ID selectors <ul><li>In your style sheet: </li></ul><ul><li>ID </li></ul><ul><li>Div#footer{ </li></ul><ul><li>border-top: solid 1px #555555; </li></ul><ul><li>font-size: smaller; </li></ul><ul><li>} </li></ul><ul><li>Or </li></ul><ul><li>#footer{ </li></ul><ul><li>border-top: solid 1px #555555; </li></ul><ul><li>font-size: smaller; </li></ul><ul><li>} </li></ul>
    18. 20. Class and ID selectors <ul><li>Resist the temptation to make everything a class. </li></ul><ul><li>Make sure your id and class names are descriptive. </li></ul><ul><ul><li>“navigation” is descriptive of the function of the selector rather than the style. </li></ul></ul><ul><ul><li>“red” is descriptive of a style - styles change. </li></ul></ul><ul><li>If you can use a contextual selector or the like instead of a class or ID, do so. </li></ul>
    19. 21. Pseudoselectors <ul><li>Some things that you want to style in an html document are not possible to represent with standard element selectors because there is no element in your HTML document to represent them. </li></ul><ul><li>Different link states - visited, unvisited etc. are good examples. </li></ul><ul><li>Pseudoselectors enable you to identify these portions of elements. </li></ul><ul><li>Pseudoselectors are identified in your CSS using a colon. </li></ul><ul><ul><ul><li>a:link </li></ul></ul></ul>
    20. 22. Pseudoselectors - Anchors <ul><li>Pseudoselectors are most commonly used to influence different link states. </li></ul><ul><ul><ul><li>a:link </li></ul></ul></ul><ul><ul><ul><li>a:visited </li></ul></ul></ul><ul><ul><ul><li>a:hover </li></ul></ul></ul><ul><ul><ul><li>a:active </li></ul></ul></ul><ul><li>In transitional code the equivalents are the link , vlink and alink attributes of body. </li></ul><ul><li>In CSS you get an extra link state (hover) and you can influence any aspect of a links style, not just colour. </li></ul>
    21. 23. Pseudoselectors - Anchors <ul><li>a:link{ </li></ul><ul><ul><ul><li>text-decoration: none; </li></ul></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>a:visited{ </li></ul></ul></ul><ul><ul><ul><li>color:#555555; </li></ul></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>a:hover{ </li></ul></ul></ul><ul><ul><ul><li>text-decoration: underline; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>a:active{ </li></ul></ul></ul><ul><ul><ul><li>color:#f6dc3b; </li></ul></ul></ul><ul><ul><ul><li> ... </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
    22. 24. Pseudoselectors - Anchors <ul><li>Anchor pseudoselectors should appear in your CSS in the order: </li></ul><ul><ul><ul><li>a </li></ul></ul></ul><ul><ul><ul><li>a:link </li></ul></ul></ul><ul><ul><ul><li>a:visited </li></ul></ul></ul><ul><ul><ul><li>a:hover </li></ul></ul></ul><ul><ul><ul><li>a:active </li></ul></ul></ul><ul><li>If you don't, they may not function as they should. </li></ul><ul><li>Putting : link last for example would override the : hover and : active states. </li></ul>
    23. 25. Other pseudoselectors <ul><li>There are other pseudoselectors, but they aren't as commonly used as those associated with anchors because of poor browser support. </li></ul><ul><ul><ul><li>:focus </li></ul></ul></ul><ul><ul><ul><li>:first-child </li></ul></ul></ul><ul><ul><ul><li>:first-line </li></ul></ul></ul><ul><ul><ul><li>:first-letter </li></ul></ul></ul><ul><ul><ul><li>:before </li></ul></ul></ul><ul><ul><ul><li>:after </li></ul></ul></ul><ul><li>:first-line and :first-letter are currently the only ones of this list that have any reasonable browser support. </li></ul>
    24. 26. Block-level and Inline elements <ul><li>In html there are block elements and inline elements. </li></ul><ul><li>The distinction between the two is important for how they may be nested. </li></ul><ul><li>You know from transitional code that <font> tags only validate when used inside <p> tags. This is because <font> is an inline element and <p> is a block level element. </li></ul><ul><li>Block-level elements can contain other block-level elements and inline elements. </li></ul><ul><li>Inline elements can only contain content and other inline elements. </li></ul>
    25. 28. Block-Level and Inline in CSS <ul><li>CSS allows you to explicitly state if an element is block-level or inline. </li></ul><ul><li>BUT! </li></ul><ul><li>These have nothing to do with the structure of your HTML and will not change the rules of validation. </li></ul><ul><li>The notions of block-level and inline in CSS are presentation concepts only. </li></ul><ul><li>display: block; </li></ul><ul><li>display: inline; </li></ul>
    26. 31. Recommended sites: Hicks Design Box Model diagram: http://www.hicksdesign.co.uk/3dboxmodel/ Interactive Box Model diagram: http://www.redmelon.net/tstme/box_model/ W3C's Box Model description: http://www.w3.org/TR/REC-CSS2/box.html Tantek Çelik's Box Model hack: http://tantek.com/CSS/Examples/boxmodelhack.html Further reading: Web Design in a Nutshell, 3rd Edition by Jennifer Niederst Robbins