1 css styling with fonts and colors. 2 css cascading style sheets and fonts css provides style or...

49
1 CSS Styling with Fonts and Colors

Post on 19-Dec-2015

226 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

1

CSS Styling

with Fonts and Colors

Page 2: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

2

CSS Cascading Style Sheets and fonts

• CSS provides Style or Presentation options for our html pages

• CSS properties help you style your text

• CSS can control typeface, style, color, and even decorations

• CSS uses “font families”

• CSS “font families” specify the fonts to use in each element of your page

Page 3: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

3

CSS font-family property

• Only certain fonts are commonly installed on most computers

• Care should be taken when specifying fonts

body {font-family: Verdana, Geneva, Arial,

san-serif;}

Page 4: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

4

CSS font-size property

• CSS offers several ways to specify font sizes

• Can specify fonts in a way that allows your users to increase the font size without affecting your design

body {font-size: 14px;

}

Page 5: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

5

CSS color property

• Changing the text color with the color property

• Use 16 predefined colors, RGB, or “hex codes”

body {

color: silver;

}

Page 6: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

6

CSS font-weight property

• Changing the weight of fonts with the font-weight property

• Use lighter, normal, bold, bolder

body {

font-weight: bold;

}

Page 7: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

7

CSS text-decoration property

• Decorate text with the text-decoration property

• Use none, underline, overline, line-through, blink

body {

text-decoration : underline;

}

Page 8: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

8

CSS font-family property

• font-family contains contains a set of fonts that share common charecteristics

• Five font families1. Sans-serif

2. Serif

3. Monospace

4. Cursive

5. Fantasy

• Each family includes a larger set of fonts

Page 9: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

9

font-family Sans-serif

• Sans-serif family

• Fonts without serifs (tails)

• Considered more readable on computer screens

Examples:

VerdanaArial BlackTrebuchet MS ArialGeneva

Page 10: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

10

font-family Serif

• Serif family

• Fonts with serifs (tails), the decorative barbs and hooks on the ends of the letters

• Elegant traditional look

• Associated with newspaper print

Examples:

TimesTimes New RomanGeorgia

Page 11: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

11

font-family Monospace

• Monospace family

• Fonts with constant width characters

• All characters share a same fixed width, typewriter look

• Useful for displaying with computer code

Examples:

CourierCourier NewAndale Mono

Page 12: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

12

font-family Cursive

• Cursive family

• Fonts that look handwritten

• Playful or stylized feel

• Useful for headings

Examples:

Comic SansApple Chancery

Page 13: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

13

font-family Fantasy

• Fantasy family

• Stylized decorative fonts

• Not widely available or recommended for mainstream web design

• Useful for personal pages

Examples:

Last NinjaImpact

Page 14: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

14

Specifying font-families

• Font family should contain a list of alternative fonts

• Alternative fonts should be from the same font family, but not required

• Font names must be spelled correctly

• Last font should be a generic system font like sans-serif or serif

body {font-family: Verdana, Geneva, Arial,

san-serif;}

Page 15: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

15

Specifying font-families

• Browser interprets the fonts listed in your font-family specification, checks if font is installed on users computer

• Enables you to list preferred fonts

• Checks if Verdana is available, if not check for Geneva, if not check for Arial, if not use sans-serif

(browser will use the default font in that family)

body {

font-family: Verdana, Geneva, Arial, san-serif;

}

Page 16: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

16

Specifying font-families

• Font-family property is set on the <body> element

• Fonts with multiple words must be put in double quotes “Courier New”

• Any elements within, will inherit these fonts

body {

font-family: “Courier New”, san-serif;

}

Page 17: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

17

Font dilemma

• Can’t control what fonts users have installed on their computer

• Some fonts commonly appear on Mac’s but not PC’s

• Examples of fonts common on both Mac and PC:

Andale MonoArialArial BlackComic SansCourier NewGeorgiaImpactTimes New RomanTrebuchet MS Verdana

Page 18: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

18

Specifying font size using px

• font-size property

• Can specify your font size in pixels (how many pixels tall to make letters)

• Specifying font-size will still enable user to increase the font size within their browser

body {font-size: 14px;

}

Page 19: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

19

Specifying font size as relative

• Instead of specifying font size in pixels, a font size can be specified as a percentage

• Percentage specifies how big it should be relative to another font size

body {font-size: 14px;

}h1 {

font-size: 150%;}

Page 20: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

20

Specifying font size as relative

• Body font size in pixels and a level one heading as 150% of its parent element (body 14px)

• h1 heading will appear as 150% of 14px or approx 21px

body {font-size: 14px;

}h1 {

font-size: 150%;}

Page 21: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

21

Specifying font size using em

• Instead of specifying font size in pixels, or percentage, a font size can be specified using em

• em is another unit of measure, specifying a scaling factor

body {font-size: 14px;

}h1 {

font-size: 150%;}h2 {

font-size: 1.2em;}

Page 22: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

22

Specifying font size using em

• Font-size for h2 will be scaled by 1.2

• h2 heading will be 1.2 times the font size of the parent element (body 14px) h2 will be approx 17px

body {font-size: 14px;

}h1 {

font-size: 150%;}h2 {

font-size: 1.2em;}

Page 23: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

23

Specifying font size using keywords

• Instead of specifying font size in pixels, or percentage, or em, another way is to instead use keywords

• Keywords are another way of defining size value

• Use xx-small, x-small, small, medium, large, x-large, or xx-large

body {

font-size: small;

}

Page 24: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

24

Specifying font size using keywords

• Use xx-small, x-small, small, medium, large, x-large, or xx-large

• Each size is about 20% larger than the previous size

• Each brand of browser may define sizing slightly different

• Font size of small will appear close to 12 pixels

body {font-size: small;

}

Page 25: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

25

Font sizing recommendations

Which sizing to choose?

• Use keywords small or medium for body font size

• Use either em or percentages to specify the other elements (like h1, h2), these elements will then be relative to your body size

body { font-size: small; }

h1 { font-size: 150%; }

h2 { font-size: 120%; }

Page 26: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

26

Problems with specifying font size using px

• Internet Explorer? (web browser) does NOT support text the resizing of font size (through browser) if font sizes are specified using pixels

• Using pixels will reduce the accessibility of your pages by many users

• If you use keywords for your body’s font size and then em or % Internet Explorer will properly scale if user adjusts font sizing through browser

Page 27: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

27

Ideal Font properties example

body {

font-family: Verdana, Geneva, Arial, san-serif;

font-size: small;

}

h1 {

font-size: 170%;

}

h2 {

font-size: 130%;}

Page 28: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

28

CSS font-weight property

• Changing the weight of fonts with the font-weight property

• Allows you to control how heavy or bold, text will look

• Bolder and lighter are relative to its inherited value but are not supported consistently by browsers, thus not often used

• Use lighter, normal, bold, bolder

body {font-weight: bold;

}

Page 29: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

29

Combining common properties Combine common properties into one rule, use comma

body {

font-family: Verdana, Geneva, Arial, san-serif;

font-size: small;

}

h1, h2 {

font-weight: normal;

}

h1 {

font-size: 170%;}

h2 {

font-size: 130%;}

Page 30: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

30

font-style property

• Italic text is slanted and has extra curls on the serif

• Not all fonts support the italic style, oblique displays instead

body {

font-style: italic;

}

Page 31: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

31

font-style property

• Oblique text is slanted using normal letters

body {

font-style: oblique;

}

Page 32: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

32

Childs getting font styles from parents

• Most elements get their font styles from their parents

blockquote { font-style: italic;

}

• The <p> element below gets its font style from its parent <blockquote>

<body><blockquote><p>welcome to my webpage </p></blockquote></body></html>

Page 33: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

33

Specifying color using RGB

• Web colors are specified using RGB

• Red, Green, Blue

• Additive colors, mixing all three creates the color white

• Mixing portions of these three colors can create all the colors we will use

• Removing all three colors 0% Red, 0% Green, 0%

Page 34: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

