Basics Flashcards
vs Submit
Submit
It is considered best practice to set a for attribute on the label element, with a value…?
…that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element
if there are conflicting declarations within class and id in css which one would be applied?
However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.
when you set padding padding: 10px 20px 10px 20px; (or whatever has 4 parameters) in what order does it work?
clockwise notation. These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.
how to apply CSS code to all elements with specific value of a given attribute?
[type=’radio’] {
margin: 20px 0px 20px 0px;
}
don’t forget the quotes!
Relative units, such as em or rem, are relative to another length value. Which one?
For example, 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.
Overriding CSS. how many levels is there and what are they?
- html tag style
- class style
- last declared class style
- ID style
- inline style in the dag itself
- mark !important in any css block
Variables
background: var(–penguin-beak, orange);
reference to the variable and a fallback value of orange
How to set a CSS var so it is available throughout the entire document?
When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as cascading. Because of cascading, CSS variables are often defined in the :root element.
Can the css var be redefined? How to redefine it for a smaller screen size?
@media (max-width: 350px) {
:root {
/* add code below */ --penguin-size:200px; --penguin-skin:black; /* add code above */ } }
recommended alternative for <i>?</i>
<em></em>
recommended alternative for <b>?</b>
<strong></strong>
recommended alternative for ?
<del></del>
keyword for shadows?
The box-shadow property takes values for 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 and a color value, in that order. The blur-radius and spread-radius values are optional.
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
what pseudo-classes do you know?
hover
what’s the range of hue() in css?
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.
call the arguments hsl(240, 100%, 50%)
hue saturation lightness
when to use HSL()?
This is useful when you have a base hue you like, but need different variations of it.
how to attach something to an element using css?
.heart:after {
background-color: blue;
content: "";
border-radius: 25%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}how to set up animation?
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}How to make the animation last after it finishes?
animation-fill-mode: forwards;
How to make animation play forever?
animation-iteration-count: infinite;
animation-timing-function options
ease ;ease-out; ease-in; linear; cubic-bezier(0, 0, 0.58, 1); etc
what about setting alt attribute to IMG in HTML5?
Per HTML5 specification, this is now considered mandatory. If IMG is a decoration, alt attribute should be present but can be empty
What special there is about H1 tag?
One final point, each page should always have one (and only one) h1 element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.
How divs van be replaced?
HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others.
“Click here”-only links should be…
replaced or extended with more meaningful text
accesskey is meant for..
interactive elements such as forms, links, buttons
how to stretch an image up to its original width to fit to the resized block?
img {
max-width: 100%;
display: block;
height: auto;
}how to optimize images for retina displays?
The simplest way to make your images appear “retina” (and optimize them for retina displays) is to define their width and height values as only half of what the original file is.
grid-template-columns - settings for each column
grid-template-columns:10px 5px 10px auto 50px 10% 2fr 1fr
