web site design and development lecture 6
play

Web Site Design and Development Lecture 6 CS 0134 Fall 2018 Tues - PowerPoint PPT Presentation

Web Site Design and Development Lecture 6 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Inheritance Before we talk about font properties, it needs to be known that font properties are inherited by the descendants of the elements you


  1. Web Site Design and Development Lecture 6 CS 0134 Fall 2018 Tues and Thurs 1:00 – 2:15PM

  2. Inheritance ● Before we talk about font properties, it needs to be known that font properties are inherited by the descendants of the elements you set them on. ● Example <main style=”font-size: 1.25em”> <p>Lorem ipsum...</p> </main> The <p> element will have the same font size a main due to inheritance. 2

  3. color ● The color property sets the color of text ● Color can accept color values in any of the forms we learned about in last lecture ● Examples – color: blue; – color: #cc2eff; – color: rgb(0, 255, 0); 3

  4. font-family ● The font-family property sets the font ● The value of font-family is a singular font name or a list of font names separated by commas ● If the font name has spaces, like Times New Roman, you will need to put quotes around the name ● The browser will go through the list of fonts provided and use the fjrst one that the user’s computer supports ● The default font in most browsers is a serif font. ● You should use a sans-serif font as the main font for your web page as they are easier to read on the screen. 4

  5. Generic font families ● In addition to specifying a font, you can use the following generic font families – serif – fonts with serifs (lines at the end of letter strokes) – sans-serif – fonts without serifs – monospace – fonts where every character is the same width – cursive – fonts with connected letters – fantasy – decorative fonts ● If you add a generic font family to the end of your list of font’s for font-family, the browser will use it’s default font for that generic font family 5

  6. Examples of font-family ● font-family: “Open Sans”, Arial, sans-serif; ● font-family: Times, serif; ● font-family: monospace; ● body { font-family: “Open Sans”, sans-serif; } 6

  7. font-size ● The font-size property sets the font size ● It is recommended that you use relative measurements for font-size so that fonts will scale based on the user’s font settings in their browser ● When you use % or em for font-size, the size will be relative to the size of the element’s parent element 7

  8. Examples of font-size ● font-size: 16px; ● font-size: 1.25em; ● font-size: 1.5rem; ● font-size: 200%; ● body { font-size: 100%; } 8

  9. font-style ● The font-style property sets how slanted to make the font ● font-style can be set to normal, italic and oblique ● If you set font-style to normal, it will remove any slanting that has been applied to the element ● Example – font-style: italic; 9

  10. font-weight ● The font-weight property sets how bold to make the font ● Font-weight accepts three types of values – The fjrst type is the words normal and bold – The second type is bolder and lighter. This will make the font bolder or lighter than the parent element. – The third type is the amount of boldness from 100 to 900 in multiples of 100 with 400 being equal to normal. Not all font’s support this. ● Like font-style, normal will undo any boldness that was previously applied 10

  11. Examples of font-weight ● font-weight: bold; ● font-weight: 400; ● font-weight: 700; ● font-weight: bolder; 11

  12. font-variant ● The font-variant property sets if the font will use small caps or not ● Font-variant can be set to normal or small- caps ● Like with font-style and font-weight, normal will undo any previous small-caps applied ● Example – font-variant: small-caps; 12

  13. line-height ● The line-height property sets the vertical space used for a line of text. ● This space is split equally between the top and bottom of the line. ● line-height can accepts three types of values – Absolute value – inherited as is by descendants – Relative value – the value resulting from using the relative value will be inherited by descendants – A multiplier number- this is a number to multiply by the font size to get the line height. The multiplier number is inherited by descendants. This is the recommended way to set line-height 13

  14. Examples of line height ● line-height: 16px; ● line-height: 1.2em; ● line-height: 120%; ● line-height: 1.2; 14

  15. font ● The font property lets you set all the values of the previous font properties in one line ● The format of the font property is as follows (values surround by brackets are optional) font: [style] [weight] [variant] size[/line-height] family; ● Examples – font: italic bold small-caps 80%/1.2 “Open Sans”, sans-serif; – font: 16px/20px “Times New Roman”, Times, serif; 15

  16. Questions? 16

  17. text-indent ● The text-indent property sets the indent for the fjrst line of text in an element. ● text-indent can be given an absolute or relative value. It is recommended that a relative value be used so that the indent will scale with font size. ● This property is inherited by it’s descendants. ● Example – text-indent: 2em; 17

  18. text-align ● The text-align property sets the horizontal alignment of text within an element. ● text-align can be set to left, center, right and justifjed. ● This property is inherited by it’s descendants. ● Example – text-align: center; 18

  19. vertical-align ● The vertical-align property sets the vertical alignment of text within it’s parent element. ● Vertical-align accepts three types of values – Absolute value – how much to raise or lower the text – Relative value – how much to raise or lower the text – Keywords – baseline, bottom, middle, top, text- bottom, text-top, sub and super 19

  20. Examples of vertical-align ● vertical-align: top; ● vertical-align: sub; ● vertical-align: 12px; ● vertical-align: -20%; 20

  21. text-decoration ● The text-decoration property specifjes if a line is applied to text ● Text-decoration can be set to any combination of the values underline, overline, or line-through OR the value none ● Setting text-decoration to none will remove any previously applied lines ● Examples – text-decoration: underline; – text-decoration: overline underline; – text-decoration: none; 21

  22. text-shadow ● The text-shadow property adds a shadow to text ● The format of the text-shadow property is as follows: text-shadow: horizontal-offset, vertical-offset[, blur-radius][, shadow-color]; – horizontal offset: how far to the left or right the shadow is – vertical-offset: how far up and down the shadow is – Blur-radius: how blurry the shadow is – Shadow-color: the color of the shadow 22

  23. text-shadow continued ● For accessibility, try to keep the offsets and blur close the main text. The further spread they get, the harder the text can be to read. ● Examples – text-shadow: 2px 2px 2px black; – text-shadow: -4px -4px blue; 23

  24. Questions? 24

Recommend


More recommend