HTML & CSS Concepts Flashcards
Where do you put non-visible content about the HTML document?
They are put inside the < head > tag
Where do you put visible content about the HTML document?
You put them in the < body > tag
Where do the head and body tags go in a valid HTML document?
Inside the < html > tag
What is the purpose of a < !Doctype > declaration?
This declaration tells the browser to use the latest version of HTML
Give five examples of HTML element tags.
head, body, span, div, html
What is the purpose of HTML attributes?
all HTML elements can have attributes added, which modifies the way the element functions.
How do block-level elements affect the document flow?
these block-level elements will always start on a new line. What ever content follows these elements will also start on a new line
How do inline elements affect the document flow?
Inline elements will continue on the same line as long as there is space to do so
What are the default width and height of a block-level element?
The default width is 100% but the default height depends on the content inside the block element
What are the default width and height of an inline element?
the width and height depends on the content of the element
What is the difference between an ordered list and an unordered list in HTML?
An ordered list will create a numerically ordered list of your items (starting with 1) while an unordered list will use bullet points instead.
Is an HTML list a block element or an inline element?
block element
What HTML tag is used to link to another website?
< a href=”http://www.SampleWebPage.com” > HTML text content here < /a >
What is an absolute URL?
an absolute URL gives all information about a page’s location. For example, www.MyStore.com/products/sales/videogames
What is a relative URL?
A relative URL is a link on your own personal computer domain. Examples would be links to other files or folders that are parents/children/grandparents/etc. of one another
How do you indicate the relative link to a parent directory?
use < a href = ‘’.. / samplePicture.jpg’’ > < / a >
How do you indicate the relative link to a child directory?
use < a href = ‘‘NameOfChildFolder/samplePic.jpg’’ > < / a >
How do you indicate the relative link to a grand parent directory?
use < a href = ‘’.. /.. /samplePicture.jpg’’ > < / a >
How do you indicate the relative link to the same directory?
use < a href = ‘‘samplePicture.jpg’’ > < / a >
What is the purpose of an HTML form element?
it is used to wrap around user input types. Not technically required but we should use it for better engine recognition as well as screen readers
Give five examples of form control elements.
< form > < fieldset > < textarea > < button > < label >
Give three examples of type attributes for HTML < input > elements.
input types include: text, email, password, checkbox, radio and many more
Is an HTML < input > element a block element or an inline element?
inline element
What are the six primary HTML elements for creating tables?
< table >, < tr > , < td > , < thead > , < tbody >
What purpose do the thead and tbody elements serve?
The table head and table foot should contain information about the table’s columns (mainly name) . The table body should contain rows of table data (mainly name if horizontal name labels are needed.)
In CSS, how do you select elements by their class attribute?
by using .classNameHere
In CSS, how do you select elements by their type?
by typing the direct name
What are the names of the individual pieces of a CSS rule?
a CSS rule consists of a selector and a declaration block. inside the block can have properties and values too
In CSS, how do you select an element by its id attribute?
By using #IdNameHere
What CSS properties make up the box model?
content, padding, border, and margin
Which CSS property pushes boxes away from each other?
The margin
Which CSS property add space between a box’s content and its border?
Padding
What is a pseudo-class?
it is a CSS specific class that helps you select nested elements or special elements (such as odd/even) examples include nth-child or hover
What is the default flex-direction of a flex container?
ROW
What is the default flex-wrap of a flex container
no wrap, they will remain on a single line
What is the default value for the position property of HTML elements?
static (normal)
How does setting position: relative on an element affect document flow?
it does not affect it
How does setting position: relative on an element affect where it appears on the page?
actually it does nothing, unless top, left, bottom, or right properties are also included
How does setting position: absolute on an element affect document flow?
it takes the element OUT of the normal document flow, so that it can be repositioned as you please
How does setting position: absolute on an element affect where it appears on the page?
it will appear inside the next closest non static parent ( parents usally set to position relative)
How do you constrain an absolutely positioned element to a containing block?
by setting its parent container’s position to relative
What are the four box offset properties?
top, right, bottom ,left
