Web Site Design and Development Lecture 6

Size: px

Start display at page:

Download "Web Site Design and Development Lecture 6"

Adele Terry
5 years ago
Views:

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

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 first 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 smallcaps 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 first 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 justified. 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, textbottom, 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 specifies 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

IDM 221. Web Design I. IDM 221: Web Authoring I 1

IDM 221. Web Design I. IDM 221: Web Authoring I 1 IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 5 IDM 221: Web Authoring I 2 Working With Text IDM 221: Web Authoring I 3 Special Characters IDM 221: Web Authoring I 4 > < & IDM 221: Web Authoring