HTML and CSS

HTML

100

What HTML tag is used to create a paragraph?

p

200

What is the difference between an HTML opening tag and a closing tag?

Closing tag has a '/'

300

True or false: an image tag is self-closing.

True

400

What tag is used to create a link?

anchor tag (or 'a' tag)

500

Name the two possible tags used to create a list.

ul for an Unordered list
ol for an Ordered list

CSS

100

True or false: you can have more than one css rule per css selector

True

200

What unit is usually used to measure size of fonts, padding, margins, and borders?

Pixels (px)

300

What is the special symbol that you need to have to you apply a CSS rule to an element with a class attribute?

Period/dot (.)

400

What is the css property you need to change the font color of an element?

color:

500

Why would we want to use class selectors (using a ".")  over tag selectors (using a tag name)?

Tag selectors will apply the CSS rule to all tags

Class selectors allow us to specify the CSS rule for only html elements with that class attribute

HTML + CSS

100

What is the name of the attribute that goes with an image tag?

src

200

What is the name of the attribute that goes in an anchor tag?

href

300

Add a class attribute with the name "link" to this anchor tag

<a href="https://google.com/">click me</a>

<a href="https://google.com/" class="link">click me</a>

OR

<a class="link" href="https://google.com/">click me</a>

400

What are the two css properties to change the size of an image?

width, height

500

Fix this code so that the text becomes red

<p class="Red">this text should be red</p>

red {

  color: red;

}

https://popcode.org/?snapshot=a53c9e22-3901-4502-a5ce-5981809e270d

.Red {

  color: red;

}

Layout

100

Name the 3 main components of the box model

margin, border, padding

200

How do you add a solid black border with a 5 pixel width to this p tag?

<p class="border">add a border around me</p>

.class {

  border: 5px solid black;

}

OR

p { ...

300

What is the tag name we use to help us with using flexbox layouts?

<div>

400

What CSS rule should be on the parent element for flexbox?

display: flex;

500

Name the 5 main values that can go into a justify-content property

flex-start, center, flex-end, space-between, space-around

Challenge (use all your resources)!

100

What is the css property you need to change the background color of an element?

background-color

200

Other than "solid", name a border style value.

none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

https://www.w3schools.com/cssref/pr_border-style.php

300

What is the css property that controls the space between the content and the border?

padding

400

Nest these p tags inside of a parent div

<p>first paragraph</p>

<p>second paragraph</p>

<div>

<p>first paragraph</p>

<p>second paragraph</p>

</div>

500

Write a CSS rule to change an element's font to "Courier New"

font-family: "Courier New";