1 / 27

COS 125

COS 125. DAY 19. Agenda. Assignment 5 Not corrected Was waiting for ALL submissions Will be corrected tomorrow Assignment 6 is posted Due in one week (April 15 @ 2PM) Left to do 2 Assignments (8 total) One per week 1 Quiz Capstone projects Exam #3 Corrected

denton
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 19

  2. Agenda • Assignment 5 Not corrected • Was waiting for ALL submissions • Will be corrected tomorrow • Assignment 6 is posted • Due in one week (April 15 @ 2PM) • Left to do • 2 Assignments (8 total) • One per week • 1 Quiz • Capstone projects • Exam #3 Corrected • 3 A’s, 5 B’s, 1 C and 1 D • Lecture/Discuss Formatting With Styles

  3. Learning Objectives Chap 10 • 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. Layout with Styles • Allows for more possibilities than xHTML layout • Can create Liquid layouts that expand or contract with browser window • Separate layout from Content allowing you to change layout without re-coding WebPage • Examples of everything in this lecture available at http://perleybrook.umfk.maine.edu/samples/StyleLayout.htm

  22. Structuring Your Pages • Divide your page in logical sections using the <div> element • Name each division using the id attribute • id=“daName” • Put the sections in order in your XHTML page • Use headers (h1, h2, h3 etc ) in a consistent fashion

  23. The Box Model • For CSS, every element is in an invisible Box that has the following • Content (middle) • Padding (between Content & Border) • Border (around element) • Margin (Between element border and next element) • Boxes are either block level (new paragraph) or inline (on same line) • xHTML flow from top to bottom with line breaks around block level elements

  24. Box Model (inline) Margin Margin Border Border Content Content Padding Padding

  25. Box Model (block) Margin Border Content Padding Margin Border Content Padding

  26. Controlling the flow (position) • 4 ways to position an element box • Static – with the flow • Absolute – in a fixed position relative to parent element • Fixed – in a fixed position relative to browser • Relative – with respect to default position in the flow • If boxes overlap you can control which goes over which using z-index

  27. Tips for Assignment #6 • For assignment #6 I gave you a xHTML page with lots of text 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