1. 1 Cascading Style Sheet (CSS)

2. 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…  a style sheet: collection of styles for a Web page or Website  style sheets use common language and syntax  main style sheet standard: Cascading Style Sheets (CSS)

3. 3 CSS history  developed by WWW Consortium (www.w3c.org), the same organization that develops standards for HTML  designed to augment HTML, not replace it  a whole new way of formatting Web pages  provides several tools not available with standard HTML  different versions o CSS1 released in 1996 (fonts, text, color, background) o CSS2 released in 1998 (positioning, visual formatting) o CSS3, latest standard being developed

4. 4 Benefits of style sheets  a design tool  makes website design more flexible  easier to maintain and modify  more aesthetically interesting  consistent look

5. 5

6. Applying a Style Sheet  Three ways to apply a style to an HTML document: 1. Inline Styles 2. Embedded Style Sheet 3. External Style Sheet 6

7. 7 Style types o Inline styles  styles are added to each tag within the HTML file  style only affects that particular tag

8. 8 Using inline styles  format a single section, better use inline style  syntax o tag is the name of an HTML element (h1, h2, p, etc) o style declarations  the styles defined for the particular tag  must be enclosed within double quotation marks  use semi-colon separate multiple attributes o e.g.

9. But what if there are same tags appearing multiple times in the webpage and you want to format all of them uniformly 9

10. 10 Style types (contd.) o Inline styles  styles are added to each tag within the HTML file  style only affects that particular tag o Embedded or global styles  applied to an entire HTML file  allowing the Web designer to modify the appearance of any tag in the document

11. 11 Creating an embedded style  embedded style, a style applied to various sections within a Web page  use tag within the … section  within tag, enclose style declarations  syntax style declarations

12. 12 Embedded Style  syntax for style declaration: selector{attribute1:value1; attribute2:value2;...} o collection of attributes and values  selector o identifies an element in your document, e.g., a heading o identifies attributes and values within the braces for that element  example h1 {text-align: center; color: red}

13. 13 Embedded Style (contd.)  Simple Practice exercise:  Using Embedded styles, convert “course description” and “reference texts” in main.html to blue

14. 14 Grouping selectors  What if there are many tags or blocks which follows the same style throughout the page?  apply the same declaration to a group of selectors by including all of the selector names separated by commas h1, h2, h3, h4, h5, h6 {text-align: center; color: red}

15. Now the next level!  Just the way we changed the styles uniformly in a single webpage, how about applying that across multiple webpages, i.e., your website  We now need an external style sheet 15

16. 16 Style types (contd.) o Inline styles  styles are added to each tag within the HTML file  style only affects that particular tag o Embedded or global styles  applied to an entire HTML file  allowing the Web designer to modify the appearance of any tag in the document o Linked or external style sheets  placed in an external file, linked with Web pages  allowing Web designer to modify the appearance of tags in several documents across the website

17. 17 Creating an external style sheet 1. Crate a new text file 2. Save it using the extension “.css ”, 3. Place your styles here  Within a style sheet, tag is NOT needed, only need style declarations

18. 18 Creating an external style sheet  Create a text file containing style declarations /* Author: author name */ h1, h2, h3, h4, h5, h6 {text-align: center; color: red}  Name the file: mystylesheet.css  Remember: o Only external stylesheet creation not sufficient o Need to link the stylesheet and the html pages where you need the styles

19. 19 Linking to style sheets with  Example: link to a style sheet named “ mystylesheet.css, ”  Placement within … of the webpage where you need the styles

20. Style Conflict  Apply external, embedded and inline all three types of styling with h1 tag o External:  Text-align: center and color: red o Embedded:  Text-align: center and color: blue o Inline:  Text-align: center and color: green  What is the result? 20

21. 21 Style precedence  in case of styles conflict, precedence is determined in the following order: 1. an inline style overrides any embedded style or external style sheet 2. an embedded style overrides an external style sheet 3. an external style sheet overrides the internal style rules set by the Web browser

22. Understanding Cascading Order 22

23. Style Inheritance  If a style is not specified for an element, it inherits the style of its parent element. This is called style inheritance body {color: green} p {color: red}  In the above example, the body element is the parent element 23

24. Practice exercise  All the elements in my unordered (bulleted) list must be red throughout the website  All the elements in my ordered (numbered) list must be blue throughout the website 24

25. CSS Part 2 25

26. 26 What we will cover today… 1. Managing Font-size 2. Letter and word spacing 3. Text appearance and attributes 4. Hyperlinks appearance and attributes

27. 27 Managing font size  in CSS, use font-size attribute to manage font sizes o body {font-size: some value}  font sizes can be expressed in 4 ways 1. as a unit of length 1. Absolute unit 2. Relative unit 2. as a descriptive keywords 3. with a keyword expressing the size relative to the font size of parent element 4. as a percentage of the parent element

