CSS Fundamentals for Grade 7

What is a CSS selector?

• A CSS selector is a programming language.

• A CSS selector is a pattern used to select and style HTML elements.

• A CSS selector is a tool for debugging HTML.

• A CSS selector is a type of HTML element.

Name three types of CSS selectors.

• Pseudo-class selector

• Media query selector

• Class selector, ID selector, Element selector

• Attribute selector

What property is used to change the font size in CSS?

• font-style

• text-size

• font-weight

• font-size

How do you make text bold using CSS?

• Use CSS: text-decoration: bold;

• Use CSS: font-size: bold;

• Use CSS: font-style: bold;

• Use CSS: font-weight: bold;

What is the purpose of the div tag in HTML?

• The div tag is used to define a table structure.

• The div tag is for embedding images.

• The div tag is used to group and style HTML elements.

• The div tag is used to create hyperlinks.

How can you center a div element on a page?

• Apply a negative margin equal to half the width of the div.

• Use float: left and set a fixed width for the div.

• Use CSS: width, margin: auto, and display: block or flex.

• Set the div's position to absolute and use top: 50%; left: 50%;

What is a CSS animation?

• CSS animations are only used for text effects.

• CSS animations are a way to create smooth transitions between different styles using keyframes.

• CSS animations require JavaScript to function.

• CSS animations can only be applied to images.

How do you create a simple fade-in effect using CSS?

• Use CSS: .fade-in { opacity: 1; transition: opacity 2s; }

• Use JavaScript: document.getElementById('element').style.opacity = 0;

• Use CSS: .fade-in { display: none; }

• Use CSS: .fade-in { opacity: 0; transition: opacity 1s; } .fade-in.visible { opacity: 1; }

What property is used to change the background color of an element?

• background-style

• background-color

• color-background

• bg-color

How do you create a transition effect in CSS?

• Use the 'transition' property in CSS, e.g., 'transition: property duration timing-function;'

• Set the 'display' property to 'none' for transition effects.

• Use the 'animation' property instead of 'transition'.

• Apply the 'fade' class to the element for transitions.