Css3

1,781 views

Published on

Brief history of CSS, plus information on CSS 2.1 and CSS 3.0 selectors, their implementation, and browser limitations.

Published in: Design, Technology, Education
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,781
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
88
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Css3

  1. 1. *CSS3 {display: magic;} © Liam McMurray - Web Services, University of Bath
  2. 2. CSS - an introduction Simply put, a cascading style sheet is a file containing instructions on how to present the data it is linked with. © Liam McMurray - Web Services, University of Bath
  3. 3. CSS - an introduction Simply put, a cascading style sheet is a file containing instructions on how to present the data it is linked with. A bit like an IKEA instruction manual that helps turn 18 pieces of wood, 20 screws and 32 dowels into a beautiful chest of drawers. Or a bed. Or a treehouse. © Liam McMurray - Web Services, University of Bath
  4. 4. Selectors in CSS - an introduction Selectors are the hooks that allow anything we define in the style sheet to be associated with something in the data we are trying to apply the CSS to. © Liam McMurray - Web Services, University of Bath
  5. 5. Selectors in CSS 1 in the beginning... tag h1 {color:yellow;} I'm Yellow! © Liam McMurray - Web Services, University of Bath
  6. 6. Selectors in CSS 1 tag h1 {color:yellow;} I'm Yellow! using selectors h1.blue {color:blue;} I'm Yellow! I'm Blue! © Liam McMurray - Web Services, University of Bath
  7. 7. Selectors in CSS 1 the descendant combinator p h3 {color:pink;} Some paragraph text that occurs after the <h3> within the <p> tag. sub heading Some paragraph text that occurs after the <h3> within the <p> tag. the asterisk (*) combinator p * h3 {color:red;} (Each <h3> within any other tag that's within a <p> tag will be associated with this style) ...and that's it. © Liam McMurray - Web Services, University of Bath
  8. 8. Selectors in CSS 2 using the universal selector *td {font-size:85%;} (targets all instances of specified tag) using tag attributes as selectors img [border] {margin: 0;} img [src="printlogo.gif"] {display: none;} © Liam McMurray - Web Services, University of Bath
  9. 9. Selectors in CSS 2 child combinators ul li a {border-left: 1px solid #E69138;} | link | link | link ul li:first-child {border-left: none;} link | link | link © Liam McMurray - Web Services, University of Bath
  10. 10. Selectors in CSS 2 pseudo selectors p:first-letter {font-size: 150%;} a:hover {background-color: red;} This is a great presentation Used with XML tags: testimonial:before {content: "Quote: "";} testimonial:after {content:", man"";} Quote: "This presentation totally rocks, man" © Liam McMurray - Web Services, University of Bath
  11. 11. Selectors in CSS 2 almost there! the child combinator .navigation > a {color: white;} (all instances of the <a> tag within defined selector are targeted) Yes, it is very similar in operation to the asterisk combinator direct adjacent combinator h4 + p {font-weight: bold;} (every paragraph that immediately follows a sub heading is rendered to the screen in bold) © Liam McMurray - Web Services, University of Bath
  12. 12. Selectors in CSS 1 & 2 Compatibility... Everything I've shown you so far is fully supported by Internet Explorer 7*, Safari, Firefox, and Opera. Internet Explorer 6 doesn't support the following selectors: [attribute] , >, +, :first-child, :first-letter, : hover, min-width, max-width * Except :before and :after, which IE8 will support. For more information on pattern matching (despite IE6 not supporting it), see: http://www.w3.org/TR/CSS21/selector.html#pattern-matching © Liam McMurray - Web Services, University of Bath
  13. 13. Selectors in CSS 1 & 2 Conclusion CSS 2 was a massive leap forward in terms of giving us the selectors with which to format data, however lack of browser support meant the uptake hasn't been as great as it should have been. Despite conditional commenting* allowing us to effectively take IE6 out of the equation... *<!--[ifIE 6]> <link href="IE6only.css" /> <![endif]--> © Liam McMurray - Web Services, University of Bath
  14. 14. CSS 3 Modules, baby. © Liam McMurray - Web Services, University of Bath
  15. 15. Modules in CSS 3 Some examples of modules in development: Updated Box Model Lists module Hyperlink Presentation Speech Module Backgrounds and Borders Text Effects Multi-Column Layout The W3C keep a full list of what they are working on here: http://www.w3.org/Style/CSS/current-work © Liam McMurray - Web Services, University of Bath
  16. 16. Back to selectors Revisiting attributes. remember img [border] {margin: 0;} consider the implications of: a[href$=".pdf"] a[href^="http://"] a normal link a link to a pdf file an external link © Liam McMurray - Web Services, University of Bath
  17. 17. Back to selectors Revisiting attributes. want all those images in the 'thumbs' folder to have a border? img [src*='thumbs'] {border: solid 1px black;} bam. © Liam McMurray - Web Services, University of Bath
  18. 18. CSS 3 Borders .rounded {border-radius: 12px;} © Liam McMurray - Web Services, University of Bath
  19. 19. CSS 3 Borders .gradient { border-bottom-colors: #000000 #888888 #FFFFFF; border-top-colors: #000000 #888888 #FFFFFF; border-left-colors: #000000 #888888 #FFFFFF; border-right-colors: #000000 #888888 #FFFFF;} © Liam McMurray - Web Services, University of Bath
  20. 20. CSS 3 Borders .shadow {box-shadow: 10px 10px 5px #000;} © Liam McMurray - Web Services, University of Bath
  21. 21. CSS 3 Borders .image {border-image: url(border.png) 27 27 27 27 round round;} © Liam McMurray - Web Services, University of Bath
  22. 22. CSS 3 Text Effects .shadow {text-shadow: 2px 2px 2px #000;} © Liam McMurray - Web Services, University of Bath
  23. 23. CSS 3 Text Effects - web fonts @font-face { font-family: 'Helvetica Neue 25 Ultra Thin'; src: url('http://www.bath.ac.uk/fonts/hneue25.ttf'); } © Liam McMurray - Web Services, University of Bath
  24. 24. CSS 3 User Interface textarea {resize: both;} (This will add a tab to your form field allowing the user to resize the input area by dragging with the mouse) :target :enabled :disabled :checked (New pseudo-classes dealing particularly with the states of form elements) © Liam McMurray - Web Services, University of Bath
  25. 25. CSS 3 Multiple columns - finally! There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each: column-count column-width column-gap column-rule Adding headers - h2 {column-span: all;} © Liam McMurray - Web Services, University of Bath
  26. 26. CSS 3 Multiple columns Header for text that spans across all the columns Lorem ipsum dolor sit amet, consectetur Vestibulum hendrerit pellentesque adipiscing elit. Ut eleifend magna eget quam. Phasellus mi diam, interdum sit quam. Praesent imperdiet. Vestibulum amet, aliquam quis, egestas at, tincidunt. Vestibulum pharetra tempus neque. tortor. Suspendisse sed erat. Aliquam gravida purus vel mi. Integer Praesent imperdiet. Vestibulum fermentum nunc tempus tellus. Ut tincidunt. Vestibulum pharetra tempus rhoncus, purus sit amet feugiat aliquet, tortor. Suspendisse sed erat. nisi risus tincidunt velit, ac sollicitudin Aliquam gravida purus vel mi. lectus augue at nisi. A javascript way of acheiving this has been available for a number of years: http://www.alistapart.com/articles/css3multicolumn © Liam McMurray - Web Services, University of Bath
  27. 27. CSS 3 Making it all work - now Support for CSS3 is incomplete - however the approach of releasing it in modules means that every new iteration of a browser should be more compliant. It's worth noting at this point that many of the example styles will only work with a prefix specific to the rendering engine: -o- -khtml- -moz- -webkit- © Liam McMurray - Web Services, University of Bath
  28. 28. CSS 3 And Internet Explorer? Well, version 8 will be fully compliant with CSS2.1 which was proposed in 2007. CSS2 was released in 1999. The Beta 1 release failed to support between 25 and 30 defined selectors for CSS3. Maybe Internet Explorer 9 will be the one. © Liam McMurray - Web Services, University of Bath
  29. 29. CSS 3 And Internet Explorer? source: http://rakaz.nl/item/the_css_selector_test_and_ie_8_beta_1 © Liam McMurray - Web Services, University of Bath
  30. 30. CSS 3 In Closing Internet Explorer versions 6 & 7 still account for at least two thirds of the user agents employed to interact with the web. Progressive enhancement allows us to serve up a better user experience to those able to access it without breaking the service for those without compliant browsers. © Liam McMurray - Web Services, University of Bath
  31. 31. CSS 3 In Closing Design should not be compromised by browser limitations however, so we should endeavour to produce solutions that take advantage of CSS3 without relying on it. Rounded edges for example - these need to be done with images wherever they are integral to the page layout. © Liam McMurray - Web Services, University of Bath

×