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%.