HTML Fundamentals
40 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 is the correct structure of a basic HTML document?

  • <html><head></head><body></body></html> (correct)
  • <body><head><html></html></body>
  • <doctype><html></html><title></title>
  • <header><html></header><body></body>

    • What does the DOCTYPE declaration do in HTML?

  • Informs the browser about the HTML version used.
  • Indicates the title of the HTML page.
  • Defines the type of HTML document. (correct)
  • Specifies the character encoding of the HTML page.

    • Which components are part of the CSS box model?

  • Padding, Margin, Width, Height
  • Content, Border, Margin, Text
  • Content, Padding, Border, Margin (correct)
  • Width, Height, Margin, Background

    • What is the correct syntax for adding a comment in HTML?

    <!-- This is a comment --> Signup and view all the answers

    What property is used to create space between the content and the border of an element?

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

    What tag is used to create hyperlinks in HTML?

    <a> Signup and view all the answers

    True or False: The margin property affects the space inside the border of an element.

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

    Which attribute is required in the tag?

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

    What does the meta charset='UTF-8' tag do in HTML?

    <p>Specifies the text encoding used by the browser.</p> Signup and view all the answers

    Which property controls the width of an element's border?

    <p>border-width</p> Signup and view all the answers

    What property is used to create rounded corners on elements?

    <p>border-radius</p> Signup and view all the answers

    Which element is used for the largest heading?

    <h1> Signup and view all the answers

    Which HTML element represents a section of navigation links?

    <nav> Signup and view all the answers

    What is the purpose of the flex-wrap property in CSS?

    <p>To specify how elements should wrap in a flex container</p> Signup and view all the answers

    Which property makes an element position relative to its nearest positioned ancestor?

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

    Which of the following describes the margin property in CSS?

    <p>Space outside the border of an element</p> Signup and view all the answers

    What is the correct syntax for applying a class selector in CSS?

    <p>.classname { }</p> Signup and view all the answers

    How does inline CSS compare in specificity to external or internal styles?

    <p>Inline CSS has higher specificity.</p> Signup and view all the answers

    What is the default display value of a

    element in CSS?

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

    Which selector correctly targets all

    elements that are descendants of a

    element?

    <p>div p { }</p> Signup and view all the answers

    What will the CSS rule 'div+p { }' achieve?

    <p>Styles for all <p> elements immediately after a <div> element.</p> Signup and view all the answers

    Which of the following will NOT apply any styles to

    elements nested within a

    element?

    <p>p div { }</p> Signup and view all the answers

    In terms of CSS box model, which of the following is NOT considered a component?

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

    Which of the following statements regarding CSS styling is true?

    <p>An inline CSS rule has the highest specificity.</p> Signup and view all the answers

    What property sets the text color in CSS?

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

    Which CSS property ensures an image adjusts to its container size while maintaining aspect ratio?

    <p>max-width</p> Signup and view all the answers

    Which of the following has the highest specificity in CSS?

    <p>inline styles</p> Signup and view all the answers

    What is the main purpose of the CSS Flexbox layout model?

    <p>To provide a one-dimensional layout for arranging items in rows or columns.</p> Signup and view all the answers

    Which of the following is true regarding CSS specificity?

    <p>Inline styles have the highest specificity.</p> Signup and view all the answers

    In CSS, how are conflicting styles resolved?

    <p>By the specificity of the selectors.</p> Signup and view all the answers

    How does an ID selector compare to a class selector in terms of specificity?

    <p>ID selectors have a higher specificity.</p> Signup and view all the answers

    Which property would best center align text within an element in CSS?

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

    What CSS property is used to define the spacing between flex items in a flex container?

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

    Which property is utilized to align flex items vertically within a flex container?

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

    Which statement about Flexbox is true?

    <p>Flexbox supports arranging items in both rows and columns.</p> Signup and view all the answers

    What is the main purpose of the CSS Grid layout model?

    <p>To create two-dimensional layouts with rows and columns.</p> Signup and view all the answers

    What CSS property specifies the number of columns in a grid container?

    <p>grid-template-columns</p> Signup and view all the answers

    Which CSS property is responsible for creating smooth transitions between styles?

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

    Which of the following statements about CSS animations is correct?

    <p>CSS animations allow keyframe-based animations.</p> Signup and view all the answers

    What is the effect of using the 'gap' property within a flex container?

    <p>It sets both row and column gaps between flex items.</p> Signup and view all the answers

    Study Notes

    HTML Fundamentals

    • The basic structure of an HTML document starts with the <html> element, which contains both the <head> and <body> elements.
    • The <head> section includes metadata, links to external stylesheets, and scripts, while the <body> section holds the visible content of the webpage.
    • The <!DOCTYPE> declaration informs the browser which HTML version the document is using to ensure proper rendering of content.
    • HTML comments are written inside <!-- comment text --> and are not displayed by the browser.
    • The <a> tag (anchor tag) is used to create hyperlinks in HTML. The href attribute specifies the destination URL.
    • The src (source) attribute is required in the <img> tag and defines the location of the image file to be displayed on the webpage.
    • The <meta charset="UTF-8"> tag specifies the character encoding for the webpage, enabling support for a variety of characters from different languages and symbols.
    • The <h1> tag represents the top-level heading in HTML and is the most prominent heading, often used for the main title or heading of a webpage. Headings from <h2> to <h6> decrease in size and importance.
    • The <nav> element is used to define a section of the webpage that contains navigation links, such as a menu or links to different sections of the site.

    CSS Basics

    • CSS (Cascading Style Sheets) is used to control the presentation and style of HTML documents.
    • Internal CSS is placed within the <style> tag inside the <head> of an HTML document.
    • External CSS is stored in a separate file with a .css extension and linked to an HTML document using the <link> tag.
    • Inline CSS applies styles directly on an HTML element using the style attribute.
    • The color property sets the text color.
    • The font-weight property sets the weight of the font, where bold makes the text bold.
    • The text-align property sets the horizontal alignment of the text.
    • Inline CSS has higher specificity than external or internal styles. This means that if there is a conflict, inline styles will take precedence.
    • The correct syntax for applying a class selector in CSS is to prefix the class name with a period (.), indicating that the styles should be applied to all elements with that class.

    CSS Box Model

    • The CSS box model consists of four components:
      • Content: The actual content of the box (text, images, etc.).
      • Padding: The space between the content and the border, which creates an inner space.
      • Border: The edge around the padding (if any) and content, defining the box's outer edge.
      • Margin: The space outside the border that separates the box from other elements.
    • The padding property in CSS is used to create space between the content of an element and its border.
    • The margin property affects the space outside the border of an element, separating it from other elements.
    • The border-width property specifies the width (thickness) of the border around an element.
    • The border-radius property is used to create rounded corners on elements.

    CSS Positioning

    • The position property controls the positioning of an element.
    • The static positioning is the default, where elements flow normally in the document.
    • The relative positioning allows elements to be positioned relative to their normal position in the document flow.
    • The absolute positioning removes elements from the normal document flow and positions them relative to the nearest positioned ancestor.
    • The fixed positioning removes elements from the normal document flow and positions them relative to the browser window.

    CSS Specificity and Inheritance

    • CSS specificity determines which CSS rules are applied to an element when multiple rules could apply.
    • Inline styles have the highest specificity, followed by IDs, classes, attributes, and then elements.
    • Styles defined with an ID selector have a higher specificity than styles defined with a class selector.

    CSS Flexbox and Grid

    • Flexbox is designed to handle layout in one dimension, either horizontally (rows) or vertically (columns), making it easier to distribute space and align items within a container.
    • The gap property (previously known as grid-gap in CSS Grid) defines the spacing between flex items.
    • The align-items property aligns flex items vertically within the flex container according to the specified alignment.
    • Flexbox is a one-dimensional layout model that allows items to be arranged in either a row or a column.
    • The CSS Grid layout model allows for the creation of complex layouts in two dimensions, enabling designers to define both rows and columns within a container.
    • The grid-template-columns property specifies the number of columns and their widths in a grid container.

    CSS Animations and Transitions

    • The transition property allows for smooth changes from one style to another over a specified duration.
    • CSS animations allow developers to create keyframe-based animations.
    • Keyframes define the different stages of an animation, allowing for smooth movement and changes over time.

    Studying That Suits You

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

    Quiz Team

    Related Documents

    REVIEWER 2.pdf

    Description

    Test your knowledge on the fundamental concepts of HTML, including its structure, key elements, and essential attributes. This quiz covers topics such as the role of the <head> and <body> sections, the importance of the DOCTYPE declaration, and how to create links and images. Perfect for beginners learning web development!

    More Like This

    Front-End Development Basics Quiz
    5 questions

    Front-End Development Basics Quiz

    ClearGoshenite avatar
    ClearGoshenite
    React JS Basics Quiz
    3 questions

    React JS Basics Quiz

    UnfetteredFlugelhorn avatar
    UnfetteredFlugelhorn
    React Introduction and Basics
    5 questions

    React Introduction and Basics

    AffluentAlbuquerque avatar
    AffluentAlbuquerque
    Frontend Development: HTML, CSS, JavaScript Basics
    30 questions

    Frontend Development: HTML, CSS, JavaScript Basics

    FunTranscendental avatar
    FunTranscendental
    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser