CSS Lists and Tables Quiz
43 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What property is used to remove double borders from a table?

  • border-style
  • border-collapse (correct)
  • border-spacing
  • border-radius

The 'nth-child' selector can be used to create zebra-striped tables.

True (A)

What is the purpose of the aria-label attribute in forms?

To provide an invisible label for screen readers.

The CSS property used to define the background color for even table rows is _____.

<p>background-color</p> Signup and view all the answers

Match the following CSS properties with their functions:

<p>border-collapse = Removes double borders between table cells border-radius = Rounds the corners of an element outline = Controls the outline appearance of an element padding = Defines space between the content and the border of an element</p> Signup and view all the answers

What styling does the following CSS apply when the input field is focused? 'input[type=text]:focus { border: 2px solid #999; }'

<p>Changes the border color (A)</p> Signup and view all the answers

CSS can be used to style form inputs to enhance their appearance and usability.

<p>True (A)</p> Signup and view all the answers

What is the recommended font family used in the body style in the provided CSS?

<p>Arial, sans-serif</p> Signup and view all the answers

What is the default value of the position property for elements in normal flow?

<p>static (C)</p> Signup and view all the answers

Relative positioning removes an element from the normal flow of the document.

<p>False (B)</p> Signup and view all the answers

What CSS property is used to make an element float over others?

<p>position</p> Signup and view all the answers

When an element is positioned absolutely, it is taken out from the __________ flow.

<p>normal</p> Signup and view all the answers

Match the CSS positioning types with their descriptions:

<p>Static = Elements are positioned in the normal document flow. Relative = Elements are moved in relation to their normal position. Absolute = Elements are removed from the document flow. Fixed = Elements stay in a fixed position relative to the viewport.</p> Signup and view all the answers

What happens when the position property is set to absolute?

<p>The element is positioned relative to the nearest ancestor. (C)</p> Signup and view all the answers

Block-level elements in normal flow appear side by side by default.

<p>False (B)</p> Signup and view all the answers

What CSS declaration is used to position an element relative to its normal position?

<p>position: relative;</p> Signup and view all the answers

What does the 'transform: translate(-50%, -50%)' declaration do?

<p>It moves the element to the center by adjusting its position. (C)</p> Signup and view all the answers

An element with fixed positioning is relative to the body of the document.

<p>False (B)</p> Signup and view all the answers

What unit can be used to position elements relative to the size of their containing element?

<p>percentage</p> Signup and view all the answers

The box positioned with 'top: 100%' and 'left: 100%' will be placed at the __________ of the containing element.

<p>bottom right corner</p> Signup and view all the answers

Which property must be set on the container for an absolute positioned child to be positioned relative to it?

<p>position: relative; (B)</p> Signup and view all the answers

Using fixed positioning prevents an element from scrolling with the page.

<p>True (A)</p> Signup and view all the answers

How can you position an element at the center of its containing element?

<p>Use 'top: 50%', 'left: 50%', and 'transform: translate(-50%, -50%)'.</p> Signup and view all the answers

Which value is NOT accepted by the align-content property?

<p>justify-center (B)</p> Signup and view all the answers

The order property can change the visual order of flex items in the container.

<p>True (A)</p> Signup and view all the answers

What CSS property is used to create space between flex items?

<p>gap</p> Signup and view all the answers

The property used to override the align-items alignment for individual flex items is called _____ .

<p>align-self</p> Signup and view all the answers

Match the following properties with their descriptions:

<p>flex-start = Items pack toward the start of the flex container space-around = Items are evenly distributed with space around them align-self = Overrides default alignment for individual items gap = Controls the spacing between flex items</p> Signup and view all the answers

What property determines the stacking order of positioned elements?

<p>z-index (B)</p> Signup and view all the answers

The z-index property can only be applied to elements with a static position.

<p>False (B)</p> Signup and view all the answers

What does the flex-direction property do in flexbox?

<p>It determines the direction in which flex items are placed.</p> Signup and view all the answers

In flexbox, the axis that runs perpendicular to the main axis is called the ______.

<p>cross axis</p> Signup and view all the answers

Match the CSS classes with their properties:

<p>.box1 = z-index: 1 .box2 = z-index: 3 .box3 = background-color: red .box4 = z-index: 2</p> Signup and view all the answers

Which of the following best describes the primary function of flexbox?

<p>Arranging and aligning items in a container (A)</p> Signup and view all the answers

Only three values are available for the flex-direction property.

<p>False (B)</p> Signup and view all the answers

What is the background color of .box3?

<p>red</p> Signup and view all the answers

What CSS property controls how much a flex item should shrink when there isn't enough space?

<p>flex-shrink (C)</p> Signup and view all the answers

The default value of the flex-flow property is row wrap.

<p>False (B)</p> Signup and view all the answers

In the flexbox model, which property would you use to align items along the main axis?

<p>justify-content</p> Signup and view all the answers

The flex property combines flex-grow, flex-shrink, and _____ properties into a shorthand.

<p>flex-basis</p> Signup and view all the answers

What value of flex-shrink would result in an item shrinking less than others when the space is limited?

