Multimedia and the World Wide Web HCI 201 Lecture Notes #7B

HCI 201 Notes #7B2 What will we learn today? Style properties Property values Font properties Text properties Color properties Background properties List properties Image processing 101

HCI 201 Notes #7B3 Property values Selector {attribute1: value1; attribute2: value2;... } Keyword property text-decoration: underline line-through, small, bolder, etc. - Use keyword value to express action or dimension. - Keyword values are not case-sensitive. Percentage property 120%, 85%, etc. - Percentage values describes a proportion relative to some other aspect of the content. - This value will not be dynamically re-rendered by the browser.

HCI 201 Notes #7B4 Property values URL property url( - “ URL ” is required. No space between URL and (. - No double quotation marks “” needed for the URL value. Color property green RGB(0,255,0) #00FF00 - Specify a color as a color name or a hexadecimal RGB triplet. - No space between RGB and (. - RGB(0,128,255)=RGB(0%,50%,100%)

HCI 201 Notes #7B5 Property values Length property [+/-] number/decimal 2-letter-unit 5cm, 0.25mm, 400px, 10pt, -100em, +30ex, etc. - Specify the size of a property. - A leading + or – means the values is to be added or subtracted from the immediate (current) value of that property. - cm: centimeters, mm: millimeters, in: inches,. - pt: points (1/72 of an inch), pc: picas (12 points). - px: size of one pixel on the screen display. - em: the width of the letter M in the current font. - ex: the height of the letter x in the current font. * No space between the value and the unit.

HCI 201 Notes #7B6 Property values Length property – absolute unit vs. relative unit Absolute units: cm, mm, pt, px, pc. Relative units: em, ex. - Absolute units are easy to use, but no guarantee of consistent displays on different browsers. - Relative units are scalable: relative to the size of a specific character in the default font used by the browser. *1em equals exactly to the browser’s default font size for body text. M x 1 em unit 1 ex unit

HCI 201 Notes #7B7 Font properties font-family h1 {font-family:Arial, Helvetica, Sans-serif} - Allows you to choose a font face for your web page. - Specific font: Arial, Times New Roman, Garamond, etc. (actually installed in a user’s computer) - CSS supports 5 generic font: serif, sans-serif, monospace, cursive, and fantasy. (generic description, each has a range of specific font types) - If the specific font type is not installed on the user’s machine, browser will look for a more generic one as a substitute. (Arial  helvetica  sans-serif, in the above example)

HCI 201 Notes #7B8 Font properties Generic font NamesFont samples serif Amig sans-serif Amig monospace Amig cursive Amig fantasy Amig

HCI 201 Notes #7B9 Font properties font-size Length values: 12pt, +200px, 0.75in, etc. Percentage values: 150%, 75%, etc. (relative to the size of the parent element) Keyword values: xx-small, x-small, small, medium, large, x-large, xx-large. larger, smaller (one size larger/smaller than the size of the parent element)

HCI 201 Notes #7B10 Font properties font-style normal, italic, oblique. font-weight - A value ranging from 100 (lightest) to 900 (heaviest), in intervals of A keyword ( normal or bold ) describing the absolute weight of the font, or a keyword ( lighter or bolder ) describing the weight of the font relative to the parent element. - Note that bold is a weight/thickness, while italic is a style. font-variant (not supported by Netscape) normal, small-caps (incorrectly rendered by IE).

HCI 201 Notes #7B11 Font properties font p {font-family: Times, Garamond, Serif; font-weight: bold; font-size: 12pt; line-height: 14pt} p {font: bold 12pt/14pt Times, Garamond, Serif} - To merge a collection of font property declarations. - Only the font-size and font-family are required. - You do not have to enter all the properties, but the ones you specify should follow the order (font-style, font-weight, font- variant, font-size/line-height, font-family).

