CSS

Question 1

Change the following text to blue with inline style

{h2}CatPhotoApp{/h2}

Answer 1

{h2 style=”color: blue;”}CatPhotoApp{/h2}

Question 2

How do you make all h2 elements red

Answer 2

{style}
   h2{
        color:red;
   }
{/style}

Question 3

Create a CSS class called green-text and apply it to a h1 element

Answer 3

{style}
   .green-text{
       color:green;
   }
{/style}

{h1 class=”green-text”} Hello world{/h1}

Question 4

how do you change the font size of all h2 elements to 20px

Answer 4

{style}
   h2 {
       font-size: 20px;
}
{/style}

Question 5

Set the font of all p elements to serif

Answer 5

{style}
   p {
      font-family: serif;
}
{/style}

Question 6

Import the lobster font from https://fonts.googleapis.com/css?family=Lobster and use it on a p element

Answer 6

{link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css”}
{style}
p { font-family: Lobster;}
{/style}

Question 7

Set font of h2 element to Helvetica but degrade to sans-serif if it is not available

Answer 7

{style}
   h2 {
        font-family: Helvetica, sans-serif;
   }
{/style}

Question 8

create a class called super-wide that sets the width to 500px

Answer 8

{style}
   .Super-Wide{
       width: 500px;
   }
{/style}

Question 9

create a class called smaller-image that sets the height to 100px

Answer 9

{style}
   .smaller-image {
       height: 100px;
   }
{/style}

Question 10

Create a class called thick-green-border that adds a 10px, solid green border around an element

Answer 10

{style}
   .thick-green-border{
       border-color: green;
       border-width: 20px;
       border-style: solid;
}
{/style}

Question 11

How do you add multiple classes to an element

Answer 11

{p class=”class1 class2”}

Question 12

How do you make rounded border that is 10px

Answer 12

border-radius: 10px;

Question 13

Make a border radius of 75%

Answer 13

border-radius: 75%;

Question 14

Create class silver-color with background color of silver

Answer 14

{style}
   .silver-color{
      background-color: silver;
}
{/style}

Question 15

Give id element cat-photo-form a background color of green

Answer 15

{style}
   #cat-photo-form{
       background-color: green;
   }
{/style}

Question 16

What are the properties that surround each html element

Answer 16

margin
border
padding

Question 17

What does padding control

Answer 17

space between the element’s content and the border

Question 18

What does margin control

Answer 18

space between the element’s border and surrounding elements

Question 19

What does a negative margin do

Answer 19

Make the element grow larger

Question 20

How do you control each individual side of an element’s padding

Answer 20

padding-top
padding-bottom
padding-left
padding-right

Question 21

How do you control each individual side of an element’s margin

Answer 21

margin-top
margin-right
margin-bottom
margin-left

Question 22

Instead of using padding-top, padding-right, padding-bottom, padding-left, how do you specify 10px for the top, 20px for the right, 10 px for the bottom and 20 px for the left

Answer 22

padding: 10px 20px 10px 20px;

Question 23

Instead of using margin-top, margin-right, margin-bottom, margin-left, how do you specify 20px for the top, 40px for the right, 20px for the bottom and 40px for the left

Answer 23

margin: 20px 40px 20px 40px;

Question 24

Set the margin of all radio buttons to 20px 0px 20px 0px

Answer 24

{stye}
    [type = "radio"] {
        margin: 20px 0px 20px 0px;
}
{/style}

Question 25

Set the padding of all checkboxes to 10px and text to green with a solid border

Answer 25

``` {style} [type = "checkbox"] { padding: 10px; color: green; border-style: solid; } {/style} ```

Question 26

Which are relative units

Answer 26

em | rem

Question 27

What is the order of precedence of classes in CSS

Answer 27

Classes lower in the style sheet will override classes above them.

Question 28

Does it matter which order classes are listed within the element

Answer 28

No

Question 29

What do you use to override all other CSS styles

Answer 29

!important

Question 30

How do you represent white in html

Answer 30

#ffffff

Question 31

What is the short hex code for red

Answer 31

#F00

Question 32

What are the different ways to represent color

Answer 32

``` rgb(x,x,x) #xxxxxx #xxx ```

Question 33

How do you declare variables arm and fee within a class penguin and set the values to black and orange respectively

Answer 33

.penguin{ --penguin-arm: black; --penguin-feet: orange; }

Question 34

How do you apply the variable --cat-skin to the background attribute

Answer 34

background: var(--cat-skin);

Question 35

How do you apply a fallback color to the background attribute if your variable --penguin-skin is invalid

Answer 35

background: var(--penguin-skin, black)

Question 36

Why is it important to add fall back colors to variables

Answer 36

In case of browser compatibility issues | Useful for debugging in case you have typo

Question 37

How do you improve browser compatibility fallbacks

Answer 37

adding another property declarations before the declaration with the variable ex. background: black; background: var(--penguin-skin);

Question 38

What is :root

Answer 38

pseudo-class selector that matches the root element of the document. Variables created in root will be available globally

Question 39

Where are variables valid

Answer 39

Within the selector it was created in and its descendants

Question 40

How do you overwrite the variable --penguin-skin: red that is in :root with white for .penguin class

Answer 40

:root{ --penguin-skin: red;} .penguin{ --penguin-skin:white; }

Question 41

How do you adjust for styles on media screens if they are bigger or smaller

Answer 41

@media (max-width: 300px) { :root{ } }