Html & CSS

Question 1

What is SVG?

Answer 1

“SVG” stands for “Scalable Vector Graphics”.

Question 2

What is XML?

Answer 2

XML (aka, “Extensible Markup Language”) is an HTML-like syntax which is used for lots of things, from APIs, to RSS, to spreadsheet and word editor software.

Question 3

What is a binary file?

Answer 3

A binary file is a computer file that is not a text file.[1] The term “binary file” is often used as a term meaning “non-text file”.[2] Many binary file formats contain parts that can be interpreted as text; for example, some computer document files containing formatted text, such as older Microsoft Word document files, contain the text of the document but also contain formatting information in binary form.[2]

Question 4

What is the xmlns attribute?

Answer 4

xmlns stands for “XML NameSpace”. This specifies what dialect of XML you’re using. In our case, that dialect is the SVG language spec. Without it, some browsers will not render your image or will render it incorrectly.

Question 5

What are some situations where you wouldn’t want to use SVG?

Answer 5

They are extremely inefficient at storing complex images. If your image is supposed to be photo-realistic, or it has fine detail or texture (“grunge textures” are a great example), then SVGs are the wrong tool for the job.

Question 6

What are the benefits of “inlining” your SVGs? What are the drawbacks?

Answer 6

SVG’s properties will be visible to your code, which will allow you to alter the image dynamically via CSS or JavaScript.

some serious drawbacks: it makes your code harder to read, makes your page less cacheable, and if it’s a large SVG it might delay the rest of your HTML from loading.

Question 7

How to remove the extra spacing in a table between the first row and the rest?

Answer 7

table {
border-collapse: collapse;
}

Question 8

How to add padding to the data in the table cell ?

Answer 8

td, th {
border: 1px solid #999;
padding: 0.5rem;
text-align: left;
}

Note that there’s always only td, th in a table

Question 9

HTML table
How to provide common styling to columns?

Answer 9

HTML has a method of defining styling information for an entire column of data all in one place — the <col> and <colgroup> elements.

These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td> or <th> in the column, or use a complex selector such as :nth-child.

Styling columns like this is limited to a few properties: border, background, width, and visibility. To set other properties you’ll have to either style every <td> or <th> in the column, or use a complex selector such as :nth-child.

Without col, have to style on the td/th:

<table>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>


Instead col elements are specified in a colgroup container

<table>
<colgroup>
<col></col>
<col></col>
</colgroup>
</table></table>

Question 10

Why would you want a CSS reset?

Answer 10

To fix the problems with default styles on different browsers

Question 11

CSS: What are absolute units?

Answer 11

Absolute units are those that are the same in any context.
px is an absolute unit because the size of a pixel doesn’t change relative to anything else on the page. In fact, px is the only absolute unit you should be using for web projects. The rest of them make more sense in a print setting because they are related to physical units such as in (inch) and cm (centimeter).

Question 12

What are some instances where you might want to use vh and vw?

Answer 12

Viewport units
The units vh and vw relate to the size of the viewport. Specifically, 1vh is equal to 1% of the viewport height and 1vw is equal to 1% of the viewport width. These can be useful any time you want something to be sized relative to the viewport, examples including full-height heroes, full-screen app-like interfaces.

Question 13

What is em?
If the parent font-size is 16px, what is 1em ?

Answer 13

The em is a relative unit that refers to the font-size of the parent’s element. So, if a parent’s font-size is 16px, then 1em would be 16px and 2em would be 32px. An important thing to realize with em is that if the font-size of an element changes, so does the value of em. So, if you set some element’s font size to 2em, and one of its children is also 2em, the calculated value of those 2 font-sizes will not be the same. The child will be double the size of the parent.

Question 14

What is rem?

Answer 14

A rem is very similar to an em except that instead of always referring to an element’s parent, it always refers to the font size of the root HTML element.
So, for example, if a parent and child both get 2rem, the calculated value will be the same.

Question 15

What is viewport width (vw)?

Answer 15

Viewport Width (vw) – A percentage of the full viewport width. 10vw will resolve to 10% of the current viewport width, or 48px on a phone that is 480px wide.

The difference between % and vw is most similar to the difference between em and rem. A % length is relative to local context (containing element) width, while a vw length is relative to the full width of the browser window.

Question 16

What is viewport Height?

Answer 16

Viewport Height (vh) – A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height.

Question 17

What is Viewport Minimum (vmin)?

Answer 17

Viewport Minimum (vmin) – A percentage of the viewport width or height, whichever is smaller. 10vmin will resolve to 10% of the current viewport width in portrait orientations, and 10% of the viewport height on landscape orientations.

Question 18

What is Viewport Maximum (vmax)?

Answer 18

