New York City College of Technology
Advertising Design & Graphic Arts
Web Design 1
CSS Properties: An Introduction
This is not an exhaustive list of CSS properties, but it covers the ones with which we will work this semester.
CSS SYNTAX
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property:value;}
If the value is multiple words, put quotes around the value:
p {font-family:"sans serif";}
If you want to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;
color:red;}
End each style rule with a semi-colon.
FONT AND TEXT PROPERTIES
Property Name
Description
Possible Values
font-style
Specifies the font style for text
normal | italic | oblique
font-weight
Specifies the weight of a font
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900
font-size
Specifies the font size of text
absolute-size | relative-size | length | percentage
font-variant
Specifies whether or not a text
should be displayed in a small-caps
font
normal | small-caps
text-decoration
Specifies the decoration added to
text
none | underline | overline | line-through | blink
text-transform
Controls the capitalization of text
none | capitalize | uppercase | lowercase
text-align
Specifies the horizontal alignment of
text
left | right | center | justify
text-indent
Specifies the indentation of the first
line in a text-block
length | percentage
text-transform
Controls the capitalization of
text
none | capitalize | lowercase | uppercase | inherit
letter-spacing
Increases or decreases the space
between characters in a text
length | normal | inherit
word-spacing
Increases or decreases the space
between words in a text
length | normal | inherit
line-height
Sets the line height
normal | number | length | percentage
font-family
Specifies the font family for text
family-name (specify) or generic-family~ [serif, sansserif, cursive, fantasy, monospace]
New York City College of Technology
Advertising Design & Graphic Arts
Web Design 1
CSS Properties: An Introduction
BOX PROPERTIES
Property Name
Description
Possible Values
margin-top
Sets the top margin of an element
length | percentage | auto
margin-right
Sets the right margin of an element
length | percentage | auto
margin-bottom
Sets the bottom margin of an element
length | percentage | auto
margin-left
Sets the left margin of an ele-
length | percentage | auto
padding-top
Sets the top padding of an element
length | percentage
padding-right
Sets the right padding of an element
length | percentage
padding-bottom
Sets the bottom padding of an element
length | percentage
padding-left
Sets the left padding of an element
length | percentage
border-color
Sets the color of the four borders
color
border-style
Sets the style of the four borders
solid | double | groove | ridge | inset | outset
border
Sets all the border properties in one
declaration
border-width | border-style | color
margin
Sets all the margin properties in one
declaration
ment
length | percentage | auto
CLASSIFICATION PROPERTIES
Property Name
Description
Possible Values
Whitespace
Specifies how white-space inside an
element is handled
normal | pre | nowrap
List Style Type
Specifies the type of list-item marker
disc | circle | square | decimal | lower-roman | upperroman | lower-alpha | upper-alpha | none
List Style Image
Specifies an image as the list-item
marker
<url> | none
Display
Specifies the type of box an element
should generate
block | inline | list-item | none
New York City College of Technology
Advertising Design & Graphic Arts
Web Design 1
CSS Properties: An Introduction
POSITION
Property Name
Description
Possible Values
top
Sets the top margin edge for a positioned box
length | percentage | auto
left
Sets the left margin edge for a positioned box
length | percentage | auto
visibility
Specifies whether or not an element
is visible
hidden | visible | inherit
z-index
Sets the stack order of an ele-
number | auto
overflow
Specifies what happens if content
overflows an elements box
visible | hidden | auto
position
Specifies the type of positioning for
an element
ment
absolute | relative
COLOR AND BACKGROUND
Property Name
Description
Possible Values
background-color
Sets the background color of an element
color | transparent
background-image
Sets the background image for an
element
url | none
background-repeat
Sets how a background image will
be repeated
repeat | repeat-x | repeat-y | no-repeat
background-attachment
Sets whether a background image
is fixed or scrolls with the rest of the
page
scroll | fixed
background-position
Sets the starting position of a background image
[percentage | length]{1,2} | [top | center | bottom] ||
[left | center | right]
color
Sets the color of text
color
