010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
CSS, or Cascading Styles Sheets, is a way to style
HTML. Whereas the HTML is the content, the style
sheet is the presentation of that document.
Styles don't smell or taste anything like HTML, they
have a format of 'property: value' and most properties
can be applied to most HTML tags.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
• Web pages are reduced to size, making download
times , in turn using less bandwidth.
• Compatibility with user agents is increased, making
sites more accessible.
• Sites built with web standards are future-proof.
• Allows for separation of content from presentation.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
• Presentation information for an entire website or
collection of pages can be held in one CSS file,
Allowing sweeping changes to be propagated with
quick changes to this one file.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
• There are three ways to apply CSS to HTML
In-line
In-line styles are plunked straight into the HTML tags
using the style attribute.
They look something like this:
<p style="color: red">text</p>
This will make that specific paragraph red.
But, if you remember, the best-practice approach is that the HTML
should be a stand-alone, presentation free document, and so in-
line styles should be avoided wherever possible.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
Internal
Embedded, or internal styles are used for the whole
page. Inside the head tags, the style tags surround all
of the styles for the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>CSS Example</title>
<style type="text/css">
p { color: red;
}
a{
color: blue;
}
</style>
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
Internal
Embedded, or internal styles are used for the whole
page. Inside the head tags, the style tags surround all
of the styles for the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>CSS Example</title>
<style type="text/css">
p { color: red;
}
a{
color: blue;
}
</style>
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
External
External styles are used for the whole, multiple-page
website. There is a separate CSS file, which will
simply look something like:
p { color: red;
}
a { color: blue;
}
If this file is saved as "web.css" then it can be linked to
in the HTML like this:
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course 010101010101010101011111010101110101010101
Property Description Values
border-collapse Sets whether the table borders are collapsed into a collapse
single border or detached as in standard HTML separate
border-spacing Sets the distance that separates cell borders (only for length length
the "separated borders" model)
caption-side Sets the position of the table caption top
bottom
left
right
empty-cells Sets whether or not to show empty cells in a table show
(only for the "separated borders" model) hide
table-layout Sets the algorithm used to display the table cells, auto
rows, and columns fixed
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course 010101010101010101011111010101110101010101
CSS Dimension
The CSS dimension properties allow you to control the height and width
of an element. It also allows you to increase the space between two
lines.
Examples
Set the height of an image using a pixel value
This example demonstrates how to set the height of an element using a pixel
value.
Set the height of an image using percent
This example demonstrates how to set the height of an element using a percent
value.
Set the width of an element using a pixel value
This example demonstrates how to set the width of an element using a pixel
value.
Set the width of an element using percent
This example demonstrates how to set the width of an element using a percent
value.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
Set the maximum height of an elementThis example demonstrates how to
set the maximum height of an element.
Set the maximum width of an element using a pixel value
This example demonstrates how to set the maximum width of an element
using a pixel value.
Set the maximum width of an element using percent
This example demonstrates how to set the maximum width of an element
using a percent value.
Set the minimum height of an element
This example demonstrates how to set the minimum height of an element.
Set the minimum width of an element using a pixel value
This example demonstrates how to set the minimum width of an element
using a pixel value.
Set the minimum width of an element using percent
This example demonstrates how to set the minimum width of an element
using a percent value.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
Specify the space between lines using a percent value
This example demonstrates how to specify the space between the lines in a
paragraph using a percent value.
Specify the space between lines using a pixel value
This example demonstrates how to specify the space between the lines in a
paragraph using a pixel value.
Specify the space between lines using a number value
This example demonstrates how to specify the space between the lines in a
paragraph using a number value.
CSS Dimension Properties
The CSS dimension properties allow you to control the height and width of an
element. It also allows you to increase the space between two lines.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course 010101010101010101011111010101110101010101
Property Description Values
height Sets the height of an element auto
length
%
line-height Sets the distance between lines normal
number
length
%
max-height Sets the maximum height of an element none
length
%
max-width Sets the maximum width of an element none
length
%
min-height Sets the minimum height of an element length
%
min-width Sets the minimum width of an element length
%
width Sets the width of an element auto
%
length
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
CSS Classification
The CSS classification properties allow you to specify how and where to
display an element.
Examples
How to display an element as an inline element.
This example demonstrates how to display an element as an inline element.
How to display an element as a block element
This example demonstrates how to display an element as a block element.
A simple use of the float property
Let an image float to the right in a paragraph.
An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the
image.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course010101010101010101011111010101110101010101
An image with a caption that floats to the right
Let an image with a caption float to the right.
Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.
Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.
Creating a homepage without tables
Use float to create a homepage with a header, footer, left content and main
content.
Position:relative
This example demonstrates how to position an element relative to its
normal position.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
Position:absolute
This example demonstrates how to position an element using an absolute
value.
How to make an element invisible
This example demonstrates how to make an element invisible. Do you want
the element to show or not?
How to make a table element collapse
This example demonstrates how to make a table element collapse.
Change the cursor
This example demonstrates how to change the cursor.
Clear the sides of an element
This example demonstrates how clear the sides of other floating elements.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
CSS Classification Properties
The CSS classification properties allow you to control how to display
an element, set where an image will appear in another element,
position an element relative to its normal position, position an
element using an absolute value, and how to control the visibility of
an element.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course 010101010101010101011111010101110101010101
Property Description Values
clear properties allow you to specify how and where left
to display an element. right
both
none
cursor Specifies the type of cursor to be displayed url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
display Sets how/if an element is none
displayed inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
float Sets where an image or left
a text will appear in right
another element none
position Places an element in a static
static, relative, absolute relative
or fixed position absolute
fixed
visibility Sets if an element should visible
be visible or invisible hidden
collapse
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
CSS Positioning
The CSS positioning properties allows you to position an element.
Examples
Position:relative
This example demonstrates how to position an element relative to its
normal position.
Position:absolute
This example demonstrates how to position an element using an absolute
value.
Position:fixed
This example demonstrates how to position an element with relative to the
browser window.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course 010101010101010101011111010101110101010101
Set the shape of an element
This example demonstrates how to set the shape of an element.
The element is clipped into this shape, and displayed.
How to show overflow in an element using scroll
This example demonstrates how to set the overflow property to
create a scroll bare when an element's content is too big to fit in a
specified area.
How to hide overflow in an element
This example demonstrates how to set the overflow property to hide
the content if it is too big to fit in a specified area.
How to show set the browser to automatically handle overflow
This example demonstrates how to set the browser to automatically
handle overflow.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
Vertical alignment of an image
This example demonstrates how to set the vertical align of an image in
a text.
Z-index
Z-index can be used to place an element "behind" another element.
Z-index
The elements in the example above have now changed their Z-index.
Set the top edge of an image using a pixel value
This example demonstrates how to set the top edge of an element
using a pixel value.
Set the top edge of an image using a percent value
This example demonstrates how to set the top edge of an element
using a percent value.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
Set the bottom edge of an image using a pixel value
This example demonstrates how to set the bottom edge of an element
using a pixel value.
Set the bottom edge of an image using a percent value
This example demonstrates how to set the bottom edge of an element
using a percent value.
Set the left edge of an image using a pixel value
This example demonstrates how to set the left edge of an element using a
pixel value.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
Set the left edge of an image using a percent value
This example demonstrates how to set the left edge of an element using
a percent value.
Set the right edge of an image using a pixel value
This example demonstrates how to set the right edge of an element
using a pixel value.
Set the right edge of an image using a percent value
This example demonstrates how to set the right edge of an element
using a percent value.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course010101010101010101011111010101110101010101
CSS Positioning Properties
The CSS positioning properties allow you to specify the left, right,
top, and bottom position of an element. It also allows you to set the
shape of an element, place an element behind another, and to
specify what should happen when an element's content is too big
to fit in a specified area.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course 010101010101010101011111010101110101010101
Property Description Values
bottom Sets how far the bottom edge of an element is auto
above/below the bottom edge of the parent %
element length
clip Sets the shape of an element. The element is shape
clipped into this shape, and displayed auto
left Sets how far the left edge of an element is to auto
the right/left of the left edge of the parent %
element length
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course 010101010101010101011111010101110101010101
overflow Sets what happens if the content of an visible
element overflow its area hidden
scroll
auto
position Places an element in a static, relative, static
absolute or fixed position relative
absolute
fixed
right Sets how far the right edge of an element is to auto
the left/right of the right edge of the parent %
element length
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course 010101010101010101011111010101110101010101
top Sets how far the top edge of an element is auto
above/below the top edge of the parent %
element length
vertical-align Sets the vertical alignment of an element baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index Sets the stack order of an element auto
number
010101010101010101011111010101110101010101
Army Management Information Center
010101010101010101011111010101110101010101
Web Development Course
010101010101010101011111010101110101010101