Viewport Maximum (vmax) – A percentage of the viewport width or height, whichever is larger. 10vmax will resolve to 10% of the current viewport height in portrait orientations, and 10% of the viewport width on landscape orientations. Sadly, and strangely, vmax units are not yet available on Internet Explorer or Edge.

Question 19

What are the 2 ways to add fonts that are not installed on a user’s computer?

Answer 19

Web fonts
If you want to use a font that will not be available on the user’s device, you will need to import the font from an online source, either a font library or an asset on your site.

To use a font from one of these libraries, go to the website, select a font and then copy a snippet from the website to import that font from their server into your website. You’ll be given either a <link></link> tag to put in your HTML like so….

… or an @import tag that can be dropped at the top of a CSS file.

Question 20

What is the ‘system font stack’ and why would you want to use it?

Answer 20

The system font stack
If you use the font-family property to change to a font like impact or Times New Roman, and those fonts do not happen to be installed on your user’s computer, then a fallback font will be displayed.

body {
font-family: system-ui, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;
}

Question 21

Which property would you use to increase or decrease the space between letters in a word?

Answer 21

letter-spacing
Letter spacing does what you would expect…. it changes the space between letters in a word. This can be useful for adjusting custom fonts that you feel have too much or too little space. It can also be aesthetically pleasing in some cases, like headers.

Question 22

Which property would you use to increase or decrease the space between lines in a paragraph?

Answer 22

line-height
Line height adjusts the space between lines in wrapped text. Adding a little line-height can increase readability.

Question 22

Which property would you use to make an element transparent?

Answer 22

Opacity

Question 23

Which property would you use to make a background image tile?

Answer 23

background-repeat;

Question 24

Which property would you use to add scrollbars to an element?

Answer 24

overflow: scroll;

Question 25

Which property would you use to add a shadow behind an element?

Answer 25

box-shadow

Question 26

Which property would you use to create rounded corners on an element?

Answer 26

border-radius

Question 27

How would you use border-radius to make a circular element?

Answer 27

To create a circular element using border-radius, you need to set the border-radius property to 50% and ensure the element has equal width and height.

border-radius: 50%; /* Make it circular */

Question 28

What is the difference between the child combinator and the descendant combinator?

Answer 28

Descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc.) that matches the previous selector.
.ancestor .contents {
/* some declarations */
}
But what if we wanted to be more specific and select only the child or grand-child divs? That’s where the child combinator > comes in handy. Unlike the descendant combinator, it will only select direct children.

Question 29

How does the syntax of pseudo-classes and pseudo-elements differ?

Answer 29

pseudo-classes use one :
pseudo-elemts use two ::

Question 30

How could you select all classes that begin with thunder?

Answer 30

[class^=’thunder’] {
/* Classes are attributes too!
This will target any class that begins with ‘thunder’:
class=’thunderstorm’
class=’thundery’
*/
}

Question 31

What is the difference between static and relative positioning?

Answer 31

Static positioning is the default positioning mode of every element and properties top, right, bottom, left do not affect the position of the element.
Relative on the other hand, allow the properties top, right, bottom, left to displace the element relative to its normal (initial) position in the flow of the document.

Question 32

What is absolute positioning useful for?

Answer 32

It is useful when you need to position something at an exact point on the screen without disturbing the other elements around it.

Question 33

What is the difference between fixed and sticky positioning?

Answer 33

Fixed positioning means the element will remain in its fixed position as the page scrolls, but for sticky positioning, the element will stay come into view then stop and stay in its position until the parent container scrolls off.

Question 34

How would you declare a custom property with a name of text-color?

Answer 34

First, declare with double hyphen – and with a case sensitive, hyphen separated property name.

:root {
–text-color: red;
}

When we want to access a custom property, use the var() function and place our custom property name inside with the double hyphen –

.cool-paragraph {
–var(–text-color);
}

Question 35

How would you access a custom property with a name of background-color?

Answer 35

You can access it by using var() function as the value of a CSS property.

.cool-title {
color: var(–background-color);
}

Question 36

Where would you declare a custom property to have its scope be global and accessible by all other selectors?

Answer 36

I would declare it in the :root selector. This is essentially the same the html selector but has higher specificity.

By declaring our custom property in the :root selector, we can declare it on any valid selector since any other selector would be considered a descendant of the :root selector.

Question 37

What are CSS frameworks?

Answer 37

Frameworks like Bootstrap do a lot of the heavy lifting of packaging up commonly used CSS code for you, even icons and interactions (like menu dropdowns). They are designed to abstract away the process of coding intuitive, reusable, and responsive elements.

A CSS framework is ultimately just a bundle of CSS that you can use and access, using the classes defined by the framework. For example, many frameworks provide a class called .btn that will add all the needed styles to your buttons, without you having to write any CSS. In general, to use a framework, you need to understand how it expects you to structure your website and which classes it uses to apply its specific set of styles.