Css Basics Practice Writing Rules

Front 1

Display h1 in the color ff0000

Back 1

h1 {
color: #ff0000;
}

Front 2

Give the body a background color of ffcc66.

Back 2

body {
background-color: #FFCC66;
}

Front 3

Give the body a background image, butterfly.gif.

Back 3

body {
background-image: url("butterfly.gif");
}

Front 4

Specify that the background image is not to repeat

Back 4

background-repeat: no-repeat;

Front 5

Specify that the background image is to repeat horizontally.

Back 5

background-repeat: repeat-x;

Front 6

Specify that the background image is to repeat vertically.

Back 6

background-repeat: repeat-y;

Front 7

Specify that the background image is to repeat both horizontally and vertically.

Back 7

background-repeat: repeat;

Front 8

Specify that the background image doesn't scroll with the paged.

Back 8

background-attachment: fixed;

Front 9

Specify that the background image does scroll with the paged.

Back 9

background-attachment: scroll;

Front 10

Position the background image 50 pixels from the left and 20 pixels from the top

Back 10

background-position: 50px 20px;

Front 11

Center the background image horizontally and 25% from the top

Back 11

background-position: 50% 25%;

Front 12

Position the background image at the right bottom

Back 12

background-position: right bottom;

Front 13

Compile the following into 1 rule: background color of #FFCC66, background-image url("butterfly.gif"), background that repeats horizontally, a background image that doesn't scroll, a background image that centered horizontally and positioned at the top

Back 13

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 50% 0%;

Front 14

Display h2 in Times New Roman.

Back 14

h2
{font-family: "Times New Roman", serif;
}

Front 15

Display h2 in Arial.

Back 15

h2
{font-family: Arial, sans-serif;
}

Front 16

Make it small caps.

Back 16

font-variant: small-caps;

Front 17

Make it bold.

Back 17

font-weight: bold;

Front 18

Make it 12-point.

Back 18

font-size: 12pt;

Front 19

Make it 1.2 ems.

Back 19

font-size: 1.2em;

Front 20

Indent the first line of the pargraph 30 pixels

Back 20

p {
text-indent: 30px;
}

Front 21

Justify the paragraph

Back 21

p {
text-align: justify;
}

Front 22

Underline the paragraph

Back 22

p {
text-decoration: underline;
}

Front 23

Space letters 3 pixels apart in the paragraph

Back 23

p {
letter-spacing: 3px;
}

Front 24

Capitalize all the words in a line.

Back 24

li {
textransform: capitalize;
}

Front 25

Make unvisited links blue and visited links red.

Back 25

a:link {color: blue;}
a:visited {color: red;}

Front 26

On a hover over a link bold it and give it a yellow background color.

Back 26

a:hover {
font-weight: bold;
background-color: yellow;
}

Front 27

Remove the underline under a link.

Back 27

a {text-decoration: none;}

Front 28

Create a class of links for special links that are red.

Back 28

a.special {
color: red;
}

Front 29

Create an ID called "footerCopyright" that is red.

Back 29

#footerCopyright {
color: red;
}

Front 30

Create a span for extra emphasis and make it red

Back 30

span.extraEmphasis {
color: red;
}

Front 31

Create an ID that gives a background of blue to a list of democrats.

Back 31

#republicans {
background: blue;
}