HTML and CSS Flashcards
where do you put non-visible content about the html document?
in the head tags
where do you put visible content about the html document?
in the body tags
Where do the head and body tags go in a valid html document?
in between the HTML tags
what is the purpose of !DOCTYPE declaration
to notify the browser that its an html document and the version its using.
Give 5 examples of the HTML element tags
title, heading meta, link img. body p
What is the purpose of HTML attributes?
The attribute name indicates what kind of extra information you are supplying about the elements content.
Give an example of an HTML entity
copyright ©
How do block level elements affect the document flow?
They start a new line in the browser
How do inline elements affect the document flow?
inline elements continue on the same line as their neighboring elements
What are the default width and height of a block-level element?
A block-level element occupies the entire horizontal space of its parent element and the vertical space equal to the height of its contents, thereby creating a “block” Width is 100% height is auto
What are the default width and height of an inline element
an inline element only takes up as much width as necessary auto width and auto height
What is the difference between an order and unordered list in HTML
Ordered lists are number and unordered lists are bullet points
Is an html list a block element or an inline element
block element
What HTML tag is used to link to another website?
absolute URL
What is an absolute URL`
When you link a URL to a different website it shows the full websites URL in the href value aka the domain name
What is a relative URL
When you link to other pages in the same website.
How do you indicate the relative url to a parent directory?
../
How do you indicate the relative link to a child directory?
Use the child name directory followed by a foward slash the the child name file
How do you indicate the relative link to a grandparent directory?
../../file name
How do you indicate the relative link to the same directory?
Just use the file name.
What is the purpose of an HTML form element?
Forms allow you to collect information from different visitors to your site
Give five examples of form control elements.
textarea, input, select, option, button
give three examples of type atributes for html input elements
text password checkbox
is an html input element a block or an inline element?
inline element
what are the six primary HTML elements for creating tables?
tbody, tr, table, thead, th, tfoot
What purpose do the thead and tbody elements serve?
thead is the head of the table and tbody is the body of the table
Give two examples of data that would lend itself well to being displayed in a table
grades and sports statistics
what are the individual names of pieces of a css rule?
selectors property value declaration block
In CSS, how do you select elements by their class attribute?
with a period followed by the value of the class
In css, how do you select elements by their type?
put them as selectors in a rule set
in css how do you select an element by its ID attribute?
with the #
Name three different types of values you can use to specify colors in CSS
Hexcode, rgb values, colornames
What is a pseudo-class?
Its a keyword added to a selector that specifies a special state of the selected element.
What are css pseudo-classes useful for?
They can change the appearance of elements when a user interacts with them.
Name at least two units of type size in CSS.
Pixels percentages, and ems
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?
they are block elements
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
How doe setting position relative on an element affect document flow?
It flows like a normal page would
How does setting positiong: relative on an element affect where it appears on the page?
It moves it in relation to where it would have been in normal flow
How does setting position: absolute on an element affect document flow?
It is taken out of normal flow and the other elements act like its not there
How do you constrain an absolutely positioned element to a containing block?
put a position thats not static on it.
what are the four box offset properties?
top bottom left right
how does setting position: absolute on an element afffect where it appears on the page?
within the first non static parent element
What are the four main components of “the cascade”
source order, inheritance, specificity, and important
What does the term source order mean with respect to CSS
Source order is, simply put, the order that your css rules are written in your stylesheet
How is it possible for the styles of an element to be applied to its children as well without an additional css rule?
it gets the inherited proeprty from the parent
list three selector types in order of increasing specificity
type selectors, class selectors, ID selectors
why is using !important considered bad practice?
its makes debugging more difficult by breaking the natural cascading in your stylesheets
Give two examples of media features taht you can query in an @media rule
min width and max width
Which HTML meta tag is used in mobile-responsive web page?
viewport meta tag
