Scribd
Upload
33 views

CSS Properties: An Introduction: Advertising Design & Graphic Arts

This document provides an introduction to CSS properties, listing common properties for font and text styling, box properties, classification properties, positioning, and color/background. It defines each property, describes its purpose, and lists possible values. The CSS syntax of selector, property, and value is also explained.

Uploaded by

Neda Kahn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

CSS Properties: An Introduction: Advertising Design & Graphic Arts

This document provides an introduction to CSS properties, listing common properties for font and text styling, box properties, classification properties, positioning, and color/background. It defines each property, describes its purpose, and lists possible values. The CSS syntax of selector, property, and value is also explained.

Uploaded by

Neda Kahn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like