Term
| In CSS how do you degrade fonts and why would you want to do so? |
|
Definition
In the event that a font is not available or installed on a client's computer or the link to the font file becomes invalid, a font degradation is implemented to serve as a back-up font style in case the first listed font is not available.
.p {
font-family: Helvetica, monospace;
}
The second, back-up font is denoted by a , and a second font. |
|
|
Term
| When should you use classes vs ids in CSS styling? |
|
Definition
IDs should only be used for a section of styling that will be used ONCE. Common usages for IDS include headers, footers, navbars. You may want a specific look for an element that will only be used ONCE - thereby necessitating a unique section of styling just for this component. Use IDs when the styling rules for the particular component is not something you would want to apply to the rest of your website.
For example, you may want to uppercase all links within a navbar but not links found elsewhere, like within an blog article. So instead of styling the generic a element, you can style #navbar a { } so that only links within the id of navbar receive the unique styling rules.
Classes can be used over and over again. Use classes for styling components that will be used repeatedly. |
|
|
Term
| How do you override an !important declaration for a CSS style? Where might you come across this issue? |
|
Definition
Either use an entirely new class name to avoid using the class that has !important in it. OR you could edit the original style that contained !important from the parent style (Bootstrap), or remove !important from the original. As a last resort you can use an !important of your own to override the first !important - but this should be avoided at all possible. Try to find a way to be more specific with your selectors to avoid using !important.
You might come across this issue with a parent style sheet or framework like Wordpress or Bootstrap that have declared their own rules for certain styles and made them !important. When you go to override these styles with your own CSS, it can be difficult to WIN over the original !important without using your own !important. To get around this, try to come up with your own class names that mimic the naming scheme/styling of the original without having to use its built-in style. |
|
|
Term
| How can you make an image circular? |
|
Definition
|
|
Term
| What is floats and clears used for? |
|
Definition
| Floats and clears are CSS properties that used to be prominently used in designing layouts. Flexbox and Grid have since replaced this confusing system. Nowadays floats are more commonly used to wrap text around images. |
|
|
Term
| In keeping with good practice, how many H1s should you have on a page and why? |
|
Definition
| Ideally only 1 for search engine optimization reasons. H1s are indexed in SEOs so make sure they reflect something important. |
|
|
Term
| What do the KBD and CODE tags do? |
|
Definition
allows you to display a code snippet that you don't want to actually render. Useful for teaching/sharing code to others.
rendered a keyboard command |
|
|
Term
| What CSS property can you use to alter the layering of elements on a page to either bring them forward or back? |
|
Definition
|
|
Term
| What is the difference between display:none and visibility:hidden? |
|
Definition
| Display:none will completely take a component out of the page. Visibility:hidden will hide the component but the 'space' it takes up will still be accounted for. Visibility:hidden will make something 'invisible' but it's still there in terms of the space it takes up. |
|
|
