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

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

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

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

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

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

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

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

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

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

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

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

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

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

Questions? 16

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

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

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

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

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

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

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

Questions? 24