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

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.

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

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.

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

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

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

8

Examples of font-size

• font-size: 16px;
• font-size: 1.25em;
• font-size: 1.5rem;
• font-size: 200%;
• body {

font-size: 100%; }

9

font-style

• The font-style property sets how slanted to

make the font

• font-style can be set to normal, italic and
• blique
• If you set font-style to normal, it will remove any

slanting that has been applied to the element

• Example

– font-style: italic;

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

11

Examples of font-weight

• font-weight: bold;
• font-weight: 400;
• font-weight: 700;
• font-weight: bolder;

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;

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

14

Examples of line height

• line-height: 16px;
• line-height: 1.2em;
• line-height: 120%;
• line-height: 1.2;

15

font

• The font property lets you set all the values
• f 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;

16

Questions?

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;

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;

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

20

Examples of vertical-align

• vertical-align: top;
• vertical-align: sub;
• vertical-align: 12px;
• vertical-align: -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;

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

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;

24

Questions?