Freecodecamp random quiz - CSS

Question 1

What is the attribute you attach to a form that specifies where the form will be submitted to?

Answer 1

The “action” attribute.

Question 2

How can you prevent a user from submitting a form without filling in certain inputs, but only using html?

Answer 2

Add a “required” attribute to the input elements that are required. The required attribute does not need a value.

< input type=”text” required >

Question 3

Why is it considered best practice for a label to have a “for” attribute linking it to an input?

Answer 3

It allows assistive technologies to create a linked relationship between the label and the related input element.

Question 4

Why is it considered best practice for a label to have a “for” attribute linking it to an input?

Answer 4

It allows assistive technologies to create a linked relationship between the label and the related input element.

Question 5

How do you tell the browser what version of HTML you are using?

Answer 5

Declare the Doctype of an HTML Document.

< !DOCTYPE html >

This means HTML version 5

Question 6

What is an attribute selector in CSS? give an example of one!

Answer 6

A way of selecting an element based on an attribute and that attributes value.

They are placed in square brackets [attr=value]

For example [type=checkbox] would be a common one to use.

Question 7

What is the size of an em based on ?

Answer 7

An em is based on the size of an element’s font. If you use it to set the font-size property itself, it’s relative to the parent’s font-size.

Question 8

What is CSS inheritance?

Answer 8

A style rule applied to a parent element will be inherited by its children.

Question 9

An element is styled with 2 classes that both style the color property. What determines which style rule is applied.

< style >
.pink-text {
color: pink;
}

.blue-text{
color: blue;
}
< /style >

< h1 class=”pink-text blue-text” >Welcome< /h1 >

Answer 9

The order of the css declarations in the style sheet. The .blue-text class declaration is last so will beat pink-text, even if you swapped the class names in the element:

< h1 class=”blue-text pink-text” >Still blue< /h1 >

Question 10

Will an id attribute CSS declaration override a class attribute CSS declaration?

Answer 10

Yes id attribute CSS declarations have higher precedence. #id beats .class

Question 11

Do inline styles override styles in style tags and external style sheets?

Answer 11

Yes they do!

Question 12

How many unique colours are there in the css hexidecimal system?

Answer 12

16^6 = 16, 777, 216 unique colours!

Question 13

How many unique colours are there in the css rgb() system?

Answer 13

each colour red, green and blue has a range of 0-255 so …

256^3 = 16, 777, 216 unique colours the same as the css hexadecimal system.

Question 14

How do you declare a CSS variable?

Answer 14

precede it with two hyphens

–main-font-color: #6739fd;

Question 15

How do you use a custom CSS variable?

Answer 15

Use the var( ) method.

background: var(–bg-color);

Question 16

What is the :root pseudo-class selector and what is it used for?

Answer 16

The :root element allows you to access CSS variables from any selector in the style sheet.

To make use of inheritance, CSS variables are often defined in the :root element.

:root is a pseudo-class selector that matches the root element of the document, usually the html element. By creating your variables in :root, they will be available globally and can be accessed from any other selector in the style sheet.

Question 17

Can you overwrite a global CSS variable for a specific selector?

Answer 17

yes you can. To do this just re-declare the variable again within the selector where you want the variable to have a different value.

Question 18

What arguments does the box-shadow property accept?

Answer 18

• offset-x (how far to push the shadow horizontally from the element),
• offset-y (how far to push the shadow vertically from the element),
• blur-radius,
• spread-radius
• color

Question 19

Can you make multiple shadows in one line with the box-shadow property ?

Answer 19

Yes you can

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Question 20

How would you make anchor tag text turn blue when you hover over it?

Answer 20

Using the hover pseudo-class selector.

a:hover{
color: blue;
}

Question 21

What is the CSS box model?

Answer 21

CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model

Question 22

How do block-level and inline items behave?

Answer 22

Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans).

Question 23

What does the term the normal flow of an HTML document mean and how can it be overwritten?

Answer 23

The default layout of elements is called the normal flow of a document, but CSS offers the position property to override it.

Question 24

Does changing an elements position to relative remove it from normal flow?

Answer 24

No changing an element’s position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.

Question 25

What is an important nuance when using absolute positioning?

Answer 25

One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;), the browser will keep looking up the chain and ultimately default to the body tag.

Question 26

What CSS property lets you scale up or down an elements size?

Answer 26

transform: scale(2)
// this will double an elements size;

Question 27

What CSS property lets you scale, move, rotate and skew your elements?

Answer 27

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

Question 28

How do you make an anchor tag open its link in a new window?

Answer 28

With the target=”_blank” attribute and value.

Question 29

Are all CSS properties inherited?

Answer 29

No.
For example:
Font-size is inherited.
Position is not.

Question 30

What are the before and after pseudo-elements used for ?

Answer 30

Adding content before or after the children of an element, for example:

<div>
  before text
      <h1>Heading inside the div</h1>
  after text
</div>

div::before{
content: “before text”
}

div::after{
content: “after text”
}

This might be useful to add an image/logo or some generic text to lots of elements at once.

Question 31

What is @keyframes used for?

Answer 31

Creating animations.

Question 32

What property allows us to include the padding and border in an element’s total width and height?

Answer 32

box-sizing: border-box;