28. 28 1. Unit of length: Absolute units  use unit of length, absolute units or relative units o absolute units define the font size based on one of the following standard units of measurement:  mm (millimeter),  cm (centimeter),  in (inch),  pt (point; 1pt=1/72in)  pc (pica; 1pc=12pt)

29.  relative unit expresses the font size relative to a size of a standard character o em unit is equal to the width of capital letter “ M ” in browser ’ s default font size o ex unit is equal to the height of a small “ x ” in default font size 29 1. Unit of length: Relative units

30. 30 1. Unit of length: Pixels  a pixel is the smallest element recognized by the monitor  text that is 10 pixels high may be perfectly readable at a low-resolution (e.g., 640 x 480) monitor, but it can become unreadable at high-resolution (e.g., 1024 x 768) monitor

31. 31 2. Descriptive keywords  seven descriptive keywords for font size o xx-small o x-small o small o medium o large o x-large o xx-large  Example body {font-size: medium}

32. 32 3. Keywords: smaller, larger  Size relative to parent element  using keywords “ larger ” and “ smaller, ” o makes the font one size larger or smaller than the size of parent element o example: to make paragraph text one size larger than the body text: body {font-size: medium} p {font-size: larger}

33. 33 4. Font size as percentage of parent tag The font size of bold content (defined by tag) is 150% of the size of surronding text (where the font size is defined by tag)

34. Text Appearance and Styling 34

35. 35 Specifying letter, word spacing  set the space between individual letters i n d i v i d u a l l e t t e r s  letter-spacing attribute letter-spacing: size  change the spacing between individual words individual words  word-spacing attribute word-spacing: size  size can be o any number expressed in the same measuring units used to describe font size (inches, millimeters, centimeters, em units, etc.)

36. 36 Special text attributes  CSS provides three attributes for special text effects: 1. text-decoration 2. text-transform 3. font-variant

37. 37 text-decoration attribute  attribute name: text-decoration  values o none (basically default; no change) o underline o overline o line-through  examples

38. 38 text-transform attribute  attribute name: text-transform  attribute value: o capitalize capitalize the first letter of each word in a paragraph

39. 39 text-transform attribute  attribute name: text-transform  attribute value: o uppercase display the text in all capital letters

40. 40 text-transform attribute  attribute name: text-transform  attribute value: o lowercase display the text in all lowercase letters

41. 41 text-transform attribute, example

42. 42 font-variant attribute  font-variant attribute create small caps  small caps are capital letters that are the same size as lowercase letters  syntax font-variant: small-caps

43. 43 font-variant attribute, example

44. Contextual Selector 44

45. 45 Working with style inheritance  Web pages invariably have elements (e.g., tags) placed within other elements  sample tree structure of Web elements

46. 46 Parent and descendant elements  an element that lies within another element is called a descendant or descendant element o e.g., in previous slide, tag is a descendant of tag  an element that contains another element is called the parent or parent element. o e.g., tag is the parent of all other tags used to format the Web contents  using the principle of inheritance, styles defined for a parent tag are transferred to its descendants tags

47. 47 Contextual selectors  use tree structure to better control styles o apply a style only to direct descendant of a parent element, use syntax: e1 e2 o e1 and e2 are the names of HTML elements (i.e. tags) and e2 is directly below e1 in the tree structure of elements o example: li b {color:blue} only changes the color of the boldface text residing within a tag to blue  not all browsers support contextual selectors

48. 48 Hyperlink appearance and attributes  Hyperlink styling  What is the tag for hyperlinks?  Introduce the tag for hyperlink as a selector in CSS  All the attributes discussed so far would work when applied in CSS

49. Hyperlink appearance change  By default, hyperlinks are blue and have underline 1. Change them to red hyperlinks and no underline (default for my website) 2. Change them to red hyperlinks, small caps with lines both above and below the links 49

50. Hyperlink Special Selector  a is the general selector  Link: used for un-visited link o a:link  Visited: used for visited link. o a:visited  Active: used for the link when it is clicked. o a:active  Hover: used for the link when the mouse hovers over it o a:hover 50

51. Practice exercise  Write a CSS file with all the Styles as defined below for the hyperlinks:  The hyperlinks must be color green with underline text- decoration.  While hovering over the hyperlink with mouse, the hyperlinks must turn UPPERCASE TEXT, color blue and without any underline.  The visited hyperlinks must turn into strike through line. 51

52. CSS Part 3 52

53. 53 What we will cover… 1. Color (decimal and hexadecimal representation) 2. Styling lists 3. Floating elements 4. Positioning objects with CSS

