What Is CSS?
3.67 (3 votes)
Document Description
CSS (cascading stylesheets) is a simple mechanism for controlling the style of a Web document without compromising its structure. By separating visual design elements (fonts, colors, margins, and so on) from the structural logic of a Web
page, CSS give Web designers the control they crave without sacrificing the integrity of the data - thus maintaining its usability in multiple environments.
File Details- Added: February, 23rd 2009
- Reads: 97
- Downloads: 20
- File size: 39.43kb
- Pages: 13
- content preview
- Username: rika
- Name: rika
- Documents: 1300
Embed Code:
Related Documents
What is cosmetology
by: Jessica, 2 pageshttp://www.whatiscosmetology.com/ Attending cosmetology school, becoming a cosmetologist, and having a career in cosmetology is a very exciting path to pursue. To prepare, do your research first! ...
What is cosmetology
by: Jessica, 8 pageshttp://www.whatiscosmetology.com/ Attending cosmetology school, becoming a cosmetologist, and having a career in cosmetology is a very exciting path to pursue. To prepare, do your research first! ...
what is a linear equation
by: mahesh4528, 3 pagesWhat is a linear equation: An equation is a condition on a variable. A variable takes on different values; its value is not fixed . Variables are denoted usually by letter of alphabets, such as x, y ...
What is Archaeology
by: scottaleger, 11 pagesWhat is Archaeology - Archaeology studies human history from the development of the first stone tools in eastern Africa 3.4 million years ago up to recent decades. Here 7 Archaeology Guide to knowing ...
What is Enterprise 2.0?
by: marco, 53 pagesWhat is Enterprise 2.0? AIIM Training & Education www.aiim.org/training Objectives • Defining Enterprise 2.0 • Technology Compliments and Alternatives ...
What is TS File, Play TS video on Mac for free, Convert TS Files to DVD on Mac
by: franciszka, 2 pagesWhat is TS File, Play TS on Mac free, Convert TS Files to DVD on MacWhat is TS file" TS" is the abbreviation of Transport stream (in high…
What is the PMBOK and What Can It Do For Me?
by: desantis, 11 pagesWhat is the PMBOK and What Can It Do For Me? Kenneth A. McVearry Osmose Utilities Services One Adler Drive East Syracuse, NY 13057
Content Preview
What Is CSS?
CSS (cascading stylesheets) is a simple mechanism for controlling the style of a
Web document without compromising its structure. By separating visual design
elements (fonts, colors, margins, and so on) from the structural logic of a Web
page, CSS give Web designers the control they crave without sacrificing the
integrity of the data - thus maintaining its usability in multiple environments. In
addition, defining typographic design and page layout from within a single,
distinct block of code - without having to resort to image maps, <font> tags,
tables, and spacer GIFs - allows for faster downloads, streamlined site
maintenance, and instantaneous global control of design attributes across
multiple pages.
Client-side support for the various CSS properties is uneven, even among
browsers that support stylesheets. The CSS properties and values presented here
are those supported by both Microsoft Internet Explorer 4 and Netscape
Navigator 4.
How CSS Works
CSS overrides the browser's default settings for interpreting how tags should be
displayed, letting you use any HTML element indicated by an opening and closing
tag (including the <p> tag) to apply style attributes defined either locally or in a
stylesheet.
Stylesheets contain rules, composed of selectors and declarations that define how
styles will be applied. The selector (a redefined HTML element, class name, or ID
name) is the link between the HTML document and the style. There are two
different kinds of selectors: types (HTML element tags) and attributes (such as
class and ID names).
A CSS declaration has two parts,
a property ("color") and a value ("red").
The basic syntax of a rule
selector {property 1: value 1; property 2: value: 2} "
An example (containing two declarations, as above)
P {font-size: 8pt; color: red}
Local, Global, and Linked Stylesheets
Local (inline) stylesheet declarations, specific to a single instance on a page, can
be used instead of <font> tags to specify font size, color, and typeface and to
define margins, leading, etc.
<p style="font size: small; color: red; font-weight: bold; font-
family: Arial, Helvetica, non-serif">This is a local stylesheet
declaration. </p>
Global (embedded) stylesheet declarations, applicable to an entire document, are
defined within the <style> and </style> tags, which precede the <body> tag in
the HTML document and are usually placed in the header.
To embed a global stylesheet in your HTML document:
<html>
<head>
<title>Title</title>
<style type="text/css">
<!--
[STYLE INFORMATION GOES HERE]
-->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>
Linked stylesheet declarations use a single stylesheet (in a separate file, saved
with the .css suffix) to define multiple pages. A typical .css file is a text file
containing style rules, as here:
P {font-family: non-serif; font-size: medium; color: red}
H1 {font-family: serif; font-size: x-large; color: green}
H2 {font-family: serif; font-size: large; color: blue}
To apply a .css stylesheet ("style.css" in the example below) to an HTML page, a
<link> tag is added to the page header:
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
Inheritance
In cases where local, global, and linked style definitions conflict, the most specific
stylesheet will generally take precedence: local overrides global, global overrides
linked. Similarly, inline style attributes override ID, ID overrides class, and class
overrides stylesheet-defined HTML elements.
Units of Measure
Throughout this CSS reference guide, abstract values (notably values involving
units of measure) appear between angle brackets: <color>. They should be
replaced by actual values as indicated in the key below.
Length Units
<length> indicates a number followed by a unit of measure: 24px.
The number can be an integer or a decimal fraction, and can be preceded by + or
-.
Units can be absolute or relative:
Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches,
points, picas)
Relative: em, ex, px (the element's font height, the element's x-
height, pixels)
Font size may be defined in points, pixels, inches, or centimeters
(pt, px, in, cm) or as a percentage.
<absolute-size> can be: xx-small, x-small, small, medium, large,
x-large, xx-large.
<relative-size> can be: larger, smaller.
Percentage Units
<percentage> indicates a number followed by a % sign: 50%.
In the text-indent, margin, padding, and width properties, percentage values are
relative to the width of the parent element.
In the font-size property, percentage values are relative to the font size of the
parent element.
In <color> values, percentages can be used to express RGB values.
Color Units
<color> can represent either <color-name> or <rgb> values, as defined below:
<color-name> can be: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
<rgb> can be: #<hex><hex><hex> rgb(<number>, <number>,
<number>) rgb(<percentage>,<percentage>,<percentage>)
<hex> represents a hexidecimal value, <number> a decimal value,
and <percentage> a percentage.
CSS-P (Position)
CSS-P allows you to explicitly determine the position of HTML elements, providing
powerful layout control both for static documents and for dynamic, animated
HTML-based content.
There are two basic methods of positioning HTML elements using the position
property. Absolute position lets you set an element's position arbitrarily - that is,
relative to its parent container and independent of the document's flow. Relative
position allows an element to be offset relative to its natural position in the
document's flow.
Position is specified with the top and/or left properties using a <length> value
(relative or absolute as appropriate).
The visibility property sets the display state of the element, but doesn't affect its
position in the layout: An element takes up the same space whether hidden or
visible.
Z-index is used to specify the stacking order of the positionable elements above
or below other HTML elements. The number value may be positive or negative,
and must be an integer. Default z-ordering of elements in a document is back-to-
front in the order of their appearance in the HTML.
The overflow element is used to control the display of an element's contents in
cases where they exceed its given dimensions. It applies only to elements with
the position property of type "absolute."
Dynamic aspects of managing positioned elements, like hiding, displaying, and
movement, are implemented using an external scripting language, such as
JavaScript.
The top and left properties may be expressed as percentages. For other CSS-P
properties listed, percentages do not apply.
Reference Stylesheets Guide
Name of
Property
Rule syntax
Possible values
font-family
<selector> {font-family:<value>} <family-name>
(specify) or
<generic-
family>~ [serif,
sans-serif*,
cursive*,
fantasy*,
monospace]
font-style
<selector> {font-style:<value>}
normal, italic
font-weight
<selector> {font-weight:<value>} normal*, bold,
100*, 200*,
300*, 400*,
500*, 600*,
700*, 800*,
900*
font-size
<selector> {font-size:<value>}
<absolute-
size>, <relative-
size>*,
<length>~~,
<percentage>
font $
<selector> {font:<value>}
<font-style>~~,
<font-weight>*,
<font-size>**,
<font-family>**
Color and Background
Name of
Property
Rule syntax
Possible values
color
<selector> {color:<value>}
<color> (see
"Units of
Measure")
background-color
<selector> {background-
<color> (see
color:<value>}
"Units of
Measure")
background-image
<selector> {background-image: URL (relative or
url(<value>)}
absolute path)
background $
<selector>{background:<value>} <background-
color> (i.e.,
<color>)
Text properties
Name of
Property
Rule syntax
Possible values
Text-decoration
<selector>{text-
underline, line-
decoration:<value>}
through
text-transform
<selector>{text-
capitalize*,
transform:<value>}
uppercase*,
lowercase*,
none*
text-align
<selector>{text-align:<value>}
left, right,
center, justify*
text-indent
<selector>{text-indent:<value>} <length>,
<percentage>
Box properties
Name of
Property
Rule syntax
Possible values
margin $
<selector>{margin:<value>}
<length>**,
<percentage>**,
auto(sequence:
t r b l)
margin-top
<selector>{margin-top:<value>} <length>**,
<percentage>,
auto
Margin-right
<selector>{margin-
<length>,
right:<value>}
<percentage>,
auto
margin-bottom*
<selector>{margin-
<length>*,
bottom:<value>}
<percentage>*,
auto*
margin-left
<selector>{margin-left:<value>} <length>,
<percentage>,
auto
padding $*
<selector>{padding:<value>}
<length>*,
<percentage>*,
(sequence: t r b
l)
padding-top*
<selector>{padding-
<length>*,
top:<value>}
<percentage>*
padding-right*
<selector>{padding-
<length>*,
right:<value>}
<percentage>*
padding-bottom*
<selector>{padding-
<length>*,
bottom:<value>}
<percentage>*
padding-left*
<selector>{padding-left:<value>} <length>*,
<percentage>*
border-color*
<selector>{border-
<color>*
color:<value>}
border-style*
<selector>{border-
solid*, double*,
style:<value>}
groove*, ridge*,
inset*, outset*
border $*
<selector>{border:<value>}
<border-
width>*,
<border-style>*,
<color>
Block-level and Replaced Elements
width
<selector>{width:<value>}
<length>,
<percentage>,
auto
height
<selector>{height:<value>}
<length>, auto
float
<selector>{float:<value>}
left, right
clear
<selector>{clear:<value>}
none, left*,
right*
Position (CSS - P)
Name of
Property
Rule syntax
Possible values
position
<selector>{position:<value>}
absolute,
relative
top
<selector>{top:<value>}
<length>,
<percentage>,
auto
left
<selector>{left:<value>}
<length>,
<percentage>,
auto
visibility
<selector>{visibility:<value>}
hidden, visible,
inherit
z-index
<selector>{z-index:<value>}
<number>, auto
overflow
<selector>{overflow:<value>}
visible, hidden,
auto
* = Not supported on IE 4/Mac
** = Buggy on IE 4/Mac
~ = Partially supported on IE 4/Mac
~~ = Partially supported on all 4 browsers
$ = Shorthand Property
Individual Properties
Style rules
Comments
p
{font-family: Of those
Helvetica, Geneva; listed, the
first
available
font will be
applied.
font-style: italic; Text will be
rendered
as italic.
font-weight: bold; Text will be
rendered
as bold.
font-size: 10pt; Text will be
rendered
as 10-point
type.
color: #00FFFF; Text will be
rendered to
the hex
color value
#00FFFF.
background-color: The
blue; element's
background
color will be
rendered
as blue.
background- The
image: element will
url(images/foo.gif)} have the
background
image(s)
specified.
.foo
{text-decoration: Text in the
underlined} class "foo"
will be
underlined.
{text-transform: Text in the
lowercase} class "foo"
will be
rendered
as
lowercase.
#foo {text-align: center} Text with
the ID "foo"
will be
center-
aligned.
{text-indent: 1em} Text with
the ID "foo"
will be
indented 1
em.
p
{margin-top: 12px; The
element's
top margin
will be 12
pixels.
margin-bottom: The
18px; element's
bottom
margin will
be 18
pixels.
padding-right: 8pt; The
element's
right
padding will
be 8 points.
padding-left: 4pt} The
element's
left padding
will be 4
points.
body {border-color: red; Borders will
be red.
border-style: Borders will
solid} be solid.
Block-level and replaced elements
CSS (cascading stylesheets) is a simple mechanism for controlling the style of a
Web document without compromising its structure. By separating visual design
elements (fonts, colors, margins, and so on) from the structural logic of a Web
page, CSS give Web designers the control they crave without sacrificing the
integrity of the data - thus maintaining its usability in multiple environments. In
addition, defining typographic design and page layout from within a single,
distinct block of code - without having to resort to image maps, <font> tags,
tables, and spacer GIFs - allows for faster downloads, streamlined site
maintenance, and instantaneous global control of design attributes across
multiple pages.
Client-side support for the various CSS properties is uneven, even among
browsers that support stylesheets. The CSS properties and values presented here
are those supported by both Microsoft Internet Explorer 4 and Netscape
Navigator 4.
How CSS Works
CSS overrides the browser's default settings for interpreting how tags should be
displayed, letting you use any HTML element indicated by an opening and closing
tag (including the <p> tag) to apply style attributes defined either locally or in a
stylesheet.
Stylesheets contain rules, composed of selectors and declarations that define how
styles will be applied. The selector (a redefined HTML element, class name, or ID
name) is the link between the HTML document and the style. There are two
different kinds of selectors: types (HTML element tags) and attributes (such as
class and ID names).
A CSS declaration has two parts,
a property ("color") and a value ("red").
The basic syntax of a rule
selector {property 1: value 1; property 2: value: 2} "
An example (containing two declarations, as above)
P {font-size: 8pt; color: red}
Local, Global, and Linked Stylesheets
Local (inline) stylesheet declarations, specific to a single instance on a page, can
be used instead of <font> tags to specify font size, color, and typeface and to
define margins, leading, etc.
<p style="font size: small; color: red; font-weight: bold; font-
family: Arial, Helvetica, non-serif">This is a local stylesheet
declaration. </p>
Global (embedded) stylesheet declarations, applicable to an entire document, are
defined within the <style> and </style> tags, which precede the <body> tag in
the HTML document and are usually placed in the header.
To embed a global stylesheet in your HTML document:
<html>
<head>
<title>Title</title>
<style type="text/css">
<!--
[STYLE INFORMATION GOES HERE]
-->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>
Linked stylesheet declarations use a single stylesheet (in a separate file, saved
with the .css suffix) to define multiple pages. A typical .css file is a text file
containing style rules, as here:
P {font-family: non-serif; font-size: medium; color: red}
H1 {font-family: serif; font-size: x-large; color: green}
H2 {font-family: serif; font-size: large; color: blue}
To apply a .css stylesheet ("style.css" in the example below) to an HTML page, a
<link> tag is added to the page header:
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
Inheritance
In cases where local, global, and linked style definitions conflict, the most specific
stylesheet will generally take precedence: local overrides global, global overrides
linked. Similarly, inline style attributes override ID, ID overrides class, and class
overrides stylesheet-defined HTML elements.
Units of Measure
Throughout this CSS reference guide, abstract values (notably values involving
units of measure) appear between angle brackets: <color>. They should be
replaced by actual values as indicated in the key below.
Length Units
<length> indicates a number followed by a unit of measure: 24px.
The number can be an integer or a decimal fraction, and can be preceded by + or
-.
Units can be absolute or relative:
Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches,
points, picas)
Relative: em, ex, px (the element's font height, the element's x-
height, pixels)
Font size may be defined in points, pixels, inches, or centimeters
(pt, px, in, cm) or as a percentage.
<absolute-size> can be: xx-small, x-small, small, medium, large,
x-large, xx-large.
<relative-size> can be: larger, smaller.
Percentage Units
<percentage> indicates a number followed by a % sign: 50%.
In the text-indent, margin, padding, and width properties, percentage values are
relative to the width of the parent element.
In the font-size property, percentage values are relative to the font size of the
parent element.
In <color> values, percentages can be used to express RGB values.
Color Units
<color> can represent either <color-name> or <rgb> values, as defined below:
<color-name> can be: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
<rgb> can be: #<hex><hex><hex> rgb(<number>, <number>,
<number>) rgb(<percentage>,<percentage>,<percentage>)
<hex> represents a hexidecimal value, <number> a decimal value,
and <percentage> a percentage.
CSS-P (Position)
CSS-P allows you to explicitly determine the position of HTML elements, providing
powerful layout control both for static documents and for dynamic, animated
HTML-based content.
There are two basic methods of positioning HTML elements using the position
property. Absolute position lets you set an element's position arbitrarily - that is,
relative to its parent container and independent of the document's flow. Relative
position allows an element to be offset relative to its natural position in the
document's flow.
Position is specified with the top and/or left properties using a <length> value
(relative or absolute as appropriate).
The visibility property sets the display state of the element, but doesn't affect its
position in the layout: An element takes up the same space whether hidden or
visible.
Z-index is used to specify the stacking order of the positionable elements above
or below other HTML elements. The number value may be positive or negative,
and must be an integer. Default z-ordering of elements in a document is back-to-
front in the order of their appearance in the HTML.
The overflow element is used to control the display of an element's contents in
cases where they exceed its given dimensions. It applies only to elements with
the position property of type "absolute."
Dynamic aspects of managing positioned elements, like hiding, displaying, and
movement, are implemented using an external scripting language, such as
JavaScript.
The top and left properties may be expressed as percentages. For other CSS-P
properties listed, percentages do not apply.
Reference Stylesheets Guide
Name of
Property
Rule syntax
Possible values
font-family
<selector> {font-family:<value>} <family-name>
(specify) or
<generic-
family>~ [serif,
sans-serif*,
cursive*,
fantasy*,
monospace]
font-style
<selector> {font-style:<value>}
normal, italic
font-weight
<selector> {font-weight:<value>} normal*, bold,
100*, 200*,
300*, 400*,
500*, 600*,
700*, 800*,
900*
font-size
<selector> {font-size:<value>}
<absolute-
size>, <relative-
size>*,
<length>~~,
<percentage>
font $
<selector> {font:<value>}
<font-style>~~,
<font-weight>*,
<font-size>**,
<font-family>**
Color and Background
Name of
Property
Rule syntax
Possible values
color
<selector> {color:<value>}
<color> (see
"Units of
Measure")
background-color
<selector> {background-
<color> (see
color:<value>}
"Units of
Measure")
background-image
<selector> {background-image: URL (relative or
url(<value>)}
absolute path)
background $
<selector>{background:<value>} <background-
color> (i.e.,
<color>)
Text properties
Name of
Property
Rule syntax
Possible values
Text-decoration
<selector>{text-
underline, line-
decoration:<value>}
through
text-transform
<selector>{text-
capitalize*,
transform:<value>}
uppercase*,
lowercase*,
none*
text-align
<selector>{text-align:<value>}
left, right,
center, justify*
text-indent
<selector>{text-indent:<value>} <length>,
<percentage>
Box properties
Name of
Property
Rule syntax
Possible values
margin $
<selector>{margin:<value>}
<length>**,
<percentage>**,
auto(sequence:
t r b l)
margin-top
<selector>{margin-top:<value>} <length>**,
<percentage>,
auto
Margin-right
<selector>{margin-
<length>,
right:<value>}
<percentage>,
auto
margin-bottom*
<selector>{margin-
<length>*,
bottom:<value>}
<percentage>*,
auto*
margin-left
<selector>{margin-left:<value>} <length>,
<percentage>,
auto
padding $*
<selector>{padding:<value>}
<length>*,
<percentage>*,
(sequence: t r b
l)
padding-top*
<selector>{padding-
<length>*,
top:<value>}
<percentage>*
padding-right*
<selector>{padding-
<length>*,
right:<value>}
<percentage>*
padding-bottom*
<selector>{padding-
<length>*,
bottom:<value>}
<percentage>*
padding-left*
<selector>{padding-left:<value>} <length>*,
<percentage>*
border-color*
<selector>{border-
<color>*
color:<value>}
border-style*
<selector>{border-
solid*, double*,
style:<value>}
groove*, ridge*,
inset*, outset*
border $*
<selector>{border:<value>}
<border-
width>*,
<border-style>*,
<color>
Block-level and Replaced Elements
width
<selector>{width:<value>}
<length>,
<percentage>,
auto
height
<selector>{height:<value>}
<length>, auto
float
<selector>{float:<value>}
left, right
clear
<selector>{clear:<value>}
none, left*,
right*
Position (CSS - P)
Name of
Property
Rule syntax
Possible values
position
<selector>{position:<value>}
absolute,
relative
top
<selector>{top:<value>}
<length>,
<percentage>,
auto
left
<selector>{left:<value>}
<length>,
<percentage>,
auto
visibility
<selector>{visibility:<value>}
hidden, visible,
inherit
z-index
<selector>{z-index:<value>}
<number>, auto
overflow
<selector>{overflow:<value>}
visible, hidden,
auto
* = Not supported on IE 4/Mac
** = Buggy on IE 4/Mac
~ = Partially supported on IE 4/Mac
~~ = Partially supported on all 4 browsers
$ = Shorthand Property
Individual Properties
Style rules
Comments
p
{font-family: Of those
Helvetica, Geneva; listed, the
first
available
font will be
applied.
font-style: italic; Text will be
rendered
as italic.
font-weight: bold; Text will be
rendered
as bold.
font-size: 10pt; Text will be
rendered
as 10-point
type.
color: #00FFFF; Text will be
rendered to
the hex
color value
#00FFFF.
background-color: The
blue; element's
background
color will be
rendered
as blue.
background- The
image: element will
url(images/foo.gif)} have the
background
image(s)
specified.
.foo
{text-decoration: Text in the
underlined} class "foo"
will be
underlined.
{text-transform: Text in the
lowercase} class "foo"
will be
rendered
as
lowercase.
#foo {text-align: center} Text with
the ID "foo"
will be
center-
aligned.
{text-indent: 1em} Text with
the ID "foo"
will be
indented 1
em.
p
{margin-top: 12px; The
element's
top margin
will be 12
pixels.
margin-bottom: The
18px; element's
bottom
margin will
be 18
pixels.
padding-right: 8pt; The
element's
right
padding will
be 8 points.
padding-left: 4pt} The
element's
left padding
will be 4
points.
body {border-color: red; Borders will
be red.
border-style: Borders will
solid} be solid.
Block-level and replaced elements
Add New Comment