Questions and Answers
Which option represents important declarations in user 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?
Signup and view all the answers
Which paragraphs will be blue based on the selector h2 ~ p?
Signup and view all the answers
Which value should be used to evenly distribute flex items within a container?
Signup and view all the answers
What is one advantage of using icon fonts?
Signup and view all the answers
What is the difference between display:none and visibility:hidden?
Signup and view all the answers
Which selector and property would you use to scale an element to be 50% smaller on hover?
Signup and view all the answers
Which statement regarding icon fonts is true?
Signup and view all the answers
For the font-weight property, what are the associated keywords for font-weight: 400; and font-weight: 700;?
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?
Signup and view all the answers
Which CSS selector would style every third item in a list starting with item 2?
Signup and view all the answers
Which selector would select only internal links within the current page?
Signup and view all the answers
What is not true about class selectors?
Signup and view all the answers
What is the difference between the margin and padding properties?
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?
Signup and view all the answers
Is there an error in this code?
Signup and view all the answers
Which style places an element at a fixed location within its container?
Signup and view all the answers
What is the specified margin-left value in the example .example { margin-left: calc(5% + 5px); }?
Signup and view all the answers
Which code would you use to absolutely position an element of the logo class?
Signup and view all the answers
In the given example, what color will Paragraph 1 be?
Signup and view all the answers
What is the ::placeholder pseudo-element used for?
Signup and view all the answers
Which statement is true of single and double colon notations for pseudo-elements?
Signup and view all the answers
Which choice is not a valid value for the font-style property?
Signup and view all the answers
When would you use the @font-face method?
Signup and view all the answers
Larger z-index values appear on top of elements with a lower z-index value.
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?
Signup and view all the answers
In Chrome's Developer Tools, where are the default styles listed?
Signup and view all the answers
While HTML controls document structure, CSS controls what?
Signup and view all the answers
What is the recommended name you should give the folder that holds your project's images?
Signup and view all the answers
What is an advantage of using inline CSS?
Signup and view all the answers
In the following example, which selector has the highest specificity ranking for selecting the anchor link element?
Signup and view all the answers
Using an attribute selector, how would you select an element with a "title" attribute?
Signup and view all the answers
What are two valid techniques used to clear floats?
Signup and view all the answers
What element(s) do the following selectors match to? 1) .nav {...; } 2) nav {...; } 3) #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?
Signup and view all the answers
What is true of block and inline elements?
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; }
Signup and view all the answers
What is the line-height property primarily used for?
Signup and view all the answers
Three of these choices are true about class selectors. Which is NOT true?
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?
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;
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; }
Signup and view all the answers
Which set of statements about the z-index property are true?
Signup and view all the answers
What is the difference between the following line-height settings? line-height: 20px; line-height: 2;
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; }
Signup and view all the answers
Which of the following is true of the SVG image format?
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; }
Signup and view all the answers
To change the color of an SVG using CSS, which property is used?
Signup and view all the answers
When using position: fixed, what will the element always be positioned relative to?
Signup and view all the answers
By default, a background image will repeat _
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?
Signup and view all the answers
How would you make the first letter of every paragraph on the page red?
Signup and view all the answers
In this example, what is the selector, property, and value? p { color: #000000; }
Signup and view all the answers
What is the rem unit based on?
Signup and view all the answers
Which choice would give a block element rounded corners?
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) {...}
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?
Signup and view all the answers
Which of the following is not a valid color value?
Signup and view all the answers
What is the vertical gap between the two elements below? Div 1 Div 2
Signup and view all the answers
When using the Flexbox method, what property and value is used to display flex items in a 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", whilenav
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, whilergba()
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
, andspeech
, each targeting different devices or outputs.
Flexbox Layout
- To arrange flex items in a column, use
flex-flow: column;
orflex-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 andstroke
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
andcolor
, enhancing accessibility and design.
Display Properties
-
display: none
removes an element from view and normal document flow, whilevisibility: 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 where400
is normal and700
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.