CSU Ram's Head

Home > Reference > Useful CSS Properties

Useful CSS Properties

Layout Properties
CSS Property Description Examples
width Width of element.

width: 900px;

width: 90%;
height Height of element.

height: 150px
min-width Minimum width of element.

min-width: 360px;
max-width Maximum width of element.

max-width: 960px;
display Block or inline. Also flex.

display: block;

display: flex;

padding

padding-top

padding-right

padding-bottom

padding-left

 Space inside border of element. Can be specified on all four sides independently.

padding: 10px;

padding: 0 10px 0 20px;

padding: 0 10%;

padding-bottom: 10px;

margin

margin-top

margin-right

margin-bottom

margin-left

 Space outside border of element. Can be specified on all four sides independently.

margin: 10px;

margin: 0 10px 0 20px;

margin: 0 auto;

margin-top: 10px;
float Sets how elements align around element.

float: left;

float: right;
Type Properties
CSS Property Description Examples
color Text color. Hex code or color name.

color: #ff00cc;

color: red;
font-family Font stack specifies font face in order of preference.

font-family: Georgia, "Times New Roman", Times, sans-serif;
font-style Italic or not.

font-style: italic;
font-weight Bold or not.

font-weight: bold;
font-size  

font-size: 16px;

font-size: 1em;
font

Font shorthand

 

font: italic bold 1em Georgia, "Times New Roman", Times, sans-serif;
text-align Aligns content horizontally in container

text-align: right;
text-decoration Underline or not

text-decoration: none;
text-transform Capitalize, lowercase, uppercase

text-transform: capitalize;
list-style-type Change bullet style or remove bullet

list-style-type: none;
Border (all three properties are necessary to define a border)
CSS Property Description Examples

border-style

border-top-style

border-right-style

border-bottom-style

border-left-style

 Solid, dashed, etc. Can be specified on all four sides independently.

border-style: dashed;

border-left-style: solid;

border-width

border-top-width

border-right-width

border-bottom-width

border-left-width

 Can be specified on all four sides independently.

border-width: 2px;

border-top-width: 1px;
border-color Can be specified on all four sides independently.

border-color: #cccccc;
border

Shorthand:

border: border-width border-style color

border: 1px dotted #000;
Background Properties
CSS Property Description Examples
background-color Assign hex code or color name

background-color: #ffffcc;
background-image Specify path to background image

background-image: url(images/bg.png);
background-repeat Sets how bg image repeats

background-repeat: no-repeat;

background-repeat: repeat-x;

background-repeat: repeat-y;
background-position

Sets horizontal/vertical position of background image

background-position: horizontal vertical

background-position: right bottom;

background-position: 100px 50px;

More examples
Flex Properties
CSS Property Description Examples
display Sets contents of container to display flex

display: flex;
justify-content Sets space around flex items

justify-content: space-around;

justify-content: space-between;
align-items Defines alignment across the cross axis

align-items: flex-start;

align-items: center;

align-items: flex-end;