Visual Rules

Question 1

How do you change the typeface of text

Answer 1

Using the font-family property
Example:
h1 {
   font-family: Garamond;
}

Question 2

Web safe fonts

Answer 2

A group of fonts supported across most browsers and operating systems. Other fonts must be downloaded on the user’s computer or with the site

Question 3

How to change font size?

Answer 3

Using the font size property
Example:
p {
   font-size: 18px;
}
(Note - px stands for pixels)

Question 4

How to change the font weight?

Answer 4

Using the font-weight property
Example:
p {
    font-weight: bold;
}

Question 5

What is the purpose of the <em>normal</em> value for the font-weight property

Answer 5

If all the text is set to bold, you can change a few lines of text to go back to normal if needed.

Question 6

How to align text in a certain way?

Answer 6

Using the text-align property
Example:
h1 {
   text-align: right;
}

Question 7

What is the default text alignment?

Answer 7

Left side of the page

Question 8

What are the four text alignments?

Answer 8

Left, Right, Center, Justify

Question 9

What are the two ways color can appear?

Answer 9

Foreground Color and Background Color

Foreground Color: The color of the element
Background Color: The color of the background

Question 10

How to change the foreground and background color?

Answer 10

Foreground: Use the color property
Background: Use the background-color property

Question 11

How to change the opacity?

Answer 11

Using the opacity property, pick a value from 0-1 (0 being nothing and 1 being completely solid) 
Example:
h1 {
    opacity: 0.5 
}

Question 12

How to give an element a background image?

Answer 12

Using the background-image property, use the image's url
Example:
.main-banner  {
   background-image: url('image-url')
}