CSS Presentation

1,161 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,161
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS Presentation

  1. 1. CSS PresentationDoncho MinkovTechnical Trainerhttp://minkov.itTelerik Web Design Coursehtml5course.telerik.com
  2. 2. Table of Contents Borders Overflow Margins and Paddings The Box Model Width and Height Other CSS Properties 2
  3. 3. Borders
  4. 4. Borders border-width: thin, medium, thick or numerical value (e.g. 10px) border-color: color alias or RGB value border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset Each property can be defined separately for left, top, bottom and right  border-top-style, border-left-color, … 4
  5. 5. Border Shorthand Property border: shorthand rule for setting border properties at once: border: 1px solid red is equal to writing: border-width:1px; border-color:red; border-style:solid; Specify different borders for the sides via shorthand rules: border-top, border-left, border-right, border-bottom When to avoid border:0 5
  6. 6. Borders Live Demoborder-rules.html
  7. 7. Rounded Corners
  8. 8. Rounded Corners Rounded corners are actually a part of CSS 3  Supported in all major browsers  Firefox, IE 9, Chrome, Opera and Safari Done by the border-radius property border-radius: [<length>|<%>][<length>|<%>]? Three ways to define corner radius: border-radius: 15px; border-radius: 15px 15px 15px 10px; border-radius: 15px 20px;
  9. 9. Rounded Corners Live Demo
  10. 10. Overflow
  11. 11. Overflow overflow: defines the behavior of element when content needs more space than you have specified by the size properties or for other reasons. Values:  visible (default) – content spills out of the element  auto - show scrollbars if needed  scroll – always show scrollbars  hidden – any content that cannot fit is clipped 11
  12. 12. Overflow Live Demooverflow-rule.html
  13. 13. Margins and Paddings
  14. 14. Margin and Padding margin and padding define the spacing around the element  Numerical value, e.g. 10px or -5px  Can be defined for each of the four sides separately - margin-top, padding-left, …  margin is the spacing outside of the border  padding is the spacing between the border and the content  What are collapsing margins? 14
  15. 15. Margin and Padding: Short Rules margin: 5px;  Sets all four sides to have margin of 5 px; margin: 10px 20px;  top and bottom to 10px, left and right to 20px; margin: 5px 3px 8px;  top 5px, left/right 3px, bottom 8px margin: 1px 3px 5px 7px;  top, right, bottom, left (clockwise from top) Same for padding 15
  16. 16. Margins and Paddings Live Demo margins-paddings-rules.html
  17. 17. The Box ModelMarginBorderPaddingContent 17
  18. 18. IE Quirks Mode When using quirks mode (pages with no DOCTYPE or with a HTML 4 Transitional DOCTYPE) Internet Explorer violates the box model standard! 18
  19. 19. H e H i g e hWidth t i g hWidth t
  20. 20. Width and Height width – defines numerical value for the width of element, e.g. 200px height – defines numerical value for the height of element, e.g. 100px  By default the height of an element is defined by its content  Inline elements do not apply height, unless you change their display style 20
  21. 21. Width and Height Live Demo size-rules.html
  22. 22. List StylesFor Ordered and Unordered Lists
  23. 23. Styles for Lists List properties are used to define the look and feel of the list items  Mainly to change the list item marker Normal styles:  List-style-type  Values for <ol>: circle, square,…  Values for <ul>: upper-roman, lower-alpha  Values for both: none ul { list-style-type:none; }
  24. 24. List Styles Live Demo
  25. 25. Images as Bullets We can set a image for the bullets of a list  With the property list-style-image ul { list-style-image: url(images/blue-dot.jpg); }  Does not work equally for all browsers  IE puts less space between the bullet and the content Shorthand property ul { list-style: bullet url(images/blue-dot.jpg); }
  26. 26. Images as Bullets - Alternative We can place a background in the left-most  It looks like a image-bullet ul { list-style-type: none; padding: 0px; margin: 0px; } li { background-image: url("images/blue-dot.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
  27. 27. Styles for List Tags Live Demo
  28. 28. Creating a Menu-like List In 5 minutes
  29. 29. Creating a Menu-like List What a menu has?  Some buttons that are arranged from right to left  We need to make it extensible Create a list  Adding new list item is easy  No worries when disabling the styles
  30. 30. Creating a Menu-like Listul.menu{ list-style-type: none; padding: 0px; margin: 0px;}li.menu-item{ Menu-example float: left; margin: 10px;} 30
  31. 31. Creating a Menu-like List Live Demo
  32. 32. Other CSS Properties
  33. 33. Other CSS Properties cursor:specifies the look of the mouse cursor when placed over the element  Values: crosshair, help, pointer, progress, move, hair, col-resize, row- resize, text, wait, copy, drop, and others white-space – controls the line breaking of text. Value is one of:  nowrap – keeps the text on one line  normal (default) – browser decides whether to brake the lines if needed 33
  34. 34. Other CSS Properties Live Demo
  35. 35. Maintenance Example Title Title Some random Title Some random Title text here. You Some random text here. You Title can’t read it text here. You Title can’t read it Some random anyway! Har har can’t read it anyway! Har har Title text here. You Title Some random har! Use Css. Some random anyway! Har har har! Use Css. can’t read it text here. You text here. You Some random Some random har! Use Css. anyway! Har har can’t read it can’t read it text here. You text here. You Title har! Use Css. anyway! Har har anyway! Har har can’t read it can’t read it Title Title har! Use Css. Some random har! Use Css. anyway! Har har anyway! Har har text here. You Some random Some random har! Use Css. har! Use Css. can’t read it text here. You text here. You Title anyway! Har har can’t read it can’t read itTitle Some random har! Use Css. anyway! Har har anyway! Har harSome random Title Title Title text here. You har! Use Css. har! Use Css.text here. You Title can’t read it Some random Some random Some randomcan’t read it anyway! Har har Some random text here. You text here. You Title text here. Youanyway! Har har har! Use Css. text here. You can’t read it can’t read it can’t read it Titlehar! Use Css. Some random can’t read it anyway! Har har anyway! Har har anyway! Har har text here. You Title Some random anyway! Har har har! Use Css. har! Use Css. har! Use Css. Title har! Use Css. Title can’t read it text here. You Some random anyway! Har har can’t read it Some random Some random Title text here. You har! Use Css. anyway! Har har text here. You text here. You can’t read it Some random har! Use Css. can’t read it can’t read it anyway! Har har text here. You anyway! Har har anyway! Har har har! Use Css. Title can’t read it Title har! Use Css. har! Use Css. anyway! Har har Some random har! Use Css. Some random CSSTitle text here. You text here. You Title Title can’t read it can’t read itSome random Some random anyway! Har har anyway! Har hartext here. You Some random Title Title Title text here. You har! Use Css. har! Use Css.can’t read it text here. You can’t read it Some random Some random Some randomanyway! Har har can’t read it anyway! Har har Title text here. You text here. You text here. Youhar! Use Css. anyway! Har har har! Use Css. can’t read it can’t read it can’t read it har! Use Css. Some random anyway! Har har anyway! Har har anyway! Har har text here. You Title Title file har! Use Css. har! Use Css. har! Use Css. can’t read it Some random Some random anyway! Har har Title text here. You Title Title text here. You har! Use Css. can’t read it can’t read it Some random Some random Some random anyway! Har har anyway! Har har Title text here. You text here. You text here. You har! Use Css. har! Use Css. can’t read it can’t read it can’t read it Some random anyway! Har har anyway! Har har anyway! Har har Title text here. You Title Title har! Use Css. har! Use Css. har! Use Css. can’t read it Title Title Title Some random Some random Some random anyway! Har har text here. You Some random text here. You Some random text here. You Some random har! Use Css. can’t read it text here. You can’t read it text here. You can’t read it Title text here. You anyway! Har har can’t read it anyway! Har har can’t read it anyway! Har har can’t read it har! Use Css. har! Use Css. har! Use Css. Some random anyway! Har har anyway! Har har anyway! Har har text here. You har! Use Css. har! Use Css. har! Use Css. Title Title can’t read it anyway! Har har Some random Title Some random Title har! Use Css. text here. You Some random text here. You Some randomTitle can’t read it text here. You can’t read it text here. You anyway! Har har can’t read it anyway! Har har can’t read itSome random Title har! Use Css. anyway! Har har har! Use Css. anyway! Har har Titletext here. You Some random har! Use Css. har! Use Css.can’t read it Title text here. You Title Some randomanyway! Har har can’t read it text here. You Some random Some random Titlehar! Use Css. anyway! Har har can’t read it text here. You text here. You har! Use Css. Some random anyway! Har har can’t read it can’t read it Title Title text here. You har! Use Css. anyway! Har har anyway! Har har can’t read it Some random har! Use Css. Some random har! Use Css. anyway! Har har text here. You text here. You Title Title har! Use Css. can’t read it can’t read it Some random Some random anyway! Har har anyway! Har har text here. You text here. You har! Use Css. har! Use Css. can’t read it can’t read it anyway! Har har anyway! Har har har! Use Css. har! Use Css. 35
  36. 36. CSS Presentation http://html5course.telerik.com
  37. 37. Homework• Add a border to all the exercises from the previous presentation (CSS Overview) 37
  38. 38. Homework (2)1. Implement the following video player  Use tables for the layout  List tags for the playlist items and the controls 38
  39. 39. Homework (3)1. Create a web page that looks like the Windows calculator in Programmer view  It should look exactly the same  Implement hover effects for the buttons  The calculator should not have any functionality 39
  40. 40. Homework (4)1. Implement the following with using tables for the layout and CSS for the styles 40

×