HTML/CSS

Question 1

What is HTML

Answer 1

Hyper Text Markup Language. It provides a structure and content to a webpage

Question 2

What is the HTML5 doctype declaration?

Answer 2

!DOCTYPE

Question 3

List some tags. What is it used for?

Answer 3

div - block element used to hold other elements or text
headings - h1-h6 used to create headings of varying sizes
p - used to create plain text
img - used to insert an image into HTML
a - Anchor - used to create a link
span - used inside a container and is used to mark up a part of the doc

Question 4

What are the required tags for an HTML document?

Answer 4

HTML
HEAD
TITLE
BODY

Question 5

What is the tag for an ordered list? unordered list? Change bullet styling?

Answer 5

ol - ordered list, numbered list

ul - unordered list. Use the property using css or html. list-style-type

Question 6

Do all tags come in a pair? List a self-closing tag.

Answer 6

Not all tags come in pairs, some are closed in the same tag that calls them

Some Include
col - a column in a table
br - create a line break
hr - creates a horizontal line
img - used to define an image
link - mostly used to add external stylesheets in the head
source - used to give multiple media resources for audio, video, and pictures

Question 7

What’s the difference between an element and an attribute? List some global attributes.

Answer 7

HTML element holds the content. HTML attributes are used to describe the characteristics of an HTML element in detail.

Question 8

What is the syntax for a comment in HTML?

Answer 8

Opening Angle Bracket
Exclamation Point
dash dash

Question 9

What tags would you use to create a table? A navbar? What about a form?

Answer 9

table tag - followed by tr for rows, th for data heading, and td for data

nav tag - used with a tags to create navigation links

form tag - used with inputs to pass user-data

Question 10

What’s the difference between a class and id?

Answer 10

An ID is only used to identify one single element in our HTML.
A class can be used to identify more than one HTML element.

Question 11

How would you include CSS into an HTML document? What about JS?

Answer 11

script for js and style for css

Both can be implemented from a specific js or css file by adding them in the head

Question 12

What is a semantic tag? What about formatting tags/elements?

Answer 12

Semantic HTML tags provide information about the contents of those tags that goes beyond just how they look on a page.
Formatting tags are used to make text bold, italicized, or underlined.

Non-Semantic : div, span
Semantic: article, footer, header, main, nav, summary
Formatting: b, i, strong, mark

Question 13

What’s the difference between a block and an inline element?

Answer 13

Inline elements occupy only sufficient width,dont start new lines, and don’t have top/bottom margins.
Block elements occupy full width of page, always start in a line, have top and bottom margins

Question 14

What is CSS? what are the different ways of styling an html file?

Answer 14

Cascading Style sheets. It can be added in 3 ways: inline-by using the style attribute in HTML elements, Internal-by using a element in the section, and External-by using an external CSS file.

Question 15

Which way has highest priority when styles cascade: inline, internal, and external stylesheets. Which is best practice? Why?

Answer 15

Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles.

Inline mixes content and presentation, so it is best to use it sparingly
Internal should only be used when a specific document has a unique style
external is the best practice as it separates content and presentation and can be used for multiple documents

Question 16

What are the different CSS selectors? Write the syntax for each.

Answer 16

.class
#id
*
Element

Question 17

What is a psuedo-class? What is the syntax for selecting that?

Answer 17

EX: button:hover {}

A psuedo-class is a keyword added to a selector that specifies a special state of the selected elements

Question 18

Can I select multiple elements at once with CSS? If so, what is the syntax?

Answer 18

Yes you can select multiple elements at once.

The * selector selects all elements. > , to select specific different elements

Question 19

Explain the concept of specificity and how it relates to styling conflicts

Answer 19

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and therefore will be applied. Specificity is based on the matching rules which are composed of different sorts of selectors
type selectors > class selectors > id selectors
!important overrides specificity

Question 20

Explain the CSS box model

Answer 20

The box model is essentially a box that wraps around every HTML element. It consists of Margins, Borders, Padding, and the actual content

Content - Content of the box
Padding - area directly around the content
Border - border around the padding
Margin - area outside the border

Question 21

What features did CSS3 introduce?

Answer 21

Rounded Corners
Shadows
Gradients
Transitions/Animations
Mini Columns
Flexible Box
Grid Layout