Your SlideShare is downloading. ×
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Css3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css3

1,571

Published on

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

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,571
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
87
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. *CSS3 {display: magic;} © Liam McMurray - Web Services, University of Bath
  • 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. 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. 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. Selectors in CSS 1 in the beginning... tag h1 {color:yellow;} I'm Yellow! © Liam McMurray - Web Services, University of Bath
  • 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. 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. 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. 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. 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. 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. 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. 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. CSS 3 Modules, baby. © Liam McMurray - Web Services, University of Bath
  • 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. 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. 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. CSS 3 Borders .rounded {border-radius: 12px;} © Liam McMurray - Web Services, University of Bath
  • 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. CSS 3 Borders .shadow {box-shadow: 10px 10px 5px #000;} © Liam McMurray - Web Services, University of Bath
  • 21. CSS 3 Borders .image {border-image: url(border.png) 27 27 27 27 round round;} © Liam McMurray - Web Services, University of Bath
  • 22. CSS 3 Text Effects .shadow {text-shadow: 2px 2px 2px #000;} © Liam McMurray - Web Services, University of Bath
  • 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. 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. 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. 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. 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. 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. 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. 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. 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

×