1. CSS Cascading Style Sheets

2. Resources www.w3schools.com/css/css_reference.asp (list of all CSS properties) www.w3schools.com/css/ www.glish.com/css/ www.html.net/tutorials/css/ blog.html.it/layoutgala/ Great Book “CSS: The Missing Manual” - by David Sawyer McFarland

3. Style and CSS Basics Goal is to separate Style from Structure Style rules express the style characteristics of an element A set of style rules in an external document is a style sheet Example of Style Section (sets elements in the document to 24 point blue) P {color: blue; font-size: 24pt;} … 3

4. Style and CSS Basics A style rule is composed of two parts – Selector – Declaration h1 {color: red;} 4 Declaration Selector

5. Style and CSS Basics A declaration is composed of two parts – Property – Value – Syntax is Property and colon, then value and semicolon to allow multiple declaration h1 {color: red;} 5 Value Property

6. Style and CSS Basics Style rules can be applied to an element Style rules can be a section in a document Style rules can be in a document external to the Web pages to which it can be applied 6

7. Style and CSS Basics Style rules can be applied to an element similar to an element attribute – Example 7

8. Style and CSS Basics Example of a Style Section to be used for a Web page that sets h1 and h2 to a particular font and color of navy—Type Selector h1, h2 { font-family: 'Trebuchet MS'; Color: Navy; } 8

9. Style and CSS Basics Example of an external style sheet—referred to as a cascading style sheet—note that the content is the same as a Style Section but in a file with a.css extension h1, h2 { font-family: 'Trebuchet MS'; example.css Color: Navy; } 9

10. Style and CSS Basics Referencing an external cascading style sheet <title…. <link href="example.css" rel="stylesheet" type="text/css" /> 10

11. Style and CSS Basics Grouping Selectors h1 {color: red;} h2 {color: red;} can be grouped with elements separated by commas h1, h2 {color: red;} 11

12. Style and CSS Basics Combining Declarations p {color: blue;} p {font-size: 12pt;} can be expressed as follows p {color: blue; font-size: 12pt;} 12

13. Style and CSS Basics Using Descendant Selectors – Selects only elements that are within elements p b {color: blue;} can be more than 2 selector elements ul li b {color: blue;} 13

14. Style and CSS Basics Using the Class Attribute Selector.quote {color: blue; margin: 30px;} Reference the class This…. Note that this allows any element to use the style whereas a general style for an element applies to every instance of the element 14 Class Name Flag Character Declaration

15. Style and CSS Basics Making Class Selectors More Specific h1.quote {color: blue; margin: 30px;} restricts the use of the quote to the element 15

16. Style and CSS Basics Using the id Attribute Selector #preface {color: blue; margin: 30px;} reference the element This…. Note that the id value uniquely identifies this one element to which the rule applies 16 Class Name Flag Character Declaration

17. Style and CSS Basics CSS font measurement units 17 Absolute UnitsUnit AbbrevDescription CentimetercmStandard metric cm InchinStandard US inch MillimetermmStandard metric mm PicapcEqual to 12 points PointPt72 points / inch

18. Style and CSS Basics CSS font measurement units (cont) 18 Relative UnitsUnit Abbrev Description EmemThe width of a capital M in the current font— usually the same as the font size ExexThe height of the letter x in the current font PixelpxThe size of a pixel on the current monitor Percentage150%Sets a font size relative to the base font size

19. Style and CSS Basics Absolute Font Size Keywords – xx-small – x-small – small – medium – large – x-large – xx-large Relative Font Size Keywords – smaller – larger 19

20. Style and CSS Basics Fonts – Family {font-family: san-serif;} arial, courier ….. – Shortcut property designation p {font: 12pt arial bold;} – Text Spacing Properties text-align text-indent … – Text –decoration properties none, underline, overline, line-through, blink 20

21. Style and CSS Basics Fonts – Vertical alignment {vertical-align: super;} baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage – Transforming case{text-transformation: uppercase} capitalize, uppercase, lowercase, none 21

22. Style and CSS Basics Visual Formatting Model – Block elements,, … Allows specification of margin, border, and padding for all block-level elements – Inline elements – List-item 22

23. Style and CSS Basics 23

