HTML & CSS Flashcards
What does the following CSS mean?
box-sizing: border-box;
Box sizing decides what type of box model to use.
Border Box will add margin and padding to the width of the box, allowing for less difficulty when formatting pages.
Why should photoshop comps be minimal?
Due to time it takes to create. The site will not look exactly the same as the comp.
What should you do in replace of a photoshop comp?
- Style tile
- Wireframes
- In browser Wireframe
What does a wireframe do?
Works out the flow of your site.
What is a poly field?
It is a javascript file. That forces the browser to recognize features it would usually not naturally support.
Browser Prefix
When a browser tests out a feature. Need to use a specific prefix
- webkit - (chrome, safari, edge)
- moz- (mozilla)
What are the 4 property of floats?
- Comes out of flow
- Needs a width of less than 100%
- Parents do not embrace the floats
- Need to ensure there is enough space
What does Clear do?
Forces the element to ignore the float and go directly under them.
What does Clear Fix do?
Forces the parent to contain the floats.
Create an invisible element that comes after the floats and clears both floats.
What does a reset do?
To override browser defaults since all browsers are different.
What is Modernizr and what does it do?
Is a javascript file. It tests and validates what CSS features work within the browser.
How does Modernizr work?
Depending on how the testing modernizr performs, it creates classes in HTML tag either a property name or a no-js class.
Why is modernizr important?
To create fall backs if JS is not supported or does not work.
Tip. Add a class=no-js to your html tag even before adding modernizer.
How do you make your site accessible?
- Adding an alt tag
- Tab index (when tabbing and it auto focuses)
- Correct input styles
How many h1 tags can you have in your html?
Multiple
How many header and footer tags can you have in your html?
Multiple
How many main tags can you have in your html?
Only one
What does it mean to when Javascript is deprecated?
It is not supported and cannot be used.
What is the <i> </i>
Something that is in a different tone of voice eg language, icon. It is an inline element that is to be styled differently
What is the <b> </b>
Something that is in a different tone. Span
Attribute Selector
div[class]
Used to select all the elements that have the specified attribute and applies the CSS property to that attribute.
What is specificity?
Uses the most specific selector
What is the most specific selector
Inline styles
How do you override an inline style?
Use important !
