CSU Ram Head Logo

JTC 372

Web Design and Management

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;