CSS Flashcards
A great way to learn the CSS properties is with flashcards. The CSS flashcards shown here are the CSS properties I use most often in designing websites.
Flip over each flashcard to see the answer. Once you know an element, keep it flipped over.
font-family
font-family
Use font-family to specify the font for the selection. For example, Arial, Helvetica, sans-serif.
font-size
font-size
The font-size property can be set in px, em, or a percentage. em is preferred for responsive websites.
color
color
The color property sets the font color for the selection.
font-weight
font-weight
Set the font-weight to bold or normal. Font-weights can also be set with numbers. For example, normal text is 400 and bold text is 700.
line-height
line-height
The line-height property defines the amount of space above and below inline elements. For example, set the line-height to 1.5 to have spacing of 1 and a half between lines of text.
letter-spacing
letter-spacing
Use letter-spacing to add spacing between each letter.
text-decoration
text-decoration
Use text-decoration to add or remove underlining and emphasis
list-style-type
list-style-type
Use the list-style-type to change the default bullets or numbers on a list. Use none to remove the bullets.
list-style-image
list-style-image
Use list-style-image to set a specified image to a bullet.
margin
margin
The space outside the border in the box model.
padding
padding
The space inside the border in the box model.
box-sizing
box-sizing
Set the box-sizing to border-box to have the padding and border included in the object size.
display
display
Display can be used to change a property from inline to block, or vice-versa, and to none to make an object disappear.
float
float
Use float to force an object to the left or right on the page.
width
width
Set the width in pixels or percentage. Use percentages when possible for responsive websites.
height
height
Set the height in pixels or percentage.
min-width
min-width
Sets a minimum width for the selection.
max-width
max-width
Sets a maximum width for the selection.
min-height
min-height
Sets a minimum height.
max-height
max-height
Sets a maximum height
border
border
Draws a border around the selected elements. For example, 1px solid black, would create a one pixel black border around the object.
border-radius
border-radius
Set the border radius to a percentage for rounded corners on a border.
background-image:url()
background-image:url()
Used for background images. The source location of the image is place in the parentheses; for example, images/coolimage.png.
background-repeat
background-repeat
This controls how and if the background image repeats. Use no-repeat for a single image.
background-size
background-size
Sets the size of the background image. Use contain to assure the image shows completely. Use cover to cover all the available space.
background-position
background-position
Sets the position of the background image. For example, to center the image, use center center.
opacity
opacity
Sets the opacity of an image. For example, 0.5 would show at 50%.