Web Development Course: CSS, or Cascading Styles Sheets, Is A Way To Style

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
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

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.
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
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

010101010101010101011111010101110101010101

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
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
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
010101010101010101011111010101110101010101

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
Set the minimum width of an element using percent
This example demonstrates how to set the minimum width of an element
010101010101010101011111010101110101010101
010101010101010101011111010101110101010101

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
paragraph using a pixel value.
Specify the space between lines using a number value
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
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

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
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
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

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.

010101010101010101011111010101110101010101
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

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
010101010101010101011111010101110101010101

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
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
010101010101010101011111010101110101010101

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
Set the top edge of an image using a percent value

This example demonstrates how to set the top edge of an element
010101010101010101011111010101110101010101
010101010101010101011111010101110101010101

010101010101010101011111010101110101010101
Set the bottom edge of an image using a pixel value

This example demonstrates how to set the bottom edge of an element
Set the bottom edge of an image using a percent value

This example demonstrates how to set the bottom edge of an element
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
010101010101010101011111010101110101010101

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
Set the right edge of an image using a percent value

This example demonstrates how to set the right edge of an element
010101010101010101011111010101110101010101
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.

010101010101010101011111010101110101010101
010101010101010101011111010101110101010101
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
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
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
010101010101010101011111010101110101010101

010101010101010101011111010101110101010101

Web Development Course: CSS, or Cascading Styles Sheets, Is A Way To Style

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Development Course: CSS, or Cascading Styles Sheets, Is A Way To Style

Uploaded by

Copyright:

Available Formats

010101010101010101011111010101110101010101

Army Management Information Center

Web Development Course

CSS, or Cascading Styles Sheets, is a way to style

Web Development Course

• Web pages are reduced to size, making download

Web Development Course

• Presentation information for an entire website or

Web Development Course

• There are three ways to apply CSS to HTML

This will make that specific paragraph red.

Web Development Course

Web Development Course

Web Development Course

If this file is saved as "web.css" then it can be linked to

Web Development Course

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Web Development Course 010101010101010101011111010101110101010101

Property Description Values

caption-side Sets the position of the table caption top

Web Development Course 010101010101010101011111010101110101010101

Web Development Course

Set the maximum height of an elementThis example demonstrates how to

Web Development Course

Specify the space between lines using a percent value

CSS Dimension Properties

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

Web Development Course 010101010101010101011111010101110101010101

Property Description Values

Web Development Course

Web Development Course010101010101010101011111010101110101010101

An image with a caption that floats to the right

Web Development Course

Web Development Course

CSS Classification Properties

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

Web Development Course 010101010101010101011111010101110101010101

Property Description Values

Web Development Course

display Sets how/if an element is none

Web Development Course

float Sets where an image or left

position Places an element in a static

visibility Sets if an element should visible

Web Development Course

Web Development Course 010101010101010101011111010101110101010101

Set the shape of an element

How to show overflow in an element using scroll

How to hide overflow in an element

How to show set the browser to automatically handle overflow

Web Development Course

Vertical alignment of an image

Set the top edge of an image using a pixel value

Set the top edge of an image using a percent value

Web Development Course

Set the bottom edge of an image using a pixel value

Set the bottom edge of an image using a percent value

Set the left edge of an image using a pixel value

Web Development Course

Set the left edge of an image using a percent value

Set the right edge of an image using a pixel value

Set the right edge of an image using a percent value

Web Development Course010101010101010101011111010101110101010101