63 Questions

100 Views

CSS Skills Flashcards

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

Which option represents important declarations in user stylesheets?

Important declarations in user stylesheets (correct)

Any declarations in user-agent stylesheets

Important declarations in author stylesheets

Normal declarations in author stylesheets

What is the cascading order of styles from low to high priority?

User agent, user, author, animations, author !important, user !important, user agent !important, transitions.

What does the flex-direction property specify?

The direction that flex items are displayed.

What is the value used to specify the direction for flex-direction as row?

flex-direction: row; Signup and view all the answers

Which paragraphs will be blue based on the selector h2 ~ p?

Paragraphs 2, and 3 will be blue, and paragraph 2 will have a beige background. Signup and view all the answers

Which value should be used to evenly distribute flex items within a container?

justify-content: space-around; Signup and view all the answers

What is one advantage of using icon fonts?

Icon fonts can be styled with typography-related properties such as font-size and color. Signup and view all the answers

What is the difference between display:none and visibility:hidden?

display:none hides the element from view and removes it from the normal flow of the document. Signup and view all the answers

Which selector and property would you use to scale an element to be 50% smaller on hover?

element:hover {transform: scale(0.5);} Signup and view all the answers

Which statement regarding icon fonts is true?

Icon fonts can be styled with typography-related properties such as font-size and color. Signup and view all the answers

For the font-weight property, what are the associated keywords for font-weight: 400; and font-weight: 700;?

normal; bold Signup and view all the answers

What would the width of three columns be in a layout of 500 pixels with grid-template-columns: 50px 1fr 2fr?

50px, 150px, 300px Signup and view all the answers

Which CSS selector would style every third item in a list starting with item 2?

li:nth-child(3n + 2) { margin: 0 5px; } Signup and view all the answers

Which selector would select only internal links within the current page?

a[href^="#"] Signup and view all the answers

What is not true about class selectors?

Only one class value can be assigned to an element. Signup and view all the answers

What is the difference between the margin and padding properties?

Margin adds space around an element; padding adds space inside of an element. Signup and view all the answers

What is not a valid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right?

padding: 10px 10px 0px 0px; Signup and view all the answers

Is there an error in this code?

The sans-serif inclusion is problematic. Signup and view all the answers

Which style places an element at a fixed location within its container?

position: absolute; Signup and view all the answers

What is the specified margin-left value in the example .example { margin-left: calc(5% + 5px); }?

The left margin value is equal to 5% of its parent's element's width plus 5px. Signup and view all the answers

What is the CSS selector for an tag containing the title attribute?

a[title] Signup and view all the answers

Which code would you use to absolutely position an element of the logo class?

.logo { position: absolute; left: 100px; top: 150px; } Signup and view all the answers

In the given example, what color will Paragraph 1 be?

red Signup and view all the answers

What is the ::placeholder pseudo-element used for?

It is used to format the appearance of placeholder text within a form control. Signup and view all the answers

Which statement is true of single and double colon notations for pseudo-elements?

In CSS3, the double colon notation was introduced to differentiate pseudo-elements from pseudo-classes. Signup and view all the answers

Which choice is not a valid value for the font-style property?

none Signup and view all the answers

When would you use the @font-face method?

To load custom fonts into stylesheet. Signup and view all the answers

Larger z-index values appear on top of elements with a lower z-index value.

True Signup and view all the answers

You have a large image that needs to fit into a 400 x 200 pixel area. What should you resize the image to for Retina displays?

800 x 400 pixels Signup and view all the answers

In Chrome's Developer Tools, where are the default styles listed?

Under the User Agent Stylesheet section on the right. Signup and view all the answers

While HTML controls document structure, CSS controls what?

Content appearance. Signup and view all the answers

What is the recommended name you should give the folder that holds your project's images?

images Signup and view all the answers

What is an advantage of using inline CSS?

It is easier to add multiple styles through it. Signup and view all the answers

In the following example, which selector has the highest specificity ranking for selecting the anchor link element?

.example a Signup and view all the answers

Using an attribute selector, how would you select an element with a "title" attribute?

a[title]{...} Signup and view all the answers

What are two valid techniques used to clear floats?

Use the "clearfix hack" on the parent element or use the overflow property with a value other than "visible." Signup and view all the answers

What element(s) do the following selectors match to? 1) .nav {...; } 2) nav {...; } 3) #nav {...; }

1.An element with a class of "nav" 2.A nav element 3.An element with an ID of "nav" Signup and view all the answers

When adding transparency styles, what is the difference between using the opacity property versus the background property with an rgba() value?

Opacity specifies the level of transparency of an element, including its content. Background with an rgba() value applies transparency to the background color only. Signup and view all the answers

What is true of block and inline elements?

By default, block elements span the entire width of its container; inline elements are the same height and width as the content contained between their tags. Signup and view all the answers

Referring to the code sample below, what will the widths of the three columns be? .grid { display: grid; width: 500px; grid-template-columns: 50px 1fr 2fr; }

The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide. Signup and view all the answers

What is the line-height property primarily used for?

To control the height of the space between two lines of content. Signup and view all the answers

Three of these choices are true about class selectors. Which is NOT true?

Classes can be used multiple times per page but not within the same element. Signup and view all the answers

Of the four properties, which one should be used to align a global navigation bar that stays fixed at the top of the page?

position Signup and view all the answers

In the shorthand example below, which individual background properties are represented? background: blue url(image.jpg) no-repeat scroll 0px 0px;

background-color: blue; background-image: url(image.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: 0px 0px; Signup and view all the answers

According to cascading and specificity rules, what color will the link be? .example { color: yellow; } ul li a { color: blue; } ul a { color: green; } a { color: red; }

yellow Signup and view all the answers

Which set of statements about the z-index property are true?

Larger z-index values appear on top of elements with a lower z-index value. Negative and positive numbers can be used. z-index can only be used on positioned elements. Signup and view all the answers

What is the difference between the following line-height settings? line-height: 20px; line-height: 2;

The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to twice the size of the corresponding font-size value. Signup and view all the answers

In the following example, what color will paragraph one and paragraph two be? section p { color: red; } section + p { color: blue; }

Paragraphs one will be red, paragraph two will be blue. Signup and view all the answers

Which of the following is true of the SVG image format?

SVGs can be created as a vector graphic or coded using SVG specific elements such as <circle>, <rect>, and <path>. Signup and view all the answers

In the example below, when will the color pink be applied to the anchor element? a:active { color: pink; }

The color of the link will display as pink while the link is being clicked but before the mouse click is released. Signup and view all the answers

To change the color of an SVG using CSS, which property is used?

Use fill to set the color inside the object and stroke to set the color of the border. Signup and view all the answers

When using position: fixed, what will the element always be positioned relative to?

The viewport. Signup and view all the answers

By default, a background image will repeat _

Indefinitely, vertically, and horizontally. Signup and view all the answers

When using media queries, media types are used to target a device category. Which choice lists current valid media types?

print, screen, speech Signup and view all the answers

How would you make the first letter of every paragraph on the page red?

p::first-letter { color: red; } Signup and view all the answers

In this example, what is the selector, property, and value? p { color: #000000; }

"p" is the selector, "color" is the property, "#000000" is the value. Signup and view all the answers

What is the rem unit based on?

The rem unit is relative to the font-size of the root element of the page. Signup and view all the answers

Which choice would give a block element rounded corners?

border-radius: 10px; Signup and view all the answers

In the following media query example, what conditions are being targeted? @media (min-width: 1024px), screen and (orientation: landscape) {...}

The rule will apply to a device that has either a width of 1024px or wider, or is a screen device in landscape mode. Signup and view all the answers

CSS transform properties are used to change the shape and position of the selected objects. The transform-origin property specifies the location of the element's transformation origin. By default, what is the location of the origin?

The top left corner of the element. Signup and view all the answers

Which of the following is not a valid color value?

color: 000000 Signup and view all the answers

What is the vertical gap between the two elements below? Div 1 Div 2

2rem Signup and view all the answers

When using the Flexbox method, what property and value is used to display flex items in a column?

flex-flow: column; or flex-direction: column Signup and view all the answers

Study Notes

CSS Specificity and Selectors

The selector with the highest specificity is .example a, as class selectors have more weight than other selector types.
To select an element by attribute, the correct syntax is a[title] {...}, which targets anchors with a specified title attribute.

Clearing Floats

Two techniques to clear floats include using the "clearfix hack" on the parent element or applying the overflow property with a non-visible value.

CSS Selectors Understanding

The .nav class targets elements with a class of "nav", while nav targets all <nav> elements, and #nav targets the element with the ID "nav".

Opacity vs RGBA

The opacity property applies transparency to the entire element, including content, while rgba() affects only the background color.

Block vs Inline Elements

Block elements span the entire width of their container by default, while inline elements only take up as much width as their content.

CSS Grid and Flexbox

CSS grid supports flexible layouts with the fr unit, which helps distribute remaining space among columns.

Understanding Line-Height

The line-height property controls the vertical space between lines of content, impacting text readability.

Class Selector Truths

Multiple classes can coexist within the same element, but a class cannot be applied multiple times to the same element.

Layouts and Positioning

For a fixed navigation bar at the top of a page, the position property is essential.

Background Properties

The shorthand background property combines multiple properties, with background-attachment defining image scrolling behavior.

Cascading Rules

Specificity determines the final styles applied, where a style defined by a class selector takes precedence over tag selectors.

Z-Index Use

The z-index property defines the stacking order of elements, with larger values appearing on top of those with smaller values.

Controlling Line Heights

line-height values can be set in pixels for an absolute height or as a unitless number to scale relative to the font size.

Pseudo-Elements

To style the first letter of each paragraph, use p::first-letter, which is a valid pseudo-element syntax.

Media Queries

Current valid media types include print, screen, and speech, each targeting different devices or outputs.

Flexbox Layout

To arrange flex items in a column, use flex-flow: column; or flex-direction: column;.

CSS Color Validity

A string like color: 000000; is invalid, while hexadecimal color values with prefixes # or RGB formats are valid.

Margin Collapsing

Vertical margin collapsing means adjacent margins don't accumulate; only the larger margin is applied in overlapping scenarios.

SVG and CSS

SVGs can be manipulated with CSS, using properties like fill for color inside objects and stroke for borders.

Fixed Positioning

Elements with position: fixed are anchored to the viewport and remain static relative to the visible area of the screen.

Background Repeat

By default, a background image will repeat indefinitely in both horizontal and vertical directions.

Transformation Origins

The default origin point for transformations is the top left corner of the element.

Important Declaration Precedence

The highest precedence is given to important declarations in user stylesheets, which can override other styles.

Flex Direction Examples

To control item layouts, set flex-direction values:
- row for horizontal,
- row-reverse for reversed horizontal,
- column for vertical,
- column-reverse for reversed vertical order.

Sibling Combinators

Use the general sibling combinator (~) or adjacent sibling combinator (+) to select siblings under the same parent element, affecting style rules.### CSS Selectors and Properties
Tilde (~) selector targets all sibling elements after a specified element.
Plus (+) selector targets only the direct sibling element following a specified element.
justify-content property in flexbox controls spacing between items along the main axis.
Icon fonts can be styled with typography properties like font-size and color, enhancing accessibility and design.

Display Properties

display: none removes an element from view and normal document flow, while visibility: hidden hides it but retains space in the layout.
For hover effects to scale an element, use transform: scale(0.5);.

Font Weight and Sizing

The font-weight property values include numeric values where 400 is normal and 700 is bold.
The calc() function allows for dynamic calculations in CSS properties.

Pseudo-elements and Classes

The ::placeholder pseudo-element styles placeholder text in form controls.
In many CSS frameworks, the single colon (:) and double colon (::) form are interchangeable, but double colons are preferred for pseudo-elements to distinguish them from pseudo-classes.

Box Model and Positioning

Margin adds space outside an element, while padding adds space within an element.
The position: absolute; property allows an item to be placed at a fixed location within its container.
The z-index property controls the stacking order of overlapping elements, with larger values appearing on top.

Responsive Design

Use larger image dimensions for Retina displays (e.g., resizing to 800 x 400 pixels for a 400 x 200 pixel area).

Project Organization

Recommended naming for the images folder in projects is simply images, prioritizing simplicity and clarity.

Inline CSS Advantages

Easier to add multiple styles directly within HTML elements compared to separate stylesheets, useful for quick testing of local CSS overrides.

Common CSS Mistakes

An error in @font-face includes problematic font-family declarations without proper handling of fallbacks.

Studying That Suits You

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

Description

Test your knowledge of CSS selectors with these flashcards. Each card presents a question focused on different aspects of CSS specificity and attributes. Perfect for both beginners and those looking to refresh their CSS skills.