1.1 CSS Layout Concepts Flashcards
Why do developers use normalize css?
It helps your website look consistent across different browsers.
What is normalize CSS changing within
the user agent stylesheet?
It takes away extra margins, paddings, or CSS properties that create implicit rules.
Where is normalize css linked to in the HTML document?
Within the head tag, above author css link.
Why is normalize css document
placed above the developer css file?
The cascading order states that what comes last in CSS,
comes first in actual styling of an element.
How does source order impact the cascade?
When two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.
What is specificity within cascading order?
Specificity refers to the degree to which rules
are defined in the style.
The more specific, the more it
overrides other style instructions.
How does importance impact cascading order?
Importance is capable of overriding both source and specificity when it comes to source order.
What is the syntax to use importance in CSS?
starts with !
uses word importance
closes with semi colon ;
What does the CSS property Width do?
It controls how wide an element spans the page.
How do you specify the width?
Width can be specified in units or percentages.
What is auto, in a CSS margin context?
The browser calculates the margin for you using auto.
What is a vertical margin collapse?
When items stack, overlap, or lose vertical rhythm
due to a lack of vertical structure.
How do you prevent vertical collapsing?
Add borders,
Add padding
Do horizontal margins collapse?
No
Horizontal margins do not collapse.
Vertical margins can collapse though.
Between mobile, tablet, and desktop,
which is the simplest to develop?
Mobile is the simplest of the three screen sizes.
Do tablet and desktop inherit styling from mobile?
Yes.
What you style in the mobile version can be passed on to other screen sizes to avoid repetition where relevant.
Between mobile, tablet, and desktop,
which has the most restrictions?
Mobile
It’s the smallest in screen size.
What is a sticky footer?
Sticky footer stays at the bottom, regardless of page height.
What is min-height property mean?
It establishes the minimum height of an element.
What is the calc function?
The cal function lets you define an attribute based on simple math. The math is done for you.
What values are typically needed for the calc function?
You typically need to specify the starting and end values for the calc function.
What math symbols does CALC function accept?
+, -, *, /
What direction does inline go?
Left to right
What direction does block go in?
Top to bottom
True or False, do block elements take up the full width of the page?
True
Yes, block elements can take the full width of the space.
Can inline elements stack upon each other? True or false
True
Inline elements appear on the same line as each other.
How does inline-block, apply spacing within CSS layout?
inline-block respects both height and width dimensions
Does inline-block let you specify both headings and paddings?
Yes
You can specify both margins and paddings with inline-block.
Does block start a new line?
Yes, block starts a new line in the layout.
How much width does inline take in CSS layout?
As much as needed, no more and no less.
What does the float property do in CSS layouts?
Floats wrap content around elements.
What is the problem typically seen with floats?
Floats can vertically collapse because their parent element collapses too.
When floats cause a collapse, how do you fix it?
clear:both can be used to fix floats
that have lost vertical rhythm.
When floating images, do they need space modifications?
Yes
Margins and paddings help images look better
when the float property is applied to it.
What does clearfix do?
It clears left and right floats.
How do you recognize a pseudo element?
Pseudo elements generally are seen
in CSS by using two colons
::
Clear Floats begins with which type of punctuation?
.
What are the two keywords joined by
:: that start the clear float CSS?
What does the content do within the clear float CSS?
It creates an empty virtual element.
What’s the content CSS to clearfloat?
What does display table mean within the CSS clearfix?
The display table displays a
block element, that’s invisible
What does the clear both do within the clearfix?
Clear helps control the behavior of floats
Both: clears both sides of the container
What’s the CSS for the clear both declaration?
How do you create a column in HTML?
Surround the HTML with a class to group the content
What percentages help create 2 and 3 column layouts in CSS?
2 columns: 50%
3 columns: 33%
What percentage do all columns need to add up to?
100%
Any combination of percentages that add up to 100%
Do columns need additional spacing?
Yes, typically they need space between columns to look right.
What is the unit em?
em is a relative unit of measurement for
establishing proportional sizes
When you float columns, footers can come up from their position. How do you prevent footer movement with floated columns?
Use clearfix
What does the position CSS property do?
It helps establish element position in terms of left, right, top, bottom within a document.
In terms of static positioning, what direction do elements move in?
They move in main directions (top, bottom, left, right).
What is different about absolute positioning?
Absolute positions are unmoveable
compared to other elements
What do absolute positions rely upon for placement?
Offset positions determine where
absolute positions appear on the screen.
Absolute and relative positioning work hand in hand
True or false
True
Absolute and relative positioning depend on each other.
Can you control an absolute positioned
item through relative positioning?
An element with relative positioning gives you the control to absolutely position elements anywhere inside it.
What is the source of absolute positioned items?
An element with absolute positioning is always
relative to the first parent that has a relative position.
What happens if the relative position
is missing for an absolute positioned item?
If no parent element has a relative position, the browser
viewport is the positioning context by default.
What is the relative position in CSS?
Is it normal? What direction?
The element is positioned according to the normal flow of the document,
and then offset relative to itself based on the values of top, right, bottom, and left.
What is fixed position?
Fixed position is like absolute position
Stay fixed to one spot on page
Sticky, remains static
What is Z axis?
Z axis is like layers, impacting overlap and depth.
What is the logic behind z index numbering?
The highest number appears at the top.
The lower numbers appear below in order.
What is a figcaption?
It’s a caption for an element.
Figcaption represents a caption or legend describing
the rest of the contents of its parent figure element.
How do you create a fig caption in 2 steps?
What’s step 1?
Two steps:
- Create a figcaption element, with position of absolute
How do you create a figcaption element? Step 2?
Step 1 was to create a figcaption element, with position of absolute
Step 2
Use the parent element for relative positioning context
What’s the basis for an REM size?
It’s based exclusively off of the html font;
it scales consistently and predictably.
