Applied Visual Design Flashcards by Derek M

What are the options for text-align

justify
center
right
left

How well did you know this?

Not at all

Perfectly

What is the justify option for text-align

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?

Not at all

Perfectly

Change the width of images to 220px

img{
width: 220px;
}

How well did you know this?

Not at all

Perfectly

What are the different ways to express width

em
px
% relative to its parent

How well did you know this?

Not at all

Perfectly

Set the height of h4 to 35px

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

How well did you know this?

Not at all

Perfectly

What are the different ways to make text bold

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

How well did you know this?

Not at all

Perfectly

What are the different ways to underline text

text-decoration: underline

{u} text {/u}

How well did you know this?

Not at all

Perfectly

What are the different ways to italicize text

font-style: italic;

{em} text {/em}

How well did you know this?

Not at all

Perfectly

How do you strike through text with CSS

text-decoration: strike-through;

How well did you know this?

Not at all

Perfectly

How do you strike through text without CSS

{s} text {/s}

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

How do you adjust background color opacity

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

How well did you know this?

Not at all

Perfectly

What are the values for opacity

0.0 - 1.0

How well did you know this?

Not at all

Perfectly

set font of a h3 elements to 25px

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

How well did you know this?

Not at all

Perfectly

How do you add a shadow to an element

box-shadow

How well did you know this?

Not at all

Perfectly

What are the properties for box shadow

offset-x
offset-y
blur-radius  (optional)
spread-radius (optional)
color

How well did you know this?

Not at all

Perfectly

How do you control how transparent an element is

opacity

How well did you know this?

Not at all

Perfectly

Set all p tags to 75% opacity

p {
opacity: .75;
}

How well did you know this?

Not at all

Perfectly

What does it mean when opaque is set to 1

element is not transparent at all

How well did you know this?

Not at all

Perfectly

How do you make sure your element is capitalized

text-transform: capitalize;

How well did you know this?

Not at all

Perfectly

How do you make all letters uppercase in your element

text-transform: uppercase;

How well did you know this?

Not at all

Perfectly

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

text-transform: lowercase;

How well did you know this?

Not at all

Perfectly

What does text-transform: inherit; do

Inherit text transform property from the parent element

How well did you know this?

Not at all

Perfectly

What are the different text-transform properties

Study These Flashcards

uppercase
lowercase
capitalize
initial 
inherit
none

Set font size for a paragraph to 16px

p { font-size: 16px; }

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

p { line-height: 15px; }

What is a pseudo class

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

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

a:hover { color: red; }

What does changing an element's relative position do

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

What is the default layout of elements called

Normal Flow

How do you change the relative position of an element

position; relative; | paired with offset property top, bottom, left or right

What do each of the offset positions do

``` Push elements opposite from direction top pushes down bottom pushes up left pushes right right pushes left ```

What is absolute positioning

Locks element relative to its parent container | removes element from normal flow of document

What is fixed positioning

Locks element relative to the browser | Removes element from normal flow

What positioning do nav bars usually have

fixed positioning

What is the difference between fixed and absolute positoning

With fixed positioning, element wont be moved when scrolling

What does float do

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

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

z-index property with higher number

How can you center an element

margin: auto;

What is the complimentary color to red

cyan

What is the complimentary color to green

magenta

What is the complimentary color to blue

yellow

What are tertiary colors

combining primary colors with secondary colors

What is the hsl

Hue, Saturation, Light

What is hue in hsl

The spectrum of color | from 0 to 360

What is saturation in hsl

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

What is light in hsl

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

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.

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

How to create a stripped gradient

background: repeating-linear-gradient

``` Create a striped gradient that goes across at 45degrees with the following blend yellow 0px blue 40px green 60px red 80px ```

``` background: repeating-linear-gradient( 45deg, yellow 0px, blue 40px, green 60px, red 80px, ) ```

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

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

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

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

Increase the size of p tags by a factor of 2

p { transform: scale(2); }

Move h2 tag to the left by 50%

h2 { left: 50%; }

What are some transform properties

scale skew rotate

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

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

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

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

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

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

Applied Visual Design Flashcards

(58 cards)