CSS

Question 1

Remove underline from links

Answer 1

text-decoration: none;

Question 2

style selected link and hover

Answer 2

nav a.selected, nav a:hover {
color: #32673f;
}

Question 3

Google fonts

Answer 3

google.com/fonts

Question 4

remove bullet points from lists

Answer 4

list-style: none;

Question 5

clear floats in the footer

Answer 5

footer {
clear: both;
}

Question 6

display navigation links as an inline block

Answer 6

nav li {
display: inline-block;
}

Question 7

add a phone link

Answer 7

<a> 567 - 3455</a>

</a>

Question 8

add a background img next to the phone link

Answer 8

.contact-info li.phone a {
background-image: url(‘../img/phone.png’);
}

Question 9

change background-repeat to none

Answer 9

background-repeat: no-repeat;

Question 10

shorthand for commenting something out

Answer 10

CMD + SHIFT + /

Question 11

clear left float from every 4th img

Answer 11

#gallery li:nth-child(4n) {
        clear: left;
    }

Question 12

import an external CSS file

Answer 12

@import “import-styles.css“; (at the beginning of the css file)

Question 13

how to convert px to em

Answer 13

divide width in px by 16

Question 14

style links on hover with rgba color property

Answer 14

a: hover {
color: rgba (255, 169, 73, .4)

}

Question 15

change text to uppercase

Answer 15

text-transform: uppercase;
lowercase
capitalise;

Question 16

underline h2

Answer 16

h2 {
text-decoration: underline;
}

Question 17

change vertical spacing between lines of text

Answer 17

body {
line-height: 1.5;
}

Question 18

add a solid blue border 10px wide

Answer 18

border: 10px solid blue;

Question 19

center a div

Answer 19

margin: 0 auto;

Question 20

universal selector

Answer 20

{ * }

Question 21

selector for a visited link

Answer 21

a:visited

Question 22

white color

Answer 22

fff

Question 23

black color

Answer 23

000

Question 24

change color with rgba

40% transparency

Answer 24

color: rgba (255, 170, 65, .4);

Question 25

capitalize all paragraphs

Answer 25

p { text-transform: capitalize; }

Question 26

change h1 to uppercase

Answer 26

h1 { text-transform: uppercase; }

Question 27

change vertical spacing between rows of text

Answer 27

body { line-height: 1.5; }

Question 28

specify that a

's padding and borders are included in the total width and height of the element

Answer 28

div { box-sizing: border-box; }

Question 29

repeat a background-image horizontally inside .main-header

Answer 29

.main-header { background-repeat: repeat-x; }

Question 30

make a background image 40% of the .main-header

Answer 30

.main-header { background-size: 40%; }

Question 31

change the position of the background image inside the .main-header to center bottom;

Answer 31

.main-header { background-position: center bottom; }

Question 32

move the background image 20% to the left and 40% down inside the .main-header

Answer 32

.main-header { background-position: 20% 40%; }

Question 33

float two columns (primary col, secondary col)

Answer 33

.col { width: 46.5%; } .primary { float: left; } secondary { float: right; }

Question 34

clearfix .group (parent element)

Answer 34

``` .group::after { content: ""; display: table; clear: both; } ```

Question 35

remove list indentation inside a ul

Answer 35

ul { padding-left: 0; }

Question 36

move bullet points inside the li element

Answer 36

ul { list-style-position: inside; }

Question 37

change bullet points to squares

Answer 37

ul { list-style-type: square; }

Question 38

add 10px vertical space between li items

Answer 38

ul { margin: 10px; }

Question 39

apply a text shadow to h1 (blur radius 12px, color green, 10px horizontal and 15px vertical offset)

Answer 39

h1 { text-shadow: 10px 15px 12px green; }

Question 40

move the text shadow to the left inside h1

Answer 40

h1 { text-shadow: -10px -15px 12px green; }

Question 41

create an inner shadow effect inside .wildlife

Answer 41

.wildlife { box-shadow: inset 0 0 50px 10px rgba (0, 0, 0, 1); }

Question 42

create a smooth fade from red to orange inside the .main-header

Answer 42

.main-header { | background-image: linear gradient(red, orange);

Question 43

use transparent gradient with multiple backgrounds

Answer 43

.main-header { background: linear-gradient (#ffa949, transparent 90%), linear-gradient(0deg, #fff, transparent), url(‘../img/mountains.jpg’) no-repeat center; }

Question 44

create two columns using inline-block

Answer 44

.col { display: inline-block; width: 50%; margin-right: -4px; vertical-alignment: top; padding-left: 1em; padding-right: 1em; }

Question 45

meta tag for responsive design

Question 46

breakpoint for tablets

Answer 46

@media (min-width: 765px) { }

Question 47

breakpoint for desktops

Answer 47

@media (min-width: 1025px) { }

Question 48

max-width for desktops

Answer 48

.wrapper { max-width: 1150px; }

Question 49

how do you fix collapsing margins of .main-header and ?

Answer 49

.main-header { padding: 1em 0; margin: 0; }

Question 50

create a sticky footer

Answer 50

1. Create .wrap (below body and before footer ) 2. .wrap { min-height: calc(100vh-82px); }

Question 51

get rid of the space between

items

Answer 51

.main-nav li { margin-right: -4px; }

Question 52

Add a fixed navigation screen (for desktops)

Answer 52

``` .main-header { position: fixed; width: 100%; top: 0; } ``` body { padding-top: 15px; (compensates for the space covered by the bar) }

Question 53

make .profile-img 1.5 times larger on hover

Answer 53

.profile-img:hover { transform: scale(1.5); }

Question 54

target all input fields of text type

Answer 54

input[type="text"] { }

Question 55

change .btn cursor from arrow to pointer

Answer 55

.btn { cursor: pointer; }

Question 56

target all links that are direct children of form

Answer 56

form > a { color: pink; }

Question 57

target adjacent .btn, which is an immediate sibling of .btn

Answer 57

.btn + .btn { margin-left: 20px; }

Question 58

target all label siblings of h1

Answer 58

h1 ~ label { }

Question 59

target the first child of li

Answer 59

li::first-child { }

Question 60

target the only child (with no siblings) of span

Answer 60

span::only-child { }

Question 61

target all empty li fields

Answer 61

li::empty { }

Question 62

target all links that start with http://

Answer 62

a[href^="http://] { }

Question 63

target all links that are pdf-files

Answer 63

a[href$=".pdf"] { }

Question 64

target all links that contain the word download in their filename

Answer 64

a[href*="download"] { }

Question 65

create a flex .container

Answer 65

.container { display: flex; }

Question 66

change the background color of an input field and a text area when they get focus to yellow

Answer 66

input:focus, textarea:focus { background-color: yellow; }

Question 67

change the color of the disabled input field to light grey

Answer 67

input:disabled { background: #ddd; }

Question 68

make the checkbox and the label bold when checked

Answer 68

input[type="checkbox"]:checked + label { font-weight: bold; }

Question 69

target all odd li items and make the background aqua green

Answer 69

li:nth-child(odd) { background: #52bab3; }

Question 70

target every 2nd li item starting at the 3rd one and change the background color to aqua green

Answer 70

li:nth-child(2n+3) { background: #52bab3; }

Question 71

select the first three li items

Answer 71

li:nth-child(-n+3) { background: #52bab3; }