24. Style and CSS Basics Box specification example p {margin-left; 2 em; margin-right; 2 em; padding-left; 2 em; padding-right; 2 em; border-right; solid thin black; background: white} 24

25. Style and CSS Basics Special Box Properties – width – height – float – clear div {float: left; width: 200px;} 25

26. CSS for Styling CS38026

27. The good, the bad and the… ugly! Tags such as b, i, u, and font are discouraged in strict XHTML Why is this bad? CS38027 Shashdot. News for nerds!! You will never, EVER be BORED here! HTML Slashdot. News for nerds!! You will never, EVER be BORED here! output

28. Cascading Style Sheets (CSS) Describes the appearance, layout, and presentation of information on a web page – HTML describes the content of the page Describes how information is to be displayed, not what is being displayed Can be embedded in HTML document or placed into separate.css file CS38028

29. Basic CSS rule syntax A CSS file consists of one or more rules Each rule starts with a selector A selector specifies an HTML element(s) and then applies style properties to them – a selector of * selects all elements 29 selector { property: value;... property: value; } CSS p { font-family: sans-serif; color: red; } CSS

30. Attaching a CSS file A page can link to multiple style sheet files – In case of a conflict (two sheets define a style for the same HTML element), the latter sheet's properties will be used CS38030...... HTML <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css" /> HTML

31. Embedding style sheets: CSS code can be embedded within the head of an HTML page Bad style and should be avoided when possible (why?) CS38031 p { font-family: sans-serif; color: red; } h2 { background-color: yellow; } HTML

32. Inline styles: the style attribute Higher precedence than embedded or linked styles Used for one-time overrides and styling a particular element Bad style and should be avoided when possible (why?) CS38032 This is a paragraph HTML This is a paragraph output

33. CSS properties for colors CS38033 p { color: red; background-color: yellow; } CSS This paragraph uses the style above output

34. Specifying colors color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow RGB codes: red, green, and blue values from 0 (none) to 255 (full) hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full) 34 p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; } CSS This paragraph uses the first style above This h2 uses the second style above. This h4 uses the third style above. output

35. Grouping styles A style can select multiple elements separated by commas The individual elements can also have their own styles CS38035 p, h1, h2 { color: green; } h2 { background-color: yellow; } CSS This paragraph uses the above style. output This h2 uses the above styles.

36. CSS comments /*…*/ CSS (like HTML) is usually not commented as rigorously as programming languages such as Java The // single-line comment style is NOT supported in CSS The HTML comment style is also NOT supported in CSS CS38036 /* This is a comment. It can span many lines in the CSS file. */ p { color: red; background-color: aqua; } CSS

37. CSS properties for fonts CS38037 Complete list of font propertiesComplete list of font properties (http://www.w3schools.com/css/css_reference.asp#font)

38. font-family Enclose multi-word font names in quotes CS38038 p { font-family: Georgia; } h2 { font-family: "Courier New"; } CSS This paragraph uses the first style above. This h2 uses the second style above. output

39. More about font-family We can specify multiple fonts from highest to lowest priority Generic font names: – serif, sans-serif, cursive, fantasy, monospace If the first font is not found on the user's computer, the next is tried Placing a generic font name at the end of your font-family value, ensures that every computer will use a valid font CS38039 p { font-family: Garamond, "Times New Roman", serif; } CSS This paragraph uses the above style. output

40. font-size units: pixels ( px ) vs. point ( pt ) vs. m-size ( em ) 16px, 16pt, 1.16em vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger percentage font sizes, e.g.: 90%, 120% CS38040 p { font-size: 24pt; } CSS This paragraph uses the style above. output

41. font-size pt specifies number of point, where a point is 1/72 of an inch onscreen px specifies a number of pixels on the screen em specifies number of m-widths, where 1 em is equal to the font's current size CS38041 p { font-size: 24pt; } CSS This paragraph uses the style above. output

42. font-weight, font-style Either of the above can be set to normal to turn them off (e.g. headings) CS38042 p { font-weight: bold; font-style: italic; } CSS This paragraph uses the style above. output

43. CSS properties for text CS38043 Complete list of text propertiesComplete list of text properties (http://www.w3schools.com/css/css_reference.asp#text)

44. text-align text-align can be left, right, center, or justify CS38044 blockquote { text-align: justify; } h2 { text-align: center; } CSS The Gollum’s Quote We wants it, we needs it. Must have the precious. They stole it from us. Sneaky little hobbitses. Wicked, tricksy, false! output

45. text-decoration can also be overline, line-through, blink, or none effects can be combined: text-decoration: overline underline; CS38045 p { text-decoration: underline; } CSS This paragraph uses the style above. output

46. The list-style-type property Possible values: i. none : No marker ii. disc (default), circle, square iii. Decimal : 1, 2, 3, etc. iv. decimal-leading-zero : 01, 02, 03, etc. v. lower-roman : i, ii, iii, iv, v, etc. vi. upper-roman : I, II, III, IV, V, etc. vii. lower-alpha : a, b, c, d, e, etc. viii. upper-alpha : A, B, C, D, E, etc. x. lower-greek : alpha, beta, gamma, etc. others: hebrew, armenian, georgian, cjk-ideographic, hiragana… CS38046 ol { list-style-type: lower-roman; } CSS

47. Body styles Applies a style to the entire body of your page Saves you from manually applying a style to each element CS38047 body { font-size: 16px; } CSS

48. Cascading Style Sheets Properties of an element cascade together in this order: – browser's default styles – external style sheet files (in a tag) – internal style sheets (inside a tag in the page's header) – inline style (the style attribute of the HTML element) CS38048

49. Inheriting styles when multiple styles apply to an element, they are inherited a more tightly matching rule can override a more general inherited rule CS38049 body { font-family: sans-serif; background-color: yellow; } p { color: red; background-color: aqua; } a { text-decoration: underline; } h2 { font-weight: bold; text-align: center; } CSS This is a heading A bulleted list output A styled paragraph. Previous slides are available on the website.

50. Styles that conflict when two styles set conflicting values for the same property, the latter style takes precedence CS38050 p, h1, h2 { color: blue; font-style: italic; } h2 { color: red; background-color: yellow; } CSS This paragraph uses the first style above. output This heading uses both styles above.

51. W3C CSS Validator jigsaw.w3.org/css-validator/ checks your CSS to make sure it meets the official CSS specifications CS38051 <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> CSS output

52. CSS properties for backgrounds CS38052

53. background-image background image/color fills the element's content area CS38053 body { background-image: url("images/draft.jpg"); } CSS

54. background-repeat can be repeat (default), repeat-x, repeat-y, or no-repeat CS38054 body { background-image: url("images/draft.jpg"); background-repeat: repeat-x; } CSS

55. background-position value consists of two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc. value can be negative to shift left/up by a given amount CS38055 body { background-image: url("images/draft.jpg"); background-repeat: no-repeat; background-position: 370px 20px; } CSS

56. Aside: Favorites icon ("favicon") The link tag, placed in the HTML page's head section, can specify an icon – this icon will be placed in the browser title bar and bookmark/favorite CS38056 HTML

57. More CSS CS38057

58. HTML id attribute A unique ID for an element on a page Each ID must be unique; can only be used once in the page CS38058 Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output Coding Horror! Coding Horror! Our mission is to combine programming and human factors with geekiness! HTML

59. Linking to sections of a web page Link target can include an ID at the end, preceded by a # Browser will load that page and scroll to element with given ID CS38059 Visit textpad.com to get the TextPad editor.textpad.com View our Mission Statement View our Mission Statement output Visit <a href= "http://www.textpad.com/download/index.html#downloads"> textpad.com to get the TextPad editor. View our Mission Statement HTML

60. CSS ID selectors Applies style only to the paragraph that has the ID of mission CS38060 #mission { font-style: italic; font-family: "Garamond", "Century Gothic", serif; } CSS Coding Horror! Coding Horror Our mission is to combine programming and “human” factors with geekiness! output

61. HTML class attribute A way to group some elements and give a style to only that group Unlike an id, a class can be reused as much as you like on the page CS38061 Coding Horror! See our special deal on Droids! Today only! output Coding Horror! Coding Horror! See our special deal on Droids! Today only! HTML

62. CSS class selectors CS38062 Coding Horror! output.special { background-color: yellow; font-weight: bold; } p.shout { color: red; font-family: cursive; } CSS See our special deal on Droids! Today only!

63. CSS class selectors CS38063 Coding Horror! output See our special deal on Droids! Today only! Coding Horror! Coding Horror! See our special deal on Droids! Today only! HTML

64. CSS ID selectors CS38064 a:link { color: #FF0000; } /* unvisited link */ a:visited { color: #00FF00; } /* visited link */ a:hover { color: #FF00FF; } /* mouse over link */ CSS Buy Early Buy OftenBuy Early Buy Often! output

65. CSS ID selectors CS38065

66. Styling Page Sections CS38066

67. Why do we need page sections? Style individual elements, groups of elements, sections of text or of the page Create complex page layouts CS38067

68. Sections of a page Tag used to indicate a logical section or area of a page Has no appearance by default, but you can apply styles to it CS38068 Coding Horror! We’ll beat any advertised price! output Coding Horror! Coding Horror! See our special deal on Droids! We'll beat any advertised price! HTML See our special deal on Droids!

69. Inline Sections has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span CS38069 Coding Horror! See our spectacular deal on Droids! We’ll beat any advertised price! output Coding Horror! Coding Horror! See our spectacular deal on Droids! We'll beat any advertised price ! HTML

70. CSS context selectors applies the given properties to selector2 only if it is inside a selector1 on the page CS38070 selector1 selector2 { properties } CSS selector1 > selector2 { properties } CSS  applies the given properties to selector2 only if it is directly inside a selector1 on the page

71. Context selector example CS38071 Eat at Greasy’s Burger… The greasiest burgers in town! Yummy and greasy at the same time! output Eat at Greasy's Burger... The greasiest burgers in town! Yummy and greasy at the same time! HTML li strong { text-decoration: underline; } CSS

72. More complex example CS38072 Eat at Greasy’s Burger… The greasiest burgers in town! Yummy and greasy at the same time! output Eat at Greasy's Burger... The greasiest burgers in town! Yummy and greasy at the same time ! HTML #ad li.important strong { text-decoration: underline; } CSS

73. The CSS Box Model Every element composed of: – content – a border around the element – padding between the content and the border – a margin between the border and other content CS38073

74. The CSS Box Model (cont.) width = content width + L/R padding + L/R border + L/R margin height = content height + T/B padding + T/B border + T/B margin IE6 doesn't do this right CS38074

75. Document Flow – block elements CS38075

76. Document flow - inline elements CS38076

77. Document flow - a larger example CS38077

78. CSS properties for borders 78 output h2 { border: 5px solid red; } CSS This is a heading.  Thickness: px, pt, em, or thin, medium, thick  Style: none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid  color

79. More border properties 79

80. Another border example CS38080 output h2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double; } CSS This is a heading.  each side's border properties can be set individually  if you omit some properties, they receive default

81. CSS properties for padding CS38081

82. Padding example 1 CS38082 This is a first paragraph. This is a second paragraph. output p { padding: 20px; border: 3px solid black; } h2 { padding: 0px; background-color: yellow; } CSS This is a heading

83. Padding example 2 83 This is a first paragraph. output p { padding-left: 200px; padding-top: 30px; background-color: fuchsia; } CSS This is a first paragraph This is a second paragraph  each side's padding can be set individually  notice that padding shares the background color of the element

84. CSS properties for margins CS38084

85. Margin example 1 CS38085 output p { margin: 50px; background-color: fuchsia; } CSS  notice that margins are always transparent This is a second paragraph This is a first paragraph

86. Margin example 2 CS38086 output p { margin-left: 8em; background-color: fuchsia; } CSS  each side's margin can be set individually This is a second paragraph This is a first paragraph

87. CSS properties for dimensions 87 output p { width: 350px; background-color: yellow; } h2 { width: 50%; background-color: aqua; } CSS An h2 heading This paragraph uses the first style above

88. Centering a block element: auto margins CS38088 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. output p { margin-left: auto; margin-right: auto; width: 750px; } CSS  works best if width is set (otherwise, may occupy entire width of page)  to center inline elements within a block element, use text- align: center;