HCI 201 Notes #7B12 Text properties Spacing properties p {letter-spacing: 5px} p {word-spacing: 2px} p {line-height: 2.0} “I ’ m s p a c e d o u t 5 p i x e l s b e t w e e n l e t t e r s”. Maxwell Science products Line height Font size

HCI 201 Notes #7B13 Text properties Alignment properties text-align:alignment alignment can be left, center, right, or justify. vertical-align:valignment valignment can be baseline, bottom, middle, sub, super, text-bottom, text-top, or top. Specify text properties in FrontPage - Right click on the selected text under Normal view. - Popup menu: “Font…”  “Character spacing”

HCI 201 Notes #7B14 Text properties text-indent:indentation indentation can be either a length value (em, px, pt, cm, etc.) or a percentage of the with of the paragraph. A negative indentation is called hanging indent: extends only the first line by the specified value. text-decoration:decoration decoration can be blink, overline, underline, or none. text-transform:transform transform can be capitalize, lowercase, uppercase, or none. Be careful: font-variant:small-caps

HCI 201 Notes #7B15 Color properties color body {color: teal} h1 {color: blue; font-style: italic} color: gray color: # color: RGB(128,128,128) color: RGB(50%,50%,50%) white=RGB(255, 255, 255) black=RGB(0, 0, 0) The higher RGB value, the brighter color we get.

HCI 201 Notes #7B16 Background properties background-color ReverseText {color:white; background- color:black} - Specify the background color for almost any element.

HCI 201 Notes #7B17 Background properties Background image background-image:url(ImageName) - Specify a background image for almost any element. ScribbleText {background-image:url(Image.gif)}

HCI 201 Notes #7B18 Background properties Background image background-repeat:repeat-value repeat-value can be repeat, repeat-x, repeat-y, or no-repeat. repeatrepeat-x repeat-yno-repeat

HCI 201 Notes #7B19 Background properties Background image background-position:h-value v-value Offsets the starting position of the background image down and to the right of that default point by certain distance (length, percentage, keyword) h-value specifies the horizontal distance. Keyword you can use: left, center, right V-value specifies the vertical distance. Keyword you can use: top, center, bottom - You can only position the image within the display area of that element. - The starting point is relative to the upper-left corner of that display area.

HCI 201 Notes #7B20 Background properties Two tricks body {background-image: url(WatermarkLogo.gif); background-position: center center; background-repeat: no-repeat} We have one wartermark logo image in the center of the page. body {background-image: url(RightRibbon.gif); background-position: top right; background-repeat: repeat-y} We have a vertical ribbon on the right-hand side of the page. What is the benefit of implementing them this way?

HCI 201 Notes #7B21 Background properties background bg {background-color: yellow; background-image: url(Image.gif); background-repeat: no-repeat; background-position: top, left} bg {background: yellow url(Image.gif) no-repeat top, left} - To merge a collection of background property declarations. - You do not have to enter all the properties, but the ones you specify should follow the order (color, image, repeat, attachment, position).

HCI 201 Notes #7B22 List properties list-style-type:type type specifies the appearance of the list label. It can be disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper- roman, lower-alpha, or upper-alpha. list-style-image: url(ImageName) ImageName is the URL or filename of the image you want to use for the list bullets.

HCI 201 Notes #7B23 List properties list-style-position: position position can be either inside or outside. List-style-position=outside (default) List-style-position=inside CSS treats each list as if it were surrounded by an invisible box. You can remember the values as the position of the list bullets (inside of the list/box, or outside the list/box).

HCI 201 Notes #7B24 List properties List-style list1 {list-style-type: circle; list-style-image: url(bullet.gif); list-style-position: outside} list1 {list-style: circle url(bullet.gif) outside} - To merge a collection of list-style property declarations. - If the browser does not support the image bullet, it will replace the image with an open circle.

HCI 201 Notes #7B25 Image processing 101 Resize - Adjust image size (Image > Image Size …) - Crop image (Select, then Image > Crop) - File size (Save as, then Quality) Brighten image Clone stamp Smudge