1. CHAPTER 3 CSS & CSS3 อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1

2. Content CSS Introduction CSS Syntax CSS Selectors CSS How To... CSS Background CSS Text CSS Font 2

3. Content CSS Links CSS Tables CSS Border CSS Margin CSS Padding CSS Display and Visibility CSS Float CSS3 3

4. CSS Introduction What is CSS? CSS stands for Cascading Style Sheets CSS defines how HTML elements are to be displayed Styles were added to HTML 4.0 to solve a problem CSS saves a lot of work External Style Sheets are stored in CSS files 4

5. CSS Syntax Example p { color: red; /* This is a single-line comment */ text-align: center; } 5

6. CSS Selectors CSS selectors allow you to select and manipulate HTML elements. CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more. 6 The element Selector p { text-align: center; color: red; }

7. CSS Selectors (cont.) The id Selector The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single, unique element. Example #para1 { text-align: center; color: red; } /*Do NOT start an ID name with a number!*/ 7

8. CSS Selectors (cont.) The class Selector The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period character, followed by the name of the class: Example.center { text-align: center; color: red; } /*Do NOT start an class name with a number!*/ 8 Or Example p.center { text-align: center; color: red; }

9. CSS Selectors (cont.) Grouping Selectors h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } 9 Grouping Selectors h1, h2, p { text-align: center; color: red; }

10. CSS How To... Three Ways to Insert CSS External style sheet Internal style sheet Inline style 10 External Style Sheet

11. CSS How To... (cont.) Internal Style Sheet body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } 11

12. CSS How To... (cont.) Inline Styles This is a heading. 12 Multiple Styles Will Cascade into One Styles can be specified: in an external CSS file inside the section of an HTML page inside an HTML element

13. CSS How To... (cont.) Multiple Styles Will Cascade into One (cont.) body {background-color: linen;} Multiple Styles Will Cascade into One 13 ?

14. CSS Background Background Color The background-color property specifies the background color of an element. Example body { background-color: #b0c4de; } With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red" 14

15. CSS Background Background Image Example body { background-image: url("bgdesert.jpg"); } 15 Background Image - Repeat Horizontally or Vertically Example body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; }

