Freecodecamp random quiz - CSS Flashcards
What is the attribute you attach to a form that specifies where the form will be submitted to?
The “action” attribute.
How can you prevent a user from submitting a form without filling in certain inputs, but only using html?
Add a “required” attribute to the input elements that are required. The required attribute does not need a value.
< input type=”text” required >
Why is it considered best practice for a label to have a “for” attribute linking it to an input?
It allows assistive technologies to create a linked relationship between the label and the related input element.
Why is it considered best practice for a label to have a “for” attribute linking it to an input?
It allows assistive technologies to create a linked relationship between the label and the related input element.
How do you tell the browser what version of HTML you are using?
Declare the Doctype of an HTML Document.
< !DOCTYPE html >
This means HTML version 5
What is an attribute selector in CSS? give an example of one!
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.
What is the size of an em based on ?
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.
What is CSS inheritance?
A style rule applied to a parent element will be inherited by its children.
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 >
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 >
Will an id attribute CSS declaration override a class attribute CSS declaration?
Yes id attribute CSS declarations have higher precedence. #id beats .class
Do inline styles override styles in style tags and external style sheets?
Yes they do!
How many unique colours are there in the css hexidecimal system?
16^6 = 16, 777, 216 unique colours!
How many unique colours are there in the css rgb() system?
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.
How do you declare a CSS variable?
precede it with two hyphens
–main-font-color: #6739fd;
How do you use a custom CSS variable?
Use the var( ) method.
background: var(–bg-color);
What is the :root pseudo-class selector and what is it used for?
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.
Can you overwrite a global CSS variable for a specific selector?
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.
What arguments does the box-shadow property accept?
- 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
Can you make multiple shadows in one line with the box-shadow property ?
Yes you can
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
How would you make anchor tag text turn blue when you hover over it?
Using the hover pseudo-class selector.
a:hover{
color: blue;
}
What is the CSS box model?
CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model
How do block-level and inline items behave?
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).
What does the term the normal flow of an HTML document mean and how can it be overwritten?
The default layout of elements is called the normal flow of a document, but CSS offers the position property to override it.
Does changing an elements position to relative remove it from normal flow?
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.
What is an important nuance when using absolute positioning?
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.
What CSS property lets you scale up or down an elements size?
transform: scale(2) // this will double an elements size;
What CSS property lets you scale, move, rotate and skew your elements?
The transform property has a variety of functions that let you scale, move, rotate, skew, etc., your elements.
How do you make an anchor tag open its link in a new window?
With the target=”_blank” attribute and value.
Are all CSS properties inherited?
No.
For example:
Font-size is inherited.
Position is not.
What are the before and after pseudo-elements used for ?
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.
What is @keyframes used for?
Creating animations.
What property allows us to include the padding and border in an element’s total width and height?
box-sizing: border-box;
