Visual Design & CSS

Question 1

pseudo-classes

Answer 1

A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.

For example, the styling of an anchor tag can be changed for its hover state using the :hover pseudo-class selector. Here’s the CSS to change the color of the anchor tag to red during its hover state:

a:hover {
color: red;
}

Question 2

CSS offsets of top or bottom, and left or right

Answer 2

section {

tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. tell the browser how far to offset an item relative to where it would sit in the normal flow of the document.

position: relative;
bottom: 10px
}

Question 3

fixed position

Answer 3

Locks an element relative to the browser window. Similar to absolute positioning. However, an element with a fixed position won’t move when the user scrolls.

#navbar {

position: fixed;
top: 10px;
left: 0px;

width: 100%;
background-color: #767676;   }

After you have added the code, scroll the preview window to see how the navigation stays in place.

This looks really cool!

Question 4

float: left;
float: right;

Answer 4

Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It’s commonly used with the width property to specify how much horizontal space the floated element requires.

Question 5

z-index

z-index: 1;

Answer 5

When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the z-index property of an element move it higher in the stack than those with lower values.

Question 6

Additive Color theory

Answer 6

Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.

Question 7

Using Complementary Colors

Answer 7

The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it’s overused on a website, and can sometimes make text harder to read if it’s placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.

Question 8

Hue, Saturation, Lightness

hsl()

Color	HSL
red	        hsl(0, 100%, 50%)
yellow	hsl(60, 100%, 50%)
green	hsl(120, 100%, 50%)
cyan	hsl(180, 100%, 50%)
blue	hsl(240, 100%, 50%)
magenta hsl(300, 100%, 50%)

Answer 8

Hue is what people generally think of as ‘color’. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl(), hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.

Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.

Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.

Question 9

Set a texture as a css background

Answer 9

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

Question 10

Transform scale

Answer 10

The following code example doubles the size of all the paragraph elements on the page:

p {
transform: scale(2);
}

Question 11

Scale an Element on Hover

Answer 11

Here’s an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:

p:hover {
transform: scale(2.1);
}

Question 12

Transform property has a variety of functions that let you scale, move, rotate, skew, etc., your elements.

Answer 12

When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements.

Question 13

Skewing elements on a page

Answer 13

transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree.

The following code skews the paragraph element by -32 degrees along the X-axis.

p {
transform: skewX(-32deg);
}

Question 14

blue square

Answer 14

.center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 0px;
    box-shadow: 25px 10px 10px 10px green;
  }