34

Specifying color by name

• Only 17 predefined named colors

• Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, Yellow

body {background-color: silver;

}

Page 35: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

35

Specifying color in red, green, blue values

• Specify the amount of red, green, blue

• Specify in percentage, amounts of each color

body {

background-color: rgb(80%, 40%, 0%) ;

}

Page 36: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

36

Specifying color in red, green, blue values

• Specify using the numeric value between 0 and 255

• There are 256 different rgb colors

• Percentage relates to the color numeric value, 80% of 255 is 204

body {

background-color: rgb(204, 102, 0) ;

}

Page 37: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

37

Specifying color in hex codes (recommended)

• Specify the amount of red, green, blue using the hex codes

• Start out with # then the first two digits represent red, the second two digits represent green, then the last two represent blue

• #CC6600 each set of two digits represent a number from 0 to 255, two digits made up of letters or numbers

body {background-color: rgb(#CC6600 ) ;

}

Page 38: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

38

Hex codes based on 16 digits

• Ten digits 0 to 9

• Six digits A-F

• Enables using a single digit to count from 0 to 15– Hex value 0123456789 A B C D E F– Decimal value 0123456789 10 11 12 13 14

15

Page 39: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

39

Understanding Hex code color

• Separate hex color into its three components

#CC6600

– Hex value CC 66 00– Color value Red Green Blue

Page 40: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

40

Convert hex number into its decimal equivalent

#CC6600

CC 66 00

Red Green Blue

• For CC, use the left-most value C and determine its decimal value which happens to be 12

Hex value 0123456789 A B C D E F

Decimal value 0123456789 10 11 12 13 14 15

• CC has a decimal value of 12

Page 41: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

41

Convert hex number into its decimal equivalent

#CC6600

CC 66 00

Red Green Blue

• C has a decimal value of 12• Times decimal value by 16

12 * 16 = 192• Add total above with right most value (C, C=12) 12 to get

decimal equivalent

192 + 12 = 204• 204 is decimal equivalent of CC in hex

Page 42: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

42

Convert hex number into decimal reviewed5 steps

#B817E0 B8 17 E01. Separate hex color into its three (color) components

2. Start with the first color, use the left-most value 11 in example above (determine its decimal value if a letter, B=11)

3. Times decimal value 11 by 16 to get pretotal 11*16=176

4. Add pretotal with right most value 8 (determine its decimal value if a letter) 176+8=184

5. 184 decimal equivalent in hex

Page 43: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

43

Convert hex number into its decimal equivalent

#CC6600

CC 66 00

Red Green Blue

• Repeat convert steps for each component

CC 66 00

204 102 0

– Hex value CC 66 00– Decimal equivelent 204 102 0

Page 44: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

44

Hex code shorthand

• #ccbb00 = #cb0

• #11eeaa = #1ea

• #ccbb10 can’t be abbreviated

Page 45: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

45

Different ways to specify colorFor example: Orange color

80% red, 40% green, and 0% blue

body { background-color: rgb(80%, 40%, 0%); }

(percentage)

body { background-color: rgb(204, 102, 0); }

(Scale 0-255)

body { background-color: rgb #cc6600; }

(Hex code recommended)

Page 46: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

46

CSS text-decoration property

em { text-decoration : none; }

em { text-decoration : underline; }

em { text-decoration : overline; }

em { text-decoration : line-through; }

em { text-decoration : blink; }(not fully supported)

em { text-decoration : overline overline; }(combining decorations to achieve both)

Page 47: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

47

Websafe colors no longer important

• Almost all computers can now display millions of colors

• Don’t have to worry about web safe palette, that was so 10 years ago!

Page 48: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

48

Ways to pick colors

• Color charts

Do a online search for HTML Hex color chart

• Graphic applications

Use a color picker to get the RGB and hex code

Page 49: 1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties

49

Color recommendations

• Use colors with high contrast for the text and background to aid readability

• Black text with White background has the highest contrast

• Use dark hues for text and light hue for the background

• Avoid blue and orange and red and blue together

-end