HTML & CSS Flashcards by Euichang Park

HTML skeleton

Where do you put non-visible content about the HTML document?

head element

How well did you know this?

Not at all

Perfectly

HTML skeleton

Where do you put visible content about the HTML document?

Body element

How well did you know this?

Not at all

Perfectly

HTML skeleton

Where do the head and body tags go in a valid HTML document?

HTML element

How well did you know this?

Not at all

Perfectly

HTML skeleton

What is the purpose of a doctype declaration?

an instruction to the web browser about what version of HTML the page is written in.(interpretation)

How well did you know this?

Not at all

Perfectly

HTML Syntax

Give five examples of HTML element types.

body
p
html
<h1> ~ </h1><h6>
</h6>
title</h6>

How well did you know this?

Not at all

Perfectly

HTML Syntax

What is the purpose of HTML attributes?

to change the color, size, and other features of HTML elements.

How well did you know this?

Not at all

Perfectly

HTML Syntax

Give an example of an HTML entity (escape character).

How well did you know this?

Not at all

Perfectly

HTML Block and Inline

How do block-level elements affect the document flow?

Always starts on a new line.
Always takes up the full width available
has a top and a bottom margin

How well did you know this?

Not at all

Perfectly

HTML Block and Inline

How do inline elements affect the document flow?

does not start on a new line
only takes up as much width as necessary
Takes up the space of an entire line
left and right margin only
padding

How well did you know this?

Not at all

Perfectly

HTML Block and Inline

What are the default width and height of a block-level element?

Content

How well did you know this?

Not at all

Perfectly

HTML Block and Inline

What are the default width and height of an inline element?

Size of the content

How well did you know this?

Not at all

Perfectly

HTML Lists

What is the difference between an ordered list and an unordered list in HTML?

Ordered lists have numbering

How well did you know this?

Not at all

Perfectly

HTML Lists

Is an HTML list a block element or an inline element?`1

block element

How well did you know this?

Not at all

Perfectly

HTML Links

What HTML tag is used to link to another website?

anchor href

How well did you know this?

Not at all

Perfectly

HTML Links

What is an absolute URL?

Exact URL to locate the resources

How well did you know this?

Not at all

Perfectly

HTML Links

What is a relative URL?

URL that has path

How well did you know this?

Not at all

Perfectly

HTML relative links

How do you indicate the relative link to a parent directory?

../

How well did you know this?

Not at all

Perfectly

HTML relative links

How do you indicate the relative link to a child directory?

use the name of the child directory

How well did you know this?

Not at all

Perfectly

HTML relative links

How do you indicate the relative link to a grandparent directory?

../../

How well did you know this?

Not at all

Perfectly

HTML relative links

How do you indicate the relative link to the same directory?

Type the name of the same directory

How well did you know this?

Not at all

Perfectly

HTML forms

What is the purpose of an HTML form element?

Semantics and the accessibility that happens as a result

Gather data from clients.

How well did you know this?

Not at all

Perfectly

HTML forms

Give five examples of form control elements.

input
textarea
label
fieldset
button
option
select

How well did you know this?

Not at all

Perfectly

HTML forms

Give three examples of type attribute values for HTML input elements.

text
radio
checkbox
button
url
range
email
password

How well did you know this?

Not at all

Perfectly

HTML forms

Is an HTML input element a block element or an inline element?

Inline

How well did you know this?

Not at all

Perfectly

HTML tables What are the six primary HTML elements for creating tables?

table, thead, tbody, tr, td, th

HTML tables What purpose do the thead and tbody elements serve?

thead: group header content tbody: group the body content

Html tables Give two examples of data that would lend itself well to being displayed in a table.

numbers? spreadsheet(anything we can store in a table)

CSS syntax What are the names of the individual pieces of a CSS rule? (What's the structure of CSS syntax)

id, class, element

CSS syntax In CSS, how do you select elements by their class attribute?

Using dot(.)

CSS syntax In CSS, how do you select elements by their type?

elements name

CSS Syntax In CSS, how do you select an element by its id attribute?

Using # (Hashtag)

CSS colors Name three different types of values you can use to specify colors in CSS.

Hex RGB HSL

CSS box model What CSS properties make up the box model?

CSS box model Which CSS property pushes boxes away from each other?

margin

CSS box model Which CSS property add space between a box's content and its border?

padding

CSS pseudo-classes What is a pseudo-class?

add styles to selectors, but only when those selectors meet certain conditions. pseudo class is expressed by adding colon

CSS pseudo-classes What are CSS pseudo-classes useful for?

keyword added to a selector that specifies a special state of the selected element(s). ex) :hover, :focus, :active order) :link, :visited(only for hyper links), :hover, :focus, :active.

CSS fonts Name two types of units that can be used to adjust font-size in CSS.

use rem more.

CSS fonts What CSS property controls the font used for the text inside an element?

font-family; why would you want to use more than one font? backup font (built ins)

difference between serif and san -serif

serif has a littl tiks

CSS cascade What are the four components of "the Cascade".

inheritance, Source order, Specificity, importance? Highest is importance

CSS cascade What does the term "source order" mean with respect to CSS?

CSS Cascade How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

children set to inherit

CSS cascade List the three selector types in order of increasing specificity.

type(element name), class, id

CSS cascade Why is using !important considered bad practice?

It breaks the natural cascading in stylesheet and makes debugging harder

CSS flexbox What is the default flex-direction of a flex container?

Row

CSS flexbox What is the default flex-wrap of a flex container?

nowrap

CSS layout classes Why do two div elements "vertically stack" on one another by default?

Because they are block elements?

CSS layout classes What is the default flex-direction of an element with display: flex?

What is the default flex-direction of an element with display: flex?

CSS positioning What is the default value for the position property of HTML elements?

Static

CSS Positioning How does setting position: relative on an element affect document flow?

It does not

CSS- positioning How does setting position: relative on an element affect where it appears on the page?

It does not

Css positioning How does setting position: absolute on an element affect document flow?

act as it doesn't exist

Css positioning How does setting position: absolute on an element affect where it appears on the page?

align itself to nonstatic positioned parent

CSS positioning How do you constrain an absolutely positioned element to a containing block?

assing non static position value

Css transforms

changes the shape, position, and orientation of page elements.

Give four examples of CSS transform functions.

rotate, translateX, translateY, scale

The transition property is shorthand for which four CSS properties?

transition-property , transition-duration , transition-timing-function , transition-delay

Give two examples of media features that you can query in an @media rule.

max-width, min-width

Which HTML meta tag is used in mobile-responsive web pages?

viewport tag

What is a breakpoint in responsive Web design?

Points where the website content responds according to the device width

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?

px will keep the number values even though the size of screen changes.,

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will "win". Why is that?

CSS cascading