Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Design > Applied Visual Design > Flashcards

Applied Visual Design Flashcards

1
Q

What are the options for text-align

A

justify
center
right
left

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is the justify option for text-align

A

causes all lines of text except the last line to meet the left and right edges of the line box.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Change the width of images to 220px

A

img{
width: 220px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are the different ways to express width

A

em
px
% relative to its parent

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Set the height of h4 to 35px

A

{h4 style=”height: 35px;”}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are the different ways to make text bold

A

font-weight: bold;
{strong}text/strong}
font-weight: 800;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are the different ways to underline text

A

text-decoration: underline

{u} text {/u}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are the different ways to italicize text

A

font-style: italic;

{em} text {/em}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How do you strike through text with CSS

A

text-decoration: strike-through;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do you strike through text without CSS

A

{s} text {/s}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How do you add a horizontal line between a p and h4 element

A

{p} {/p}
{hr}
{h4} {/h4}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

How do you adjust background color opacity

A

background-color: rgba(x,x,x,x);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are the values for opacity

A

0.0 - 1.0

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

set font of a h3 elements to 25px

A

{h3 style=”font-size: 25px;”}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How do you add a shadow to an element

A

box-shadow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What are the properties for box shadow

A 
offset-x
offset-y
blur-radius  (optional)
spread-radius (optional)
color
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How do you control how transparent an element is

A

opacity

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Set all p tags to 75% opacity

A

p {
opacity: .75;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What does it mean when opaque is set to 1

A

element is not transparent at all

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How do you make sure your element is capitalized

A

text-transform: capitalize;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How do you make all letters uppercase in your element

A

text-transform: uppercase;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

How do you make all your letters lower case in your element

A

text-transform: lowercase;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What does text-transform: inherit; do

A

Inherit text transform property from the parent element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What are the different text-transform properties

A 
uppercase
lowercase
capitalize
initial 
inherit
none
25
Q

Set font size for a paragraph to 16px

A

p {
font-size: 16px;
}

26
Q

Set the spacing between each line in a paragraph to 15px

A

p {
line-height: 15px;
}

27
Q

What is a pseudo class

A

A keyword that can be added to selectors to select a specific state of the selector

28
Q

Change the color of the anchor tag to red when a mouse hovers over it

A

a:hover {
color: red;
}

29
Q

What does changing an element’s relative position do

A

Specify how CSS should move the element relative to its current position in the normal flow of the page.
Other elements around it behave as it is in the default position

30
Q

What is the default layout of elements called

A

Normal Flow

31
Q

How do you change the relative position of an element

A

position; relative;

paired with offset property top, bottom, left or right

32
Q

What do each of the offset positions do

A 
Push elements opposite from direction
top pushes down
bottom pushes up
left pushes right
right pushes left
33
Q

What is absolute positioning

A

Locks element relative to its parent container

removes element from normal flow of document

34
Q

What is fixed positioning

A

Locks element relative to the browser

Removes element from normal flow

35
Q

What positioning do nav bars usually have

A

fixed positioning

36
Q

What is the difference between fixed and absolute positoning

A

With fixed positioning, element wont be moved when scrolling

37
Q

What does float do

A

Floating elements removed from normal flow and pushed either to the left or right of its parent
Usually paired with the width property

38
Q

When elements are overlapped how do you control which element appears on top

A

z-index property with higher number

39
Q

How can you center an element

A

margin: auto;

40
Q

What is the complimentary color to red

A

cyan

41
Q

What is the complimentary color to green

A

magenta

42
Q

What is the complimentary color to blue

A

yellow

43
Q

What are tertiary colors

A

combining primary colors with secondary colors

44
Q

What is the hsl

A

Hue, Saturation, Light

45
Q

What is hue in hsl

A

The spectrum of color

from 0 to 360

46
Q

What is saturation in hsl

A

level of gray between 0%(gray) to 100%(no gray)

47
Q

What is light in hsl

A

amount of white or black in color
0% black
50% the normal color
100% white

48
Q

Use a linear-gradient() for the div element’s background, and set it from a direction of 35 degrees to change the color from #CCFFFF to #FFCCCC.

A

div {
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}

49
Q

How to create a stripped gradient

A

background: repeating-linear-gradient

50
Q 
Create a striped gradient that goes across at 45degrees with the following blend
yellow 0px
blue 40px
green 60px
red 80px
A 
background: repeating-linear-gradient(
45deg,
yellow 0px,
blue 40px,
green 60px,
red 80px,
)
51
Q

Create a striped gradient that goes horizontally with yellow bars that are 40px followed by black bars that are 40px

A 
background: repeating-linear-gradient(
90deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px);
52
Q

Set the background of the body to https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png

A

body {
background: url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png);
}

53
Q

Increase the size of p tags by a factor of 2

A

p {
transform: scale(2);
}

54
Q

Move h2 tag to the left by 50%

A

h2 {
left: 50%;
}

55
Q

What are some transform properties

A

scale
skew
rotate

56
Q

Increase the size of h2 tags by 50% when a mouse hovers over it

A

h2:hover {
transform: scale(1.5);
}

57
Q

Skew the x axis of h1 element by 20 deg when hovered over

A

h1:hover {
transform: skewX(20deg);
}

58
Q

Skew the id top along the y axis by -30deg

A 
#top {
    transform: skewY(-30deg);
}

Web Design (3 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions