Library

No glossary terms available for this book.

No discussion questions available for this book.

Chapter 1: Introduction

What is CSS primarily used for?

Describing the presentation of a document written in HTML or XML
Defining the structure of a web page
Managing server-side logic
Handling database queries

Which of the following is NOT a way to add CSS to an HTML document?

Internal CSS
External CSS
Inline CSS
Inline JavaScript

What does the 'p' selector target in CSS?

All div elements
All paragraph elements
All span elements
All heading elements

What does the 'class' selector target in CSS?

Elements with a specific class attribute
Elements with a specific ID attribute
All paragraph elements
All heading elements

What does the 'id' selector target in CSS?

All elements with a specific class attribute
All heading elements
All paragraph elements
A single element with a specific ID attribute

What does the 'a:hover' selector target in CSS?

All heading elements
A link when it is clicked
A link when it is hovered over
All paragraph elements

What does the 'p::first-line' selector target in CSS?

The first line of a paragraph
The last line of a paragraph
All paragraph elements
All heading elements

What is the default value of the 'box-sizing' property?

border-box
margin-box
content-box
padding-box

Which layout technique allows you to design complex applications quickly and efficiently?

Floats
Flexbox
Grid
Positioning

What is the 'grid-template-columns' property used for in CSS Grid Layout?

Defines the gap between grid items
Defines a named grid area
Defines the number and size of rows
Defines the number and size of columns

What does the 'text-align' property control in CSS?

The horizontal alignment of text
The vertical alignment of text
The size of the text
The color of the text

Which of the following is NOT a valid color format in CSS?

CMYK
RGB
HSL
Hexadecimal

What does the 'background' shorthand property set in CSS?

Only the background image
Only the background position
Only the background color
All background properties in one declaration

What does the 'border-radius' property do in CSS?

Sets the color of the border
Adds a shadow effect around an element
Sets the width of the border
Adds rounded corners to an element's border

What is the 'transition' property used for in CSS?

Creating keyframe animations
Smoothly changing property values over a given duration
Setting the background color
Defining the font size

What does the '@keyframes' rule do in CSS?

Sets the background color
Creates animations by defining keyframes
Defines the font size
Creates transitions

What is a media query primarily used for in responsive design?

Defining the font size
Creating animations
Setting the background color
Applying different styles based on device characteristics

What do viewport units like 'vw' and 'vh' represent?

A percentage of the viewport size
A fixed size in pixels
A percentage of the screen resolution
A fixed size in points

What is the purpose of the 'max-width: 100%' property for images in responsive design?

Prevents images from overflowing their container
Adds a border to images
Centers images horizontally
Makes images larger

What is the primary goal of responsive design?

Creating animations
Defining the font size
Setting the background color
Creating websites that provide an optimal viewing experience across different devices

Chapter 2: Selectors

Which selector targets HTML elements based on their tag name?

Element Selectors
Class Selectors
Attribute Selectors
ID Selectors

What symbol is used to denote a class selector in CSS?

