CSS General Flashcards
What CSS property is used to set the size of the text?
font-size
What property controls the space outside of an element’s border?
margin
What property controls the space inside an element’s border?
padding
What property sets the color of text?
color
What property sets the background color of an element?
background-color
What CSS property makes text bold?
font-weight
What property changes the style of the font to italic?
font-style
What property changes the font of the text?
font-family
What property hides an element from the page layout?
display:none
What property controls whether an element is visible or not, without affecting layout?
visibility
What CSS property is used to change the positioning type of an element?
position
What property is used to layer elements over one another?
z-index
What property allows an element to float to the left or right?
float
What property is used to clear floats?
clear
What CSS property is used to set the width of an element?
width
What property sets the height of an element?
height
What CSS property forces an element to create a new block formatting context?
overflow
What CSS function allows mathematical expressions to determine values dynamically?
calc()
What CSS function allows a responsive range between min, preferred, and max values?
clamp()
What CSS property sets the background to a smooth gradient?
background-image
What CSS property adds shadow to text?
text-shadow
What CSS property adds shadow to boxes or elements?
box-shadow
What property makes the corners of an element rounded?
border-radius
What CSS property allows transitions between property changes?
transition
What property defines multiple steps in an animation?
@keyframe
What property enables a flex container?
display: flex
What property defines the direction of flex items?
flex-direction
What property aligns items along the main axis in a flex container?
justify-content
What property aligns items along the cross axis in a flex container?
align-items
What property defines the column structure of a grid layout?
grid-template-columns
What property defines the row structure of a grid layout?
grid-template-rows
What property defines the gap between rows and columns in a grid or flex container?
gap
What property sets the space between letters?
letter-spacing
What property sets the space between lines of text?
line-height
What property changes the horizontal alignment of text?
text-align
What property prevents text from wrapping?
white-space: nowrap
What property transforms the case of text (uppercase, lowercase, etc.)?
text-transform
What selector targets the first child of a parent?
:first-child
What CSS rule is used to apply styles based on screen size or device conditions?
@media
What unit represents 1% of the width of the viewport?
vw
What property adds blur, brightness, or grayscale effects to an element?
filter
What property determines how styles transition (e.g., linear or ease-in)?
transition-timing-function
What property defines how long a transition should take?
transition-duration
What property sets which keyframes animation to use?
animation-name
What property defines how many times an animation should repeat?
animation-iteration-count
What property defines whether the animation plays forward, backward, or alternates?
animation-direction
What property delays the start of the animation?
animation-delay
What CSS property controls whether a flex item grows relative to the rest?
flex-grow
What property sets the base size of a flex item before growing or shrinking?
flex-basis
What property aligns a flex item independently of the container’s alignment?
align-self
What syntax is used to define a custom property (CSS variable)?
–custom-property
What function is used to retrieve the value of a custom property?
var()
What property defines the thickness, style, and color of an element’s border?
border
What property sets the thickness of a border?
border-width
What property adds a line around an element without taking space?
outline
What property changes how width and height are calculated with padding and border?
box-sizing
What property controls whether the backface of an element is visible during transformations?
backface-visibility
What selector targets all elements on the page?
*
What selector targets a direct child of an element?
>
What selector targets all <a> tags that have been visited?</a>
:visited
What selector targets an element only if it’s the only one of its type?
:only-of-type
What property makes an element partially transparent?
opacity
What property controls how an image fits in its container?
object-fit
What property controls the position of a background image?
background-position
What property prevents background images from repeating?
background-repeat
What property sets how the browser should render a font (e.g., smoothing)?
font-smooth (non-standard)
What rule targets print media in CSS?
@print media
What property removes the list bullets from a <ul> or <ol>?
list-style
What property collapses adjacent borders in a table?
border-collapse
What property clips content that exceeds the bounds of its container?
clip
What property allows horizontal or vertical scroll within an element?
overflow-x / overflow-y
What property controls whether a sticky element scrolls inside its container?
position
What property prevents clicks and interactions with an element?
pointer-events
What property allows you to blur or color the area behind an element?
backdrop-filter
What function returns one of two values based on a condition?
@supports
What pseudo-element targets the entire scrollbar in WebKit-based browsers?
::-webkit-scrollbar
What media feature is used to detect if the user prefers a dark color scheme?
@media (prefers-color-scheme: dark)
What property disables selection of text with a mouse or keyboard?
user-select
What rule lets you style elements based on their container’s size?
@container
What property defines how a container’s size should be measured (inline vs block)?
container-type
What unit allows responsive layouts based on a container’s width?
cqw
What property explicitly defines a named grid line in a grid layout?
grid-template-areas
What selector targets a parent when one of its children has focus (in JS polyfill)?
:has() (currently supported in some browsers)
What property defines a minimum width for an element?
min-width