54. 1. Working with Color  Color – defines color for text etc.  E.g., p {color: red}  CSS identifies a color in one of two ways: o By the color name (e.g., red, green, blue etc.) o By the color value (a number that represents the color)  A color value is a numerical expression that precisely describes a color o To have more control and more choices, specify colors using color values 54

55. Working with Color  Any color can be thought of as a combination of three primary colors: red, green, and blue o Primary colors 55 RGB

56. Working with Color 56  By varying the intensity of each primary color, you can create almost any color and any shade of color  This principle allows a computer monitor to combine pixels of red, green, and blue to create the array of colors you see on your screen

57. Working with Color (decimal representation)  Software programs, such as your Web browser, define color mathematically  The intensity of each of three colors (RGB) is assigned a number from 0 (absence of color) to 255 (highest intensity)  In this way, 255 3, or more than 16.7 million, distinct colors can be defined  Each color is represented by a triplet of numbers, called an RGB triplet, based on the strength of its Red, Green, and Blue components o p {color:RGB(0,255,0)} 57

58. Working with Color (hexadecimal representation)  IN CSS, color values are typically entered as hexadecimals  A hexadecimal is a number based on a base-16 numbering system rather than a base-10 numbering system that we use every day o Base 10 counting uses a combination of 10 characters (0 through 9) to represent numerical values o Hexadecimals include six extra characters: A (for 10), B (for 11), C (for 12), D (for 13), E (for 14), and F (for 15) 58

59. Working with Color (hexadecimal representation)  To represent a number in hexadecimal terms, you convert the decimal value to hexadecimal o Similar to decimal to binary conversion  Here instead of 2, you divide by 16  Example: o Convert decimal 21 to hexadecimal  Divide 21 by 16  Take the quotient and the remainder o The number 255 is equal to (16 x 15) + 15, or FF in hexadecimal format (remember that F = 15 in hexadecimal)  Once you know the RGB triplet of a color, the color needs to be converted to the hexadecimal format o p {color:RGB(0,255,0)} => p {color: #00FF00} 59

60. Working with Color  Basic colors: 17 colors 60

61. Working with Color 61 Partial list of extended color names

62. 2. Applying Styles to Lists  How do we create the list elements? o Using either or  - unordered list o By default, HTML provides a bulleted list  Solid filled circle – these are called list markers  - ordered list o By default, HTML provides a numbered list  1, 2, 3, 4 etc. – list markers  What if I want to use different styles of list markers for my lists? o How about an empty circle instead of a solid filled circle? 62

63. Applying Styles to Lists (contd.)  There are many different types of list markers possible  To specify the list marker, apply the style ul {list-style-type: type} ol {list-style-type: type} 63

64. Applying Styles to Lists (contd.)  Location of the list marker o Most browsers place the list marker to the left of the block, lining up the markers with each list item list-style-position: position 64

65. Practice exercise  Create a CSS file to apply the following styles to my lists 65 I. Main Point 1 A. Sub point 1 B. Sub point 2 1. Item 1 2. Item 2 a. Sub item 1 b. Sub item 2 3. Item 3 C. Sub point 3 II. Main Point 2 III. Main Point 3 Hint:

66. 3. Floating an Element 66

67. Floating an Element  To float an element, first distinguish the element o Mostly images are floated o Create an id for the element in the html code  Use the style in the CSS file #id {float: position} where position is o none (to turn off floating) o left or o right  Suppose, jjay is the id of the image  Add this in the stylesheet: o #jjay {float: right} 67

68. 4. Positioning Objects with CSS 68

69. Positioning an element  Float gave us partial freedom to place an element in the browser  CSS positioning give us full freedom to place an element anywhere in the page #logo {position: absolute; left 100px; top: 150px} 69

70. Positioning elements with CSS  Absolute positioning enables you to place an element at specific coordinates either on a page or within a containing element #logo {position: absolute; left: 100px; top: 50px}  Relative positioning is used to move an element relative to its default position on the page #logo {position: relative; left: 100px; top: 50px}  Additional feature: You can fix an element at a specific spot in the document window while the rest of the page scrolls by setting the value of the position style to fixed #logo {position: fixed; left: 100px; top: 50px} 70

71. Positioning Objects with CSS 71

72. Positioning Objects with CSS  Create div containers for each note  Each note should have a unique id  Add a class attribute to apply a common set of styles 72 place your notes here..notes {font-size: 8pt; background-color: yellow; border: 3px outset red; width: 130px}.notes p {margin: 5px} Introducing Styles...

73. Border style .notes {font-size: 8pt; background-color: yellow; border: 3px outset red; width: 130px}  border: 3px outset red; o Creates a 3d outset border  border: 3px inset red; o Creates a 3d inset border  Dotted  Dashed  Solid  Double 73