Period (.)
Asterisk (*)
Hash (#)
Dollar Sign ($)

Which selector targets a single element with a specific id attribute?

ID Selectors
Class Selectors
Attribute Selectors
Element Selectors

What is the correct syntax for a pseudo-class selector that targets a link when it is hovered over?

a:active
a:visited
a:link
a:hover

Which combinator targets all elements that are direct children of a specified element?

Child Combinator
General Sibling Combinator
Descendant Combinator
Adjacent Sibling Combinator

What is the purpose of the box-sizing property in CSS?

Sets the background color of an element
Specifies the font size of an element
Defines how the total width and height of an element are calculated
Controls the layout of elements on a web page

Which layout technique allows you to create flexible and responsive layouts without using float or positioning?

Positioning
Grid
Floats
Flexbox

What is the purpose of the text-align property in CSS?

Sets the horizontal alignment of text
Sets the vertical alignment of text
Sets the color of text
Sets the font size of text

Which color format includes an alpha channel for transparency?

HSL
RGBA
RGB
Hexadecimal

What is the purpose of the background shorthand property in CSS?

Sets the background position of an element
Sets the background color of an element
Sets the background image of an element
Sets all background properties in one declaration

Chapter 3: Box Model

What is the space between the content area and the border in the CSS Box Model called?

Content
Margin
Border
Padding

Which property is used to set the space outside the border in the CSS Box Model?

padding
content
margin
border

What is the default value of the box-sizing property?

padding-box
content-box
border-box
margin-box

Which of the following is NOT a part of the CSS Box Model?

Margin
Padding
Content
Background

Which property is used to set the width of the border in the CSS Box Model?

border-length
border-width
border-size
border-thickness

What does the box-sizing: border-box value do?

It only applies to the content area.
It excludes the padding and border from the element's total width and height.
It includes the padding and border in the element's total width and height.
It sets the element's width and height to 100%.

Which shorthand property can be used to set all four sides of the padding at once?

padding
margin
border
content

What is the purpose of the margin property in the CSS Box Model?

To set the background color of the element.
To separate the element from other elements and the edges of the viewport.
To define the style of the border.
To control the width and height of the content area.

Which property is used to set the style of the border in the CSS Box Model?

border-type
border-design
border-pattern
border-style

What is the space outside the border in the CSS Box Model called?

Margin
Content
Border
Padding

Chapter 4: Layout Techniques

What is the default behavior of HTML elements in a web page?

Positioning
Normal Flow
Grid
Flexbox

Which of the following is NOT a key feature of Flexbox?

Grid Container
Flex Direction
Flex Container
Justify Content

What does the 'justify-content' property in Flexbox control?

Aligns flex items along the main axis
Aligns flex items along the cross axis
Defines the direction of the flex items
Specifies whether the flex items should wrap onto multiple lines

Which CSS property is used to define the number and size of columns in a Grid layout?

Flex Direction
Justify Content
Grid Template Columns
Grid Gap

What does the 'position: absolute;' rule do?

Positions an element relative to its normal position
Positions an element relative to its nearest positioned ancestor (or the initial containing block)
Positions an element relative to the browser window
Positions an element in the normal flow of the document

Which of the following is NOT a value for the 'float' property?

none
center
left
right

What is the purpose of the 'flex-wrap' property in Flexbox?

Defines the direction of the flex items
Aligns flex items along the cross axis
Specifies whether the flex items should wrap onto multiple lines
Aligns flex items along the main axis

Which layout technique is generally recommended for complex layouts instead of using floats?

Floats
Normal Flow
Flexbox or Grid
Positioning

What does the 'grid-gap' property in CSS Grid Layout control?

Defines a named grid area
Specifies the gap between grid items
Defines the number and size of columns/rows
Aligns grid items along the main axis

Which positioning scheme positions an element relative to the browser window?

Relative
Fixed
Absolute
Static

Chapter 5: Typography

Which CSS property is used to specify the typeface for your text?

font-size
font-style
font-family
text-align

What is the purpose of the font-size property in CSS?

To set the size of the text
To specify the weight of the font
To set the horizontal alignment of text
To control the capitalization of text

Which unit can be used with the font-size property to ensure better accessibility?

em or rem
pt
percent (%)
px

What does the font-weight property in CSS control?

The style of the font
The size of the font
The weight or boldness of the font
The alignment of the text

Which value for the font-style property makes the text appear italic?

normal
oblique
italic
bold

What is the purpose of the text-align property in CSS?

To set the weight of the text
To set the size of the text
To set the horizontal alignment of text
To set the vertical alignment of text

Which value for the text-decoration property removes any decoration from the text?

overline
underline
none
line-through

What does the text-transform property in CSS control?

The size of text
The decoration of text
The capitalization of text
The alignment of text

Which unit is recommended for the line-height property to ensure better accessibility?

percent (%)
Unitless value
px
em

What is the purpose of including a fallback font in the font-family property?

To make the text bold
To align the text
To change the text color
To ensure text is displayed even if the specified font is not available

Which service provides a wide range of web fonts that can be easily integrated into a website?

Apple Fonts
Adobe Fonts
Microsoft Fonts
Google Fonts

What is the purpose of using icon fonts in web projects?

To include scalable vector icons that can be styled with CSS
To include video files
To include raster images
To include audio files

Which popular icon font library allows you to use scalable vector icons styled with CSS?

Google Icons
Adobe Icons
Material Icons
Font Awesome

What is the primary benefit of using web fonts?

To limit the choice of fonts
To decrease the readability of the text
To use fonts that are not installed on the user's computer
To increase the loading time of the website

Chapter 6: Colors

Which of the following is NOT a valid format for specifying colors in CSS?

HSL
Hexadecimal
CMYK
RGB

What does the 'A' stand for in RGBA?

Average
Angle
Addition
Alpha

Which property is used to set the background color of an element in CSS?

background-color
fill
color
stroke

What is the range of the alpha channel in RGBA?

0 to 255
0 to 1
0 to 100
0% to 100%

Which of the following is a predefined color keyword in CSS?

neon
darkmode
lightblue
pastel

What does the 'opacity' property in CSS control?

Border width
Font size
Transparency level of an element
Margin size

Which color format includes a hue, saturation, and lightness component?

CMYK
HSL
Hexadecimal
RGB

What is the correct format for specifying a color using the HSL model?

hsl(14, 100%, 57%)
hsl(14, 100%, 57)
hsl(14, 100, 57%)
hsl(14, 100, 57)

Which of the following is NOT a valid color value in CSS?

hsl(14, 100%, 57%)
rgb(255, 87, 51)
#ff5733
rgb(300, 50, 100)

What is the purpose of using color keywords in CSS?

To reduce compatibility
To increase file size
To make CSS more readable and easier to maintain
To limit color choices

Chapter 7: Backgrounds and Borders

Which property is used to set the background color of an element?

color-background
element-color
background-style
background-color

What does the 'background-position' property determine?

Sets how the background image repeats
Sets the starting position of a background image
Sets the color of the background
Sets the size of the background image

Which of the following is NOT a property that can be set using the 'background' shorthand property?

background-repeat
border-color
background-color
background-image

What does the 'border' shorthand property allow you to set?

Only the border width
Only the border color
All border properties in one declaration
Only the border style

Which property is used to add rounded corners to an element's border?

element-round
border-round
corner-radius
border-radius

What does the 'box-shadow' property add to an element?

Text shadow within the element
Border to the element
Color to the element's background
Shadow effects around an element's frame

Which of the following is an incorrect example of using the 'background' shorthand property?

background: #000 url('image.jpg') no-repeat center;
background: url('image.jpg') no-repeat center center/cover;
background: no-repeat center center/cover url('image.jpg');
background: center center/cover url('image.jpg') no-repeat;

What is the correct syntax for setting a border with a width of 3px, a style of dashed, and a color of blue?

border: blue 3px dashed;
border: dashed 3px blue;
border: blue dashed 3px;
border: 3px dashed blue;

Which property is used to specify the size of the background images?

background-size
size-background
image-size
background-dimensions

What does the 'background-attachment' property control?

Whether a background image is fixed or scrolls with the page
The color of the background
How the background image repeats
The position of the background image

Chapter 8: Transitions and Animations

What is the purpose of the CSS transition property?

To add shadows to elements
To create animations
To change property values suddenly
To change property values smoothly over a given duration

Which of the following is NOT a part of the shorthand transition property?

transition-timing-function
animation-delay
transition-duration
transition-property

What is the correct syntax for defining a transition effect?

element { transition: duration property timing-function delay; }
element { transition: property duration timing-function delay; }
element { transition: delay property duration timing-function; }
element { transition: property timing-function duration delay; }

Which property is used to define keyframes in CSS animations?

@animate
@transition
@change
@keyframes

What does the 'to' keyword represent in a keyframes definition?

The initial state of the animation
The duration of the animation
The middle state of the animation
The final state of the animation

Which of the following is NOT a part of the shorthand animation property?

animation-timing-function
transition-duration
animation-name
animation-duration

What does the 'infinite' value do in the animation-iteration-count property?

Makes the animation loop indefinitely
Delays the animation start
Stops the animation after one iteration
Makes the animation run in reverse

Which CSS property is used to apply an animation to an element?

animation
animate
keyframes
transition

What is the purpose of the 'animation-fill-mode' property?

To specify how a CSS animation should apply styles to its target before and after it is executing
To specify the duration of the animation
To specify the number of times an animation should run
To specify the timing function of the animation

Which of the following is a valid example of a keyframes definition?

@keyframes colorChange { start { background-color: blue; } end { background-color: green; } }
@keyframes colorChange { 0% { background-color: blue; } 50% { background-color: green; } 100% { background-color: blue; } }
@keyframes colorChange { 0 { background-color: blue; } 50 { background-color: green; } 100 { background-color: blue; } }
@keyframes colorChange { from { background-color: blue; } to { background-color: green; } }

Chapter 9: Responsive Design

What is the primary goal of responsive design?

To add more animations to the website
To create websites that provide an optimal viewing experience across a wide range of devices
To make websites load faster
To increase the website's security

Which of the following is NOT a key component of responsive design?

Flexible images
Viewport units
Media queries
JavaScript frameworks

What does the following media query do? @media (max-width: 600px) { ... }

Applies styles to print media
Applies styles to screens smaller than 600px
Applies styles to screens larger than 600px
Applies styles to screens with a resolution of 600px

Which viewport unit is relative to the viewport width?

vh
rem
em
vw

What CSS property ensures that images scale down to fit their container?

height: 100%
width: auto
max-width: 100%
object-fit: contain

What is the purpose of a hamburger menu icon in responsive design?

To toggle the display of the navigation menu on smaller screens
To increase the website's loading speed
To add more animations to the website
To make the website more secure

Which of the following is NOT a technique used in responsive design?

Using media queries
Using flexible images
Using only JavaScript for layout adjustments
Using viewport units

What does the CSS property 'flex-direction: column;' do?

Changes the layout of flex items to a vertical direction
Changes the layout of flex items to a horizontal direction
Changes the color of flex items
Changes the font size of flex items

Chapter 10: Best Practices and Optimization

Which CSS architecture methodology categorizes CSS rules into five types: base, layout, module, state, and theme?

BEM (Block Element Modifier)
SMACSS (Scalable and Modular Architecture for CSS)
OOCSS (Object-Oriented CSS)
ITCSS (Inverted Triangle CSS)

What is the primary benefit of using a CSS preprocessor like Sass?

Minifies CSS files
Combines multiple CSS files
Automatically adds vendor prefixes
Adds features like variables, nesting, and mixins

Which technique involves removing unnecessary characters from your CSS to reduce file size?

Use a Content Delivery Network (CDN)
Minify CSS
Leverage Browser Caching
Inline Critical CSS

What is the purpose of using Autoprefixer in CSS?

Combine multiple CSS files
Automatically add vendor prefixes to your CSS
Inline Critical CSS
Minify CSS files

Which CSS architecture methodology separates concerns and promotes scalability through a seven-layer architecture?

BEM (Block Element Modifier)
ITCSS (Inverted Triangle CSS)
SMACSS (Scalable and Modular Architecture for CSS)
OOCSS (Object-Oriented CSS)

What is the primary goal of adopting a CSS architecture methodology like BEM?

Makes your CSS more readable and reusable
Combines multiple CSS files
Minifies CSS files
Automatically adds vendor prefixes

Which technique involves serving CSS files from a CDN to reduce latency and improve load times?

Use a Content Delivery Network (CDN)
Leverage Browser Caching
Inline Critical CSS
Minify CSS

What is the purpose of setting appropriate cache headers in CSS?

Store CSS files in the browser cache for future visits
Combine multiple CSS files
Inline Critical CSS
Minify CSS files

Which CSS preprocessor is known for transforming CSS with JavaScript plugins, enabling you to use the latest CSS features today?

Sass (Syntactically Awesome Stylesheets)
PostCSS
Less
Stylus

What is the primary benefit of using the ITCSS architecture methodology?

Combines multiple CSS files
Makes your CSS more readable and reusable
Minifies CSS files
Separates concerns and promotes scalability

Readings

No readings available.

Gallery

No gallery items found.

You must log in to view news articles.

Internet Technology Inventions: Cascading Style Sheets (CSS)