5 Important Things to Know About CSS & HTML for Job Interviews

1. What is CSS and HTML? How do they work together?

HTML (Hypertext Markup Language) is used to create the actual content of the page, such as written text, and CSS (Cascade Styling Sheets) is responsible for the design or style of the website, including the layout, visual effects, and background color.

2. What is CSS Flexbox?

It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially.

There are several properties that flexbox uses in the HTML webpage:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

To learn more about flexbox, the link below has been very helpful!

A Complete Guide to Flexbox | CSS-Tricks

3. How do margin, border, and padding fit together in the box model?

Let’s take a look at the image above. It seems pretty straightforward when you look at it, but it’s very easy to forget. Let me give you something that you can visualize in your head!

Imagine the ‘Element Content’ to be a house. Your house contains a bunch of furniture, food, utilities, etc. It’s holding all of your content. Now, outside your house, you have your yard/lawn. This will be your padding. Then, that little white picket fence surrounding your yard is going to be your border. Lastly, the distance from your fence to your next-door neighbor will be the margin.

4. Explain the three main ways to target elements.

In order to style certain elements on the page, you need to know how to specify those elements. I know I asked for three, but I will go ahead and describe all five.

Class

.class-selector {}

This targets elements with the class specified after the dot.

ID

#idSelector {}

Strongest selector out there which can be used. This is also its problem. If you use an ID-selector in a combination selection. It can overpower a lot of similar combinator descent selections. This is a nice bridge to combinators. It is combining the types of selectors above into a selection. The ID is specified after a #.

Element

element-selector {}

The element-selector is weaker than the use of a class-selector and target element types directly.

Attribute

element[attribute="selector"] {}

It is weaker(less specific) than the use of an element-selector and is written between brackets ‘[]’.

Universal

element > * {} /* universal selector*/

Is not specified to an element or a class. It’s a powerful selector, so be careful to use it in a global way. it’s presented by an asterisk.

5. Differentiate between inline and block element.

An inline element does not have an element to set width and height and also it does not have the line break. They allow other elements to sit to their left or right and have left and right padding and margins.

Block elements respect all of that, but they force a line break after another block element.

To play with these properties or other ones, please see the link below!

CSS display property