*CSS3 {display: magic;}




© Liam McMurray - Web Services, University of Bath
CSS - an introduction

  Simply put, a cascading style sheet is a file containing
  instructions on how to present the dat...
CSS - an introduction

  Simply put, a cascading style sheet is a file containing
  instructions on how to present the dat...
Selectors in CSS - an introduction

  Selectors are the hooks that allow anything we define in the
  style sheet to be ass...
Selectors in CSS 1

  in the beginning...

  tag
  h1 {color:yellow;}

  I'm Yellow!




© Liam McMurray - Web Services, U...
Selectors in CSS 1

  tag
  h1 {color:yellow;}

  I'm Yellow!

  using selectors
  h1.blue {color:blue;}

  I'm Yellow!
  ...
Selectors in CSS 1

  the descendant combinator
  p h3 {color:pink;}
  Some paragraph text that occurs after the <h3> with...
Selectors in CSS 2

  using the universal selector
  *td {font-size:85%;}
  (targets all instances of specified tag)


  u...
Selectors in CSS 2

  child combinators
  ul li a {border-left: 1px solid #E69138;}

               | link | link | link

...
Selectors in CSS 2

  pseudo selectors
  p:first-letter {font-size: 150%;}
  a:hover {background-color: red;}

  This is a...
Selectors in CSS 2

  almost there!

  the child combinator
  .navigation > a {color: white;}
  (all instances of the <a> ...
Selectors in CSS 1 & 2

  Compatibility...

  Everything I've shown you so far is fully supported by Internet
  Explorer 7...
Selectors in CSS 1 & 2

  Conclusion

  CSS 2 was a massive leap forward in terms of giving us the
  selectors with which ...
CSS 3

  Modules, baby.




© Liam McMurray - Web Services, University of Bath
Modules in CSS 3

  Some examples of modules in development:

        Updated Box Model
        Lists module
        Hyper...
Back to selectors

  Revisiting attributes.

  remember img [border] {margin: 0;}

  consider the implications of:
  a[hre...
Back to selectors

  Revisiting attributes.

  want all those images in the 'thumbs' folder to have a border?
  img [src*=...
CSS 3

  Borders

  .rounded {border-radius: 12px;}




© Liam McMurray - Web Services, University of Bath
CSS 3

  Borders

  .gradient {
  border-bottom-colors: #000000 #888888 #FFFFFF;
  border-top-colors: #000000 #888888 #FFF...
CSS 3

  Borders

  .shadow {box-shadow: 10px 10px 5px #000;}




© Liam McMurray - Web Services, University of Bath
CSS 3

  Borders

  .image {border-image: url(border.png) 27 27 27
  27 round round;}




© Liam McMurray - Web Services, ...
CSS 3

  Text Effects

  .shadow {text-shadow: 2px 2px 2px #000;}




© Liam McMurray - Web Services, University of Bath
CSS 3

  Text Effects - web fonts

  @font-face {
  font-family: 'Helvetica Neue 25 Ultra Thin';
  src: url('http://www.ba...
CSS 3

  User Interface

  textarea {resize: both;}
  (This will add a tab to your form field allowing the user to resize ...
CSS 3

  Multiple columns - finally!

  There are four properties which relate to the multiple column layout in CSS3,
  al...
CSS 3

  Multiple columns

  Header for text that spans across all the columns
  Lorem ipsum dolor sit amet, consectetur  ...
CSS 3

  Making it all work - now

  Support for CSS3 is incomplete - however the approach of
  releasing it in modules me...
CSS 3

  And Internet Explorer?

  Well, version 8 will be fully compliant with CSS2.1 which was
  proposed in 2007. CSS2 ...
CSS 3

  And Internet Explorer?




  source: http://rakaz.nl/item/the_css_selector_test_and_ie_8_beta_1


© Liam McMurray...
CSS 3

  In Closing

  Internet Explorer versions 6 & 7 still account for at least
  two thirds of the user agents employe...
CSS 3

  In Closing

  Design should not be compromised by browser limitations
  however, so we should endeavour to produc...
Upcoming SlideShare
Loading in...5
×

Css3

1,592

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,592
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
87
Comments
0
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×