1 / 21

COS 125

This agenda outlines key concepts in web design, with an emphasis on font styling and formatting techniques. Key learning objectives include setting font families, embedding fonts, and writing style rules for various text attributes such as italics, boldness, size, line height, tracking, and color. Students should be aware of assignment deadlines, with Assignment #6 and a Capstone Progress Report both due on April 7. For additional resources and examples, the lecture points to both the textbook website and supplementary online resources.

kendall-stevens
Download Presentation

COS 125

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. COS 125 DAY 18

  2. Agenda • Assignment #5 Corrected • 6 A’s, 2 B’s, 3 C’s 4 non-submits • Assignment #6 Due April 7 • Next Capstone Progress Report Due April 7 • WebSite for text book • http://www.cookwood.com/html5ed/ • Lecture/Discuss Formatting With Styles

  3. Learning Objectives • Understand how to set a style for a font family • Describe how to embed fonts on a page • Understand how to write style rules to make text in italics, in bold, in varying sizes, and with varying line height. • Understand how to control tracking and kerning, white space and text alignment • Understand how to write font styles in shorthand • Review how to set text Color and text background • Understand how to use both positive and negative indents • Learn to change text case, create small caps and use text decorations

  4. Formatting with Styles • Allows for more possibilities than xHTML formatting • Separate Format from Content • Examples of everything in this lecture available at http://perleybrook.umfk.maine.edu/samples/StyleFormat.htm

  5. Choosing a font family • Not all fonts are available on all PCs • Allows you a pick of group of possible fonts to use • There is no limit to the names of fonts you can use for a font-family group • Font name will be tried in the order given until one of the fonts is available to browser • Selector {font-family:“font 1”, “font 2”, “default font”} • Generic fonts for default • serif, sans-serif, cursive, fantasy and monospace • Example • h1{font-family:“Times New Roman”, serif} • H2{font-family:“courier”, “helvetica”, sans-serif}

  6. Embedding Fonts on a Page • Force browser to use a font you choose • Must make font available to Browser • Use the following before your refer to “yourFont” • @font-face{font-family:”yourFont” src: url(font.eot)} • You must create the *.eot file with special program • http://www.microsoft.com/typography/web/embedding/weft3/default.htm?fname=%20&fsize • Doesn’t work with all browsers • Advice: Don’t bother.. • Too much effort with little results • Create a transparent gif instead

  7. Creating Italics • Use to Italicize fonts • selector { font-style:italic} • Can also use oblique for fonts that do not have a italicize version • To remove italics • Selector {font-style:normal} • Example • .emph{font-style:italic} • h3{font-family:sans-serif, font-style:oblique}

  8. Applying Bold Formatting • Allows you to vary boldness of text • selector{font-weight:bold} • Can also use “bolder” or “lighter” • Can also use a multiple of 100 to 900 • 400 is normal • 700 is bold • Can also set to “normal” • Examples • h1{font-weight:normal} • em{font-weight:800}

  9. Setting Font Size • Two methods • Specific Font size • Selector{font-size:18px} • Size in pixels • keywords xx-small, x-small, small, medium, large, x-large or xx-large • Relative to parent • Selector{font-size:2em or 200%} • 1em = 100%, .75em = 75% • Keywords larger or smaller • Examples • h1{font-size:25px} • p{font-size:90%}

  10. Setting Line Height • Sets the amount of space between lines • Selector{line-height:2 or 150% or 18px} • In pixels use 18px • For percentage above font size in line use 150% • For twice font size use 2

  11. Setting all Font values at once • Use the property font: • First set font-style (italic, oblique or normal) • Then set font-weight (normal, bold, bolder, lighter or n*100) • Then set small caps (normal small-caps) • The above 3 can be omitted, if so they are set to normal • Type font size • If desired /N where N is line-height • Then type in font-family values • Examples • h1{font:italic,bold,small-caps, 20px, “Arial”, serif} • h2{font: 20px/150%, “Times New Roman”, serif}

  12. Setting the Text Color • Sets the color of the text • Selector{color: blue or #0000ff or rgb(0,0,255) or rgb(0%, 0% 100%)} • Value can be one of 16 predefined colors • #rrggbb hexidecimal • rgb(r,g,b) where each letter is 0-255 • rgb(r%,g%,b%) where each each letter is 0-100 • Examples • h1{color:red} • h1{color:#aabbff} • h1{color:rgb(128,128,255) • h1{color:rgb(50%,50%,100%)

  13. Changing the Text’s Background • Each element can have a background color or image • Selector{backgound:blue or #0000FF} • Can also set to “transparent” • Can also be set to an image using url(image.gif) • Type “repeat” to tile • “Repeat-x” or “repeat-y” to tile direction only • no-repeat to prevent tiling • Fixed or scroll to determine whether background moves with element • Can also to a specific location using X Y • Examples • body{background:blue} • body{background:url(picture.gif) repeat fixed) • p{background:url(picture.gif) repeat scroll) • body{background:url(picture.gif) fixed x=center, y=center)

  14. Controlling spacing • Spacing between words (tracking) • Selector{word-spacing:length) • Spacing between letter (kerning) • Selector{letter-spacing:length) • Length can be • Size in pixels 16px 20px • “normal” for default browser setting • Relative to parent length 1em 1.4em • Examples • p{word-spacing:1.3em,letter-spacing:12px)

  15. Adding indents • Indentation is how much space before first line in paragraph • p{text-indent:lenght} • Length can be • Size in pixels 16px 20px • 0 for no indent • Relative to parent length 1em 1.4em • Negative number for “hanging” indent

  16. Setting White Space Properties • With spaces (blanks and returns) in xHTML are ignored or displayed as a single space • You can use white-space property to modify that behavior • Selector{white-space:pre or nowrap or normal} • pre shows all space (preformatted) • nowrap ignores returns • normal is default behavior • Example • p{white-space:pre}

  17. Aligning Text • Allows you to align text for certain elements • May effect spacing • Selector{text-align:left or right or justify or center} • Left means align to left border • Right means align to right border • Justify means align top both borders • Center means align to center of screen • Examples • h1{text-align:center} • p{text-align:justify}

  18. Changing text case • Can change text from uppercase to lowercase or vice versa or capitalize first letter of each word • Selector{text-transform:capitalize or uppercase or lowercase} • Examples • h1{text-transform:capitalize) • h2{text-transform:uppercase} • small{text-transform:lowercase}

  19. Using Small Caps • Some fonts have smaller versions of uppercase letters • Selector{font-variant:small-caps} • Example • h2{font-variant:small-caps)

  20. Decorating Text • Lets you modify text with underlines, overlines, lines through text and blinking • Selector{text-decoration: value} • “value” can • underline • overline • line-through • blink • Examples • h1{text-decoration:blink} • h1{text-decoration:underline} • Blink does not work with all browsers

  21. Tips for Assignment #6 • For assignment #6 I gave you a xHTML page with lots of texts and various elements • You cannot modify the xHTML page • You will have create several different style sheets to format this page • Style sheets will be IAW formatting rules I give • You will have to produce a menu that shows the same pages formatted with each different style sheet

More Related