1.1 CSS Layout Concepts Flashcards by Alexandra Velez

Why do developers use normalize css?

It helps your website look consistent across different browsers.

How well did you know this?

Not at all

Perfectly

What is normalize CSS changing within
the user agent stylesheet?

It takes away extra margins, paddings, or CSS properties that create implicit rules.

How well did you know this?

Not at all

Perfectly

Where is normalize css linked to in the HTML document?

Within the head tag, above author css link.

How well did you know this?

Not at all

Perfectly

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 well did you know this?

Not at all

Perfectly

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.

How well did you know this?

Not at all

Perfectly

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 well did you know this?

Not at all

Perfectly

How does importance impact cascading order?

Importance is capable of overriding both source and specificity when it comes to source order.

How well did you know this?

Not at all

Perfectly

What is the syntax to use importance in CSS?

starts with !
uses word importance
closes with semi colon ;

How well did you know this?

Not at all

Perfectly

What does the CSS property Width do?

It controls how wide an element spans the page.

How well did you know this?

Not at all

Perfectly

How do you specify the width?

Width can be specified in units or percentages.

How well did you know this?

Not at all

Perfectly

What is auto, in a CSS margin context?

The browser calculates the margin for you using auto.

How well did you know this?

Not at all

Perfectly

What is a vertical margin collapse?

When items stack, overlap, or lose vertical rhythm
due to a lack of vertical structure.

How well did you know this?

Not at all

Perfectly

How do you prevent vertical collapsing?

Add borders,

Add padding

How well did you know this?

Not at all

Perfectly

Do horizontal margins collapse?

Horizontal margins do not collapse.

Vertical margins can collapse though.

How well did you know this?

Not at all

Perfectly

Between mobile, tablet, and desktop,
which is the simplest to develop?

Mobile is the simplest of the three screen sizes.

How well did you know this?

Not at all

Perfectly

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.

How well did you know this?

Not at all

Perfectly

Between mobile, tablet, and desktop,
which has the most restrictions?

Mobile

It’s the smallest in screen size.

How well did you know this?

Not at all

Perfectly

What is a sticky footer?

Sticky footer stays at the bottom, regardless of page height.

How well did you know this?

Not at all

Perfectly

What is min-height property mean?

It establishes the minimum height of an element.

How well did you know this?

Not at all

Perfectly

What is the calc function?

The cal function lets you define an attribute based on simple math. The math is done for you.

How well did you know this?

Not at all

Perfectly

What values are typically needed for the calc function?

You typically need to specify the starting and end values for the calc function.

How well did you know this?

Not at all

Perfectly

What math symbols does CALC function accept?

+, -, *, /

How well did you know this?

Not at all

Perfectly

What direction does inline go?

Left to right

How well did you know this?

Not at all

Perfectly

What direction does block go in?

Top to bottom

How well did you know this?

Not at all

Perfectly

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 ## Footnote **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: 1. 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.