16. CSS Background Background Image - Set position and no-repeat Example body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } 16 Background - Shorthand property Example body { background: #ffffff url("img_tree.png") no-repeat right top; }

17. CSS Text Text Color With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1 { color: #00ff00; } 17 Text Alignment Example h1 { text-align: center; } p { text-align: right; } p.test { text-align: justify; }

18. CSS Font Font Family Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". Example p { font-family: "Times New Roman", Times, serif; } 18 Font Style normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

19. CSS Font (cont.) Font Style (cont.) Example p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } 19

20. CSS Font (cont.) Font Size - Set Font Size With Pixels h1 { font-size: 40px; } - Set Font Size With Em h1 { font-size: 2.5em; /* 40px/16=2.5em */ } Use a Combination of Percent and Em body { font-size: 100%; } h1 { font-size: 2.5em; } 20

21. CSS Links Styling Links The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked Example a:link { color: #FF0000; } a:visited { color: #00FF00; } a:hover { color: #FF00FF; } a:active { color: #0000FF; } 21

22. CSS Links (cont.) Text Decoration Example a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } 22 Background Color Example a:link { background-color: red; } a:visited { background-color: blue; } a:hover { background-color: green; } a:active { background-color: black; }

23. CSS Tables Table Borders Example table, th, td { border: 1px solid black; } 23 Collapse Borders Example table { border-collapse: collapse; } table, th, td { border: 1px solid black; }

24. CSS Tables (cont.) Table Width and Height Example table { width: 100%; } th { height: 50px; } 24 Horizontal Text Alignment Example th { text-align: left; } Vertical Text Alignment Example td { height: 50px; vertical-align: bottom; }

25. CSS Tables (cont.) Table Padding Example td { padding: 15px; } 25 Table Color Example table, td, th { border: 1px solid green; } th { background-color: green; color: white; }

26. CSS Border Border Width Example p.one { border-style: solid; border-width: 5px; } 26 Border Color Example p.two { border-style: solid; border-color: #98bf21; } Border - Individual sides Example p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } Border - Shorthand property Example p { border: 5px solid red; }

27. CSS Margin Margin - Individual sides Example p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px; } 27 Margin - Shorthand property Example p { margin: 100px 50px; }

28. CSS Margin (cont.) The margin property can have from one to four values. margin: 25px 50px 75px 100px; – top margin is 25px – right margin is 50px – bottom margin is 75px – left margin is 100px margin: 25px 50px 75px; – top margin is 25px – right and left margins are 50px – bottom margin is 75px margin: 25px 50px; – top and bottom margins are 25px – right and left margins are 50px margin: 25px; – all four margins are 25px 28

29. CSS Padding Padding - Individual sides Example p { padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; } 29 Padding - Shorthand property Example p { padding: 25px 50px;}

30. CSS Padding (cont.) The padding property can have from one to four values. padding: 25px 50px 75px 100px; – top padding is 25px – right padding is 50px – bottom padding is 75px – left padding is 100px padding: 25px 50px 75px; – top padding is 25px – right and left paddings are 50px – bottom padding is 75px padding: 25px 50px; – top and bottom paddings are 25px – right and left paddings are 50px padding: 25px; – all four paddings are 25px 30

31. CSS Display and Visibility Hiding an Element - display:none or visibility:hidden visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout: Example h1.hidden { visibility: hidden; } display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there: Example h1.hidden { display: none; } 31

32. CSS Float How Elements Float Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. Example img { float: right; } 32 Floating Elements Next to Each Other Example.thumbnail { float: left; width: 110px; height: 90px; margin: 5px; } Turning off Float - Using Clear Example.text_line { clear: both; }

33. CSS3 CSS3 Modules Selectors Box Model Backgrounds and Borders Image Values and Replaced Content Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface 33

34. CSS3 Rounded Corners Example #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } 34

35. CSS3 Rounded Corners (cont.) CSS3 Rounded Corners 1. Four values - border-radius: 15px 50px 30px 5px: 2. Three values - border-radius: 15px 50px 30px: 3. Two values - border-radius: 15px 50px: 35

36. CSS3 Backgrounds CSS3 Multiple Backgrounds #example1 { background-image: url(pic1.gif), url(pic2.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } OR #example1 { background: url(pic1.gif) right bottom no-repeat, url(pic2.gif) left top repeat; } 36

37. CSS3 Backgrounds CSS3 Multiple Backgrounds #example1 { background-image: url(pic1.gif), url(pic2.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } OR #example1 { background: url(pic1.gif) right bottom no-repeat, url(pic2.gif) left top repeat; } 37

38. CSS3 Colors CSS supports color names, hexadecimal and RGB colors. In addition, CSS3 also introduces: RGBA colors HSL colors HSLA colors opacity 38

39. CSS3 Colors (cont.) RGBA Colors #p1 { background-color: rgba(255, 0, 0, 0.3);} 39 HSL Colors #p1 { background-color: hsl(120, 100%, 50%); } /* green */ HSLA Colors #p1 { background-color: hsla(120, 100%, 50%, 0.3); } /* green with opacity */ Opacity #p1 { background-color: rgb(255,0,0); opacity:0.6;} /* red with opacity */

40. CSS3 Gradients CSS3 Linear Gradients Syntax background: linear-gradient(direction, color-stop1, color-stop2,...); Linear Gradient - Top to Bottom (this is default) Example #grad { background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, blue); /* Standard syntax */ } 40

41. CSS3 Gradients (cont.) CSS3 Linear Gradients (cont.) Linear Gradient - Left to Right Example #grad { background: linear-gradient(to right, red, blue); /* Standard syntax */ } Linear Gradient – Diagonal #grad { background: linear-gradient(to bottom right, red, blue); /* Standard syntax */ } 41

42. CSS3 Shadow Effects Text shadow effect! h1 { text-shadow: 2px 2px; } 42 Text shadow effect! h1 { text-shadow: 2px 2px red; } Text shadow effect! h1 { text-shadow: 2px 2px 5px red; } Text shadow effect! h1 { color: white; text-shadow: 2px 2px 5px red; }

43. CSS3 Shadow Effects (cont.) CSS3 box-shadow Property div { box-shadow: 10px 10px; } 43 Text shadow effect! h1 { box-shadow: 10px 10px grey; } Text shadow effect! h1 { box-shadow: 10px 10px 5px grey; }

44. CSS3 Text CSS3 Text Overflow Example p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } 44

45. CSS3 Text (cont.) CSS3 Word Wrapping Example p { word-wrap: break-word; } 45 CSS3 Word Breaking Example p.test1 { word-break: keep-all; } p.test2 { word-break: break-all; }

46. CSS3 Web Fonts Using The Font You Want Example @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; } 46

47. CSS3 2D & 3D Transforms CSS3 2D Transforms translate() rotate() scale() skewX() skewY() matrix() 47 CSS3 3D Transforms rotateX() rotateY() rotateZ()

48. CSS3 Transitions CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration. Example: Mouse over the element below to see a CSS3 transition effect 48

49. CSS3 Animations CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! 49

50. CSS3 Multiple Columns CSS3 Multi-column Layout 50

51. CSS3 User Interface CSS3 Resizing 51

52. CSS3 Box Sizing The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height. 52

53. 53 THE END