Scribd
Upload
41 views

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

The document discusses CSS (Cascading Style Sheets) and how it can be used to style HTML documents. It describes three ways to apply CSS styles: inline, internal, and external. It then provides examples of CSS properties for controlling dimensions, borders, captions, and layouts of tables.

Uploaded by

junjun_segura
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
41 views

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

The document discusses CSS (Cascading Style Sheets) and how it can be used to style HTML documents. It describes three ways to apply CSS styles: inline, internal, and external. It then provides examples of CSS properties for controlling dimensions, borders, captions, and layouts of tables.

Uploaded by

junjun_segura
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 30

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

You might also like