<p>0 (A)</p> Signup and view all the answers

The flex-wrap property allows items to be placed on multiple lines.

<p>True (A)</p> Signup and view all the answers

What CSS property would you use to arrange items in a column?

<p>flex-direction</p> Signup and view all the answers

Flashcards

Border Collapse

Combining multiple borders of HTML table elements into a single border.

Zebra-striped table

Alternating background colors in HTML table rows with CSS for better readability.

Accessibility in HTML forms

Using ARIA labels along with placeholders for text inputs to provide support to visually impaired users.

Text input styling

Customization of HTML text input elements with CSS for enhanced user experience.

Signup and view all the flashcards

Form accessibility

Ensuring forms are usable by all users, including those with disabilities.

Signup and view all the flashcards

Border Styling (Tables)

Applying border styles to HTML table elements (table, th, td), including collapsing borders using border-collapse.

Signup and view all the flashcards

Table Width

Setting the width of a table in CSS using width: 100%;.

Signup and view all the flashcards

Input Padding

CSS property used to add space between the content and the border of an input.

Signup and view all the flashcards

Containing element

An element that holds other elements within a webpage structure.

Signup and view all the flashcards

Normal flow

Default webpage layout where elements arrange vertically.

Signup and view all the flashcards

position: static

Default positioning, elements arranged in normal flow.

Signup and view all the flashcards

Relative positioning

Positioning elements based on their previous normal flow position.

Signup and view all the flashcards

position: relative

Allows adjustment of element position relative to its original spot in normal flow.

Signup and view all the flashcards

Absolute positioning

Removes element from normal flow and positions it relative to a specified ancestor.

Signup and view all the flashcards

Offset properties (top, right, bottom, left)

Used with absolute positioning to place an element within its containing element.

Signup and view all the flashcards

Block-level elements

Elements that occupy full width of their container and stack vertically.

Signup and view all the flashcards

Align Items

The align-items property controls how flex items are aligned within the flex container along the cross-axis.

Signup and view all the flashcards

Align Content

The align-content property controls how multiple flex lines are aligned within the flex container when there is extra space in the cross-axis.

Signup and view all the flashcards

Align Self

The align-self property allows individual flex items to override the align-items alignment within the flex container.

Signup and view all the flashcards

Gap Property

The gap property controls the space between flex items. It applies spacing only between items, not on the outer edges.

Signup and view all the flashcards

Order Property

The order property controls the order in which flex items appear in the flex container.

Signup and view all the flashcards

Z-index

A CSS property used to control the stacking order of elements. Higher z-index values appear on top of elements with lower values.

Signup and view all the flashcards

Flexbox

A powerful CSS layout module that allows you to arrange, align, and distribute space among items within a container.

Signup and view all the flashcards

Flex Container

The parent element in flexbox where flex items are placed.

Signup and view all the flashcards

Flex Item

The child element within a flex container that is subject to flexbox properties.

Signup and view all the flashcards

Main Axis

The axis along which flex items are placed in a flexbox layout, determined by the flex-direction property.

Signup and view all the flashcards

Cross Axis

The axis perpendicular to the main axis in a flexbox layout, running across the flex items.

Signup and view all the flashcards

Flex-direction: row

The default value for flex-direction, placing flex items horizontally in a row.

Signup and view all the flashcards

Flex-direction: column

Arranges flex items vertically, stacking them one below the other.

Signup and view all the flashcards

Position: Absolute

An element with position: absolute; is taken out of the normal document flow and positioned relative to its closest ancestor with a position: relative; property. If no such ancestor exists, it's positioned relative to the root element (usually the <html> tag).

Signup and view all the flashcards

What's the difference between position: relative and position: absolute?

position: relative positions an element relative to its normal flow position. position: absolute removes an element from the normal flow and positions it relative to its closest position: relative ancestor, or the root element if there isn't any.

Signup and view all the flashcards

Positioning with %

You can position elements using percentage values. top: 100% or left: 50% positions an element based on the width or height of its parent element.

Signup and view all the flashcards

Centering with transform: translate

To perfectly center an element with position: absolute, use transform: translate(-50%, -50%);. This shifts the element's top and left by 50% of its own size.

Signup and view all the flashcards

Position: Fixed

An element with position: fixed; is positioned relative to the browser window (viewport). It will stay in place even when the page is scrolled.

Signup and view all the flashcards

Viewport

The viewport is the visible area of a web page in a browser window. Changes in window size affect the viewport dimensions.

Signup and view all the flashcards

Offset Properties

Offset properties like top, right, bottom, and left are used with position: absolute and position: fixed to precisely control the element's position.

Signup and view all the flashcards

Flex-shrink Property

The flex-shrink property controls how much a flex item shrinks when the flex container is too small to fit all flex items. It takes a unitless value representing a proportion.

Signup and view all the flashcards

Flex-flow Shorthand

The flex-flow property is a shorthand for combining flex-direction and flex-wrap properties. It offers a concise way to control the layout direction and wrapping behavior.

Signup and view all the flashcards

Align Items Property

The align-items property aligns flex items within the flex container along the cross axis (perpendicular to the main axis).

Signup and view all the flashcards

Justify Content Property

The justify-content property aligns flex items within the flex container along the main axis (the primary layout direction).

Signup and view all the flashcards

Space-Between Property

The space-between value for justify-content distributes available space evenly between the flex items, placing them at the start and end of the container.

Signup and view all the flashcards

Space-Around Property

The space-around value for justify-content distributes space evenly around all flex items, placing them at the start, end, and between.

Signup and view all the flashcards

Space-Evenly Property

The space-evenly value for justify-content distributes space evenly between all flex items, including at the edges.

Signup and view all the flashcards

Align-Content Property

The align-content property aligns multiple lines of flex items within the flex container when there is extra space in the cross axis.

Signup and view all the flashcards

Study Notes

Lists, Tables, and Forms

  • CSS properties are designed for HTML elements like lists, tables, and forms.
  • list-style-type property controls the marker (e.g., disc, circle, square) in ordered (<ol>) or unordered (<ul>) lists.

List Styles

  • list-style-type: none; removes markers.

  • list-style-type: disc; uses disc markers (unordered lists).

  • list-style-type: circle; uses circle markers (unordered lists).

  • list-style-type: square; uses square markers (unordered lists).

  • list-style-type: decimal; uses numbers for ordered lists (e.g., 1. Item).

  • list-style-type: decimal-leading-zero; uses numbers with leading zeroes for ordered lists (e.g., 01. Item).

  • list-style-type: lower-alpha; uses lowercase letters (e.g., a. Item).

  • list-style-type: upper-alpha; uses uppercase letters (e.g., A. Item).

  • list-style-type: lower-roman; uses lowercase roman numerals (e.g., i. Item).

  • list-style-type: upper-roman; uses uppercase roman numerals (e.g., I. Item).

  • You can use Unicode escape sequences (e.g., \1F44D) to include special characters like emojis in CSS.

  • list-style-image property lets you specify an image as a bullet point.

Styling Tables

  • border-collapse: collapse; combines table cell borders into one border.

  • Add border: 1px solid black; to a table, <th>, or <td> to add borders around the table and cells.

  • You can also use width: 100% and font-family for better formatting.

Styling Forms

  • Using placeholder text instead of a label.
  • Make forms accessible using aria-label for screen readers

Styling Buttons

  • Use linear-gradient for background styling.
  • Use box-shadow for shadow effects, such as box-shadow: 0 0 20px #eee;.
  • border-radius creates curved corners.
  • Avoid default borders (border: none;), and adjust background-position for smooth hover effects, such as background-position: right;.

Styling Textareas

  • Use to disable spellchecking
  • Use min-height to avoid re-sizing the text area.

Styling Dropdowns

  • Customizing select elements is done using CSS to style appearance and placeholder.
  • padding, border, border-radius, and background-color can affect visual appearance
  • Use cursor: pointer; for a pointer cursor (this is often explained in next pages/sections)

Positioning and Layouts

  • Normal flow: elements stack vertically. Use position: static
  • Relative positioning: elements remain in their normal flow position, but can be adjusted from there using top, right, bottom, left.
  • Absolute positioning: elements are remove from the normal flow, allowing elements to overlap and be positioned in relation to their nearest ancestor element that uses relative or absolute positioning.
  • Fixed positioning: elements stay in a fixed position on the page, even when scrolling.
  • Sticky positioning: elements behave like relative, but once a specified scroll threshold is reached, they "stick" like a fixed element (useful for navigation).
  • Flexbox layouts: control alignment, distribute space, and arrange items in rows or columns
    • flex-direction: controls the direction of the main axis (row, column, row-reverse, column-reverse)
  • flex-wrap: determines how items wrap (e.g., wrap, nowrap)
  • flex-basis: sets the initial size of a flex item
  • flex-grow: dictates how items expand when available space is present
  • flex-shrink: dictates how items shrink when the required space is not present
  • Flex shorthands: flex-flow (combines flex-direction and flex-wrap)
  • Aligning flex items: justify-content (horizontal alignment), align-items (vertical alignment)`

Overlapping Elements

  • z-index: controls the stacking order of overlapping elements (higher values appear on top).

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

Web Development Book (26) PDF

Description

Test your knowledge on CSS properties related to lists, tables, and forms. This quiz covers various list styles and their effects on HTML elements. Challenge yourself to recall the different values for the list-style-type property and their usages.

More Like This

CSS Basics and Selectors Quiz
12 questions

CSS Basics and Selectors Quiz

UnparalleledEcoArt avatar
UnparalleledEcoArt
CSS Skills Flashcards
63 questions

CSS Skills Flashcards

WieldyJadeite4115 avatar
WieldyJadeite4115
CS 102 CSS Practice Test
25 questions

CS 102 CSS Practice Test

WellBacklitJasmine avatar
WellBacklitJasmine
CSS Ids and Classes Flashcards
17 questions

CSS Ids and Classes Flashcards

SalutaryPentagon avatar
SalutaryPentagon
Use Quizgecko on...
Browser
Open
Browser
Browser