Module 1 HTML & CSS Flashcards
Where do you put non-visible content about the HTML document?
In the head element which contains information about the page. Head element can also contain the title element which is seen in top of browser or browser tab. Example also, favicon, preview image.
Where do you put visible content about the HTML document?
In the body element.
Where do the head and body tags go in a valid HTML document?
Within the !Doctype declaration and HTML element. Head should come before body
What is the purpose of a !DOCTYPE declaration?
It tells the browser which version of HTML the page is using.
Give five examples of HTML element tags.
- head, 2. body of visible content, 3. h1-h6 headings, 4. p paragraph, 5. img image tag to add images
What is the purpose of HTML attributes?
They provide additional information about the contents of the element. They are made up of a name and a value separated by equal sign =. Example from reading: lang=”en-us” for p tag
Give an example of an HTML entity (escape character).
Ampersand. Escape characters are special characters used in and reserved. Typed out as a code. Also allows for adding symbols such as currency, math characters, copyright/trademark, etc.
How do block level elements affect document flow?
They take up full width of the max width of container and its own line.
How do inline elements affect the document flow?
They take up only the space needed within that line.
What are the default width and height of a block-level element?
Width is entire parent container and height of the content. This can be changed by css.
What are the default width and height of an inline element?
Width is only the content and height is of the content. Inline will not let you change size, it is always only size of content.
What is the difference between an ordered list and an unordered list in HTML?
Ordered lists are numbered (lettered when nested), unordered lists are bulleted.
Is an HTML list a block element or an inline element?
Block
What HTML tag is used to link to another website?
the a tag with herf attribute
What is an absolute URL?
The full http link to a website
What is a relative URL?
A link to a folder or page within the website
How do you indicate the relative link to a parent directory?
You have to move up the directory first with ../
How do you indicate the relative link to a child directory?
You just have to name the child folder
How do you indicate the relative link to a grand parent directory?
You have to chain ../../ up the directories.
How do you indicate the relative link to the same directory?
You just name the file directly
What is the purpose of an HTML form element?
Allows webpage author to gather information entered by a user
Give five examples of form control elements.
text, password, text area, radio, checkbox, dropdown, multiple select, file input, submit
Give three examples of type attributes for HTML elements.
text, password, radio, checkbox, file, email, search, etc.
Is an HTML ‘a’ element a block element or an inline element?
Inline
What are the six primary HTML elements for creating tables?
table, thead, tbody, th, tr, td, tfoot
What purpose do the thead and tbody elements serve?
They set up the rows defining the head of the columns of the table. They are semantic elements.
Give two examples of data that would lend itself well to being displayed in a table.
Financial reports, or schedules.
What are the names of the individual pieces of a CSS rule?
selector, declaration, property, value
In CSS, how do you select elements by their class attribute?
Use the period .classname
In CSS, how do you select elements by their type?
Use the html element name
In CSS, how do you select an element by its id attribute?
Use the pound #idname
Name three different types of values you can use to specify colors in CSS.
Hex, rgba (a is for opacity in css3), or color names.
What CSS properties make up the box model?
Margin, padding, border.
Which CSS property pushes boxes away from each other?
Margin
Which CSS property add space between a box’s content and its border?
Padding
What is a pseudo-class?
Selectors that specify special states of a selected element
What are CSS pseudo-classes useful for?
They can highlight elements when users mouse over or select them to draw attention or keep track of something.
Name at least two units of type size in CSS.
px, em. Also, rem, in, ch, and more.
What CSS property controls the font used for the text inside an element?
font-family
What is the default flex-direction of a flex container?
Row
What is the default flex-wrap of a flex container?
No wrap
Why do two div elements “vertically stack” on one another by default?
By default div elements are blocks
What is the default flex-direction of an element with display: flex?
Row
What is the default value for the position property of HTML elements?
Static position aka normal flow.
How does setting position: relative on an element affect document flow?
It sets an element relative to where it would have been in normal flow. And it does not affect flow of rest of document.
How does setting position: relative on an element affect where it appears on the page?
It can be shifted from its original flow position.
How does setting position: absolute on an element affect document flow?
Removes it from the flow. Analogy: Acts like element is “dead” from the flow.
How does setting position: absolute on an element affect where it appears on the page?
It fits it absolutely within the nearest non static parent container.
How do you constrain an absolutely positioned element to a containing block?
It has to be within a non-static containing block.
What are the four box offset properties?
top, right, bottom, left.
What are the four components of “the Cascade”.
source order, inheritance, specificity, importance
What does the term “source order” mean with respect to CSS?
Which is the last ruleset that was established
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
with the “inherit” value.
List the three selector types in order of increasing specificity.
element, class id.
Why is using !important considered bad practice?
It overrides everything breaks cascade order.
