Logo
Pattern

Discover published sets by community

Explore tens of thousands of sets crafted by our community.

CSS Properties and Values

30

Flashcards

0/30

Still learning
StarStarStarStar

color

StarStarStarStar

Specifies text color. Values: 'red', '#ff0000', 'rgb(255, 0, 0)', 'rgba(255, 0, 0, 1)' etc.

StarStarStarStar

background-color

StarStarStarStar

Sets the background color of an element. Values: 'blue', '#0000ff', 'rgb(0, 0, 255)', 'rgba(0, 0, 255, 0.3)' etc.

StarStarStarStar

margin

StarStarStarStar

Controls the space outside of elements. Values: '10px', '1em', '5%'. Can specify four values for each side ('top right bottom left') or one value for all sides.

StarStarStarStar

padding

StarStarStarStar

Controls the space inside an element between the border and content. Values: '10px', '1em', '5%'. Can specify four values for each side or one value for all sides.

StarStarStarStar

border

StarStarStarStar

Specifies the border around an element. Values: '1px solid black', '2px dashed red', '3px dotted blue' etc. Can separately set border-style, border-width, and border-color.

StarStarStarStar

width

StarStarStarStar

Determines the width of an element. Values: '200px', '50%', 'auto'.

StarStarStarStar

height

StarStarStarStar

Determines the height of an element. Values: '100px', '30%', 'auto'.

StarStarStarStar

font-size

StarStarStarStar

Controls the size of the font. Values: '14px', '1em', '1.2rem', '120%' etc.

StarStarStarStar

font-family

StarStarStarStar

Specifies the font for text. Values: 'Arial', 'Times New Roman', 'Helvetica', sans-serif etc.

StarStarStarStar

text-align

StarStarStarStar

Specifies the horizontal alignment of text. Values: 'left', 'right', 'center', 'justify'.

StarStarStarStar

opacity

StarStarStarStar

Sets the transparency level of an element. Values: 0 (fully transparent), 0.5 (50% transparent), 1 (fully opaque).

StarStarStarStar

display

StarStarStarStar

Specifies the display behavior of an element. Values: 'none', 'block', 'inline', 'inline-block', 'flex', 'grid'.

StarStarStarStar

position

StarStarStarStar

Specifies the positioning method of an element. Values: 'static', 'relative', 'absolute', 'fixed', 'sticky'.

StarStarStarStar

overflow

StarStarStarStar

Specifies what happens if content overflows an element's box. Values: 'visible', 'hidden', 'scroll', 'auto'.

StarStarStarStar

z-index

StarStarStarStar

Specifies the stack order of positioned elements. Values: integer (e.g. '1', '999', '-1'), 'auto'. Higher numbers are closer to the front.

StarStarStarStar

flex-direction

StarStarStarStar

Specifies the direction of flex items in a flex container. Values: 'row', 'row-reverse', 'column', 'column-reverse'.

StarStarStarStar

justify-content

StarStarStarStar

Aligns flex items on the main axis of the current line of the flex container. Values: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around'.

StarStarStarStar

align-items

StarStarStarStar

Aligns flex items on the cross axis of the current line of the flex container. Values: 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'.

StarStarStarStar

transition

StarStarStarStar

Specifies the transition effect for CSS properties when they change. Values: 'property duration timing-function delay'. For example, 'opacity 0.5s ease-in 1s'.

StarStarStarStar

animation

StarStarStarStar

Specifies the animation for an element. Values: 'name duration timing-function delay iteration-count direction fill-mode'. For example, 'slidein 3s ease-in-out 1s infinite reverse none'.

StarStarStarStar

border-radius

StarStarStarStar

Defines the radius of the element's corners. Values: '10px', '50%', '10px 20px 30px 40px' (for each corner).

StarStarStarStar

box-shadow

StarStarStarStar

Applies shadow to an element. Values: 'h-offset v-offset blur spread color'. For example, '10px 10px 5px 0px #888888'.

StarStarStarStar

background-image

StarStarStarStar

Sets one or more background images for an element. Values: 'url(image.png)', 'none', 'linear-gradient(direction, color1, color2)', 'radial-gradient(center, color1, color2)'.

StarStarStarStar

cursor

StarStarStarStar

Specifies the type of cursor to be displayed. Values: 'auto', 'default', 'pointer', 'crosshair', 'help', etc.

StarStarStarStar

list-style

StarStarStarStar

Specifies the style of a list and its items. Values: 'disc', 'circle', 'square', 'none', 'inside', 'outside', 'url(image.png)'. It's a shorthand for list-style-type, list-style-position, and list-style-image.

StarStarStarStar

outline

StarStarStarStar

Specifies the outline of an element. Values: '1px solid #000000', 'medium dashed green', none. It is similar to border but it does not take up space and may overlap other content.

StarStarStarStar

max-width

StarStarStarStar

Sets the maximum width of an element. Accepts 'none', '500px', '80%', etc. If content is larger than the max width, it will overflow according to the overflow property.

StarStarStarStar

min-height

StarStarStarStar

Sets the minimum height of an element. Accepts '0', '200px', '50vh', etc. Ensures that an element is at least a certain height.

StarStarStarStar

visibility

StarStarStarStar

Controls the visibility of an element without changing the layout. Values: 'visible', 'hidden', 'collapse'.

StarStarStarStar

float

StarStarStarStar

Specifies whether an element should float to the left, right, or none. Values: 'left', 'right', 'none'. When set, content will flow around the floated element.

Know
0
Still learning
Click to flip
Know
0
Logo

© Hypatia.Tech. 2024 All rights reserved.