Question 1: Attribute selectors
Question 2: Subsequent-sibling combinator
The MDN website calls ~ a
subsequent-sibling combinator. To see this in operation, look at the
following:
Paragraph 1
Paragraph 2
A DivideParagraph 3
Paragraph 4
I used div ~ p to select paragraphs 3 and 4 and color them green.
Question 3: border-image property
border-image -Allows custom borders. This can be especially useful if you want to make your site unique.
To use border-image requires the use of url('file_path or url') in a declaration, which with
with differing selectors can accomplish a lot. Hover your cursor over the flower to place a border image
Question 4: text-shadow property
The text-shadow property adds shadow to text. With it you can set the shadow with a certain x and y
offset, a blur radius and specify the color of the shadow. This paragraph has a blur radius of 10px a x offset of 1 px (0 offset in y) and the shadow is a yellow color.
Question 6: Double image background-image property
Question 7: background-size: cover
Question 9: Simple media query example
Question 11: border-radius property
The border-radius property determines whether the corner of a border is rounded off and by how much.
Question 12: first-of-type pseudo-class
Question 13: semi transparent background-image
Question 21: border with width, style, and color
Question 22: Default alignment of img elements
Some of my classmates keep getting this wrong,
so I want to try to help them remember. The Star Trek logo here is in the
middle of this paragraph. You can clearly see it is aligned to the bottom
of the text.
Question 23: loop="loop"
This property determines whether a media element starts over when it ends. If you have your volume up you should be able to hear music right now that will automatically play again after it finishes. (specifically the wii plaza music)
Question 24: quadraticCurveTo
Using the CanvasRenderingContext2D: quadraticCurveTo() method, I created this canvas: