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

    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</p> Signup and view all the answers

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

    <p>True</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</p> Signup and view all the answers

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

    <p>False</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.</p> Signup and view all the answers

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

    <p>False</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.</p> Signup and view all the answers

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

    <p>False</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;</p> Signup and view all the answers

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

    <p>True</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</p> Signup and view all the answers

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

    <p>True</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</p> Signup and view all the answers

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

    <p>False</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</p> Signup and view all the answers

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

    <p>False</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</p> Signup and view all the answers

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

    <p>False</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</p> Signup and view all the answers

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

    <p>True</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

    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 Skills Flashcards
    63 questions

    CSS Skills Flashcards

    WieldyJadeite4115 avatar
    WieldyJadeite4115
    CSS Basics Quiz
    25 questions

    CSS Basics Quiz

    LowCostHarpy avatar
    LowCostHarpy
    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