HTML & CSS Exercise Questions Flashcards
Where do you put non-visable content about the HTML Document?
In the head element
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?
The head is within the html tag and you can put a title tag inside. The body is before the closing tag of HTML
What is the purpose of a <!DOCTYPE> declaration?
o To declare which type of html you are using
Give five examples of HTML element types.
head, title, P, img, body
What is the purpose of HTML attributes?
To provide additional information about the context of the element and appear near the opening tag of the element
Give an example of an HTML entity (escape character).
© = Copyright symbol
How do block-level elements affect the document flow?
Block level elements would push down to a new line every time a new block element is introduced
How do inline elements affect the document flow?
If it is an inline element it won’t push your text over to the next line like a block element would
What are the default width and height of a block-level element?
The entire horizontal space of its parent element (container), and the vertical space equal to the height of its contents
What are the default width and height of an inline element?
The height of an inline element is the height of the content. Only as much width as necessary
What is the difference between an ordered list and an unordered list in HTML?
Ordered list will have an <ol></ol> tag and unordered list will be <ul></ul>
Is an HTML list a block element or an inline element?
Block element because it moves to a new line on the list
What HTML tag is used to link to another website?
Anchor tag
What is an absolute URL?
Contains the entire address such as the domain name and includes the location within your website in your folder system names within the URL
What is a relative URL?
Are used when linking pages within own website and do not use the full web address ; only the location following the domain
How do you indicate the relative link to a parent directory?
../index.html
How do you indicate the relative link to a child directory?
Childfoldername/nameofchilddocument.html
How do you indicate the relative link to a grand parent directory?
../../index.html to go backwards
How do you indicate the relative link to the same directory?
Just the name of the file
What is the purpose of an HTML form element?
Create a form that can be submitted
Give three examples of type attribute values for HTML <input></input> elements.
o Radio
o Checkbox
o Submit
Is an HTML <input></input> element a block element or an inline element?
Inline
What are the six primary HTML elements for creating tables?
o <table>
o <tr> indicating new row
o <td> each cell is represented with a td
o <th> element that is used to represent the heading for a column or row
o <thead> the heading for the table should sit inside here
o <tbody> the body should sit inside here
What purpose do the thead and tbody elements serve?
To let dictate to the system where the header and body should be
Give two examples of data that would lend itself well to being displayed in a table.
Data involving how to organize student grades and financing??
What are the names of the individual pieces of a CSS rule?
o CSS Selector
o Curly braces for declaration block
o Properties
o Values
In CSS, how do you select elements by their class attribute?
With a period
In CSS, how do you select elements by their tag name?
Just the element tag
In CSS, how do you select an element by its id attribute?
Use the #
Name three different types of values you can use to specify colors in CSS.
o RGB values – expressed in how much red, green, and blue it is made up of
o Hex Codes- six digit codes that represent the amount of red, green, and blue
o Color Names
What CSS properties make up the box model?
Every box has three properties of border, margin, and padding
Which CSS property pushes boxes away from each other?
Margins- sit outside of the edge of a border and you can set the width to create a gap between the borders of two adjacent boxes
Which CSS property add space between a box’s content and its border?
Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents
What is a pseudo-class?
A keyword added to a selector that specifies a special state of the selected element(s) such as :hover :active :focus
What are CSS pseudo-classes useful for?
Useful for whenever the user is inspecting an element and need a visual appearance to change
Table.striped tbody > tr:nth-child(odd)
HOW TO CODE READ:
Tr elements that are nth child odd that are direct child of a tbody that are within a table element of class of striped
What does > do in CSS?
Identifies that you are looking only for a direct child
Name two types of units that can be used to adjust font-sizes in CSS
Pixels and rem. Avoid using percentages here.
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. Can change axis here by using column and not 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?
Because they are block elements
What is the default flex-direction of an element with display: flex?
Row
What are the three primary components of a page layout? (Which helper classes do you need?)
- Container
- Row
- Column
What is the minimum number of columns that you should put in a row?
One
What is the purpose of a container?
Containers allow you to manipulate whatever you want to the div and add margins to divs when needed
What does the transform property do?
Allows you to visually manipulate an element; change the shape, position, and orientation of page elements
Give four examples of CSS transform functions
Rotate, scale, skew, or translate
The transition property is shorthand for which four CSS properties?
Transition-property, transition-duration, transition-timing-function, and transition delay
Give two examples of media features that you can query in an @media ruel
Min-width & height
Which HTML meta tag is used in mobile-responsive web pages?
viewport
What is a breakpoint in responsive web design?
The point at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience. Set a specific pixel width we want our css to kick in
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?
If you set the width as a percentage, it will always keep its pixels at 50% at whatever its container size is.
Using percentages will allow it to move based on screen sizes
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?
In css the later rulesets have priority over the one before it
All @media have the same weight in the cascade so whichever comes last will take priority based on “source order”
