This image contains two screen captures of the same UI controls but with different CSS style sheets applied. The left screen uses the style sheet that defines the background color as gold and the UI controls as a lighter gold. The font for the controls is a sans-serif font in black. The two custom buttons are oval-shaped and light gold in color. The first button is labeled Accept in a green font. The second button is labeled Decline in a red font. To the right of the buttons is the label Not Available. By contrast, the right screen uses a style sheet that defines the background color as light olive and the UI controls as a medium olive. The font for the controls is a Courier New font in dark gray. In this version of the UI, the Accept and Decline buttons have the standard rectangle shape, but the border for the buttons is a dark gray, the font color is a medium green, and the label fills the button with minimal space between the label and the edge of the button. The Not Available and Progress labels have a dashed line border around them.A font is a complete assortment of type of one size and face, including caps, small caps, lowercase, punctuation marks, accents, and commonly used symbols. It contains alphabets in roman, italic capitals, and boldface. Thus, Courier New typeface in 12-point size is a font, but Courier New is a typeface. Fonts and typefaces don't come in colors; the color is a function of the printing process. Sans-serif and serif are contrasting styles, and proportional and monospace are contrasting styles.