CSS Hand Outs

HAND OUTS IN WEBDEV
CONTROLLING TYPOGRAPHY WITH CASCADING STYLE SHEETS (CSS)
Cascading Style Sheets (CSS) offer much greater control over type
characteristics that does the <font> element. You can use standard type
conventions, such as using point or pixel sizes, setting leading and specifying
indents and alignment.
CSS is based on rules that select on HTML element and declare style
characteristics for the element. You can state sets of rules, known as style
sheets, in the head section of an HTML document or include them in a
separate document known as external style sheet. Use external style
sheets to set rules when working with a number of HTML documents.
Understanding Style Rules
Style sheet rules are easy to interpret. The style rules are contained in the
<STYLE> element in the document’s head section.
Example:
<head><title>Sample Document</title>
<style>
p {color: blue; font-size: 24 pt}
</style>
</head>
This rule sets all <p> elements in the document to blue 24 pt text. Style
rules are composed of two parts: a Selector and a declaration. The selector
determines the element to which the rule is applied. The declaration details
the exact property values.
Example:
H1 { color: red}
H1 ---- selector
Color: red ----- declaration
The declaration contains a PROPERTY and a VALUE. The property is the

quality or characteristic. The precise specification of the property is contained
in the VALUE. CSS includes over 50 properties, each with a specific number
of values.
You must include all CSS rules within a <style> element, or define them
using a style attribute.
Example:
<head><title> Sample Document </title>

<style type = “text/css”>
h1{color: red}
</style>
</head>
Alternately, you can define the style for a single <h1> element using the
STYLE attribute.
Prepared by: Mr. HYB

HAND OUTS IN WEBDEV
<h1 style = “color: blue”> Some Text </h1>
Linking to an External Style Sheet
Placing style sheets in an external document lets you specify rules for
different HTML documents. This is an easy and powerful way to use
stylesheets.
An external style sheet is a text document with a .css extension that

contains the style rules.
Example:
/*StyleSheet #1*/
body{color:red}
h1{color:green}
h2{color:green; border: solid blue}
Note: The stylesheet file contains no HTML code, only css style rules. To link
to this external style sheet, add the <link> element within the head section
of any HTML files.
Example:
<head>
<title> Sample Document </title>
<link href=”style1.css” rel=”stylesheet”>
</head>
CSS SELECTION TECHNIQUES
The power in css comes from the different methods of selecting elements.
You can choose from a variety of selection methods including:
1. Selecting multiple elements.

2. Selecting by context.
3. Selecting with a CLASS attribute.
More complex selection involves the creation of artificial division, using two
elements designed expressly for css:
1. <DIV> - block division

2. <span> -- inline division
Example:
Selecting Multiple Elements
<style type=”text/css”>
h1,h2{color:green}
</style>
Selecting By Context
h1 I{color:blue}
</style>

HAND OUTS IN WEBDEV
Selecting with a CLASS attribute
Note:
The class attribute lets you write rules and then apply them to groups
of elements that you have classified. Basically, the class attribute lets you
define your own tags and then apply them anywhere you want.
To create CLASS, first declare it within the <style> element. The

period (.) flag character indicates that the selector is a class selector.
Ex:
.Quote{color:red}
.Quote{color:red}
</style>
Use the class attribute in the document:
<p class=”Quote”> Some text </p>
WORKING WITH THE <DIV> ELEMENT
The <DIV> element lets you specify logical divisions within a document that
have their own name and style properties. <DIV> is a block level element
that contains a leading and trailing carriage return. You can use the <div>
element with the class attribute to create customized block level element.
Example:
<style type =”text/css”>

DIV.INTRO{color:red}
</style>
then specify the <div> element in the document
<div class=”INTRO”> Some Text </div>
WORKING WITH THE SPAN ELEMENT
The <span> element lets you specify inline elements within the document
that have their own name and properties. Place inline elements within a line
of text, like the <b> or <i> elements.
Examples of CSS:
1. The HTML file below links to an external style sheet with the <link>
tag:
<html>
<head>
<link rel="stylesheet"

HAND OUTS IN WEBDEV
type="text/css" href="ex1.css" />

</head>
<body>
<h1>This header is 36 pt</h1>

<h2>This header is blue</h2>
<p>This paragraph has a left

margin of 50 pixels</p>
</body>
</html>

This is the style sheet file (ex1.css):
body {background-color: yellow}

h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
This is the output:
This header is 36 pt
This header is blue
This paragraph has a left margin of 50 pixels
2. The HTML file below links to an external style sheet with the <link> tag:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="ex2.css" />
</head>
<body>
<h1>This is a header 1</h1>

<hr />
<p>You can see that the style

sheet formats the text</p>
<p><a href="http://www.w3schools.com"
target="_blank">This is a link</a></p>
</body>
</html>


HAND OUTS IN WEBDEV
This is the style sheet file (ex2.css):
body {background-color: tan}

h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
3. Set the background color
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>

<p>This is a paragraph</p>
</body>
</html>
4. Image as the background
<html>
<head>
body
{
background-image:
url('bgdesert.jpg')
}
</style>
</head>
<body>
</body>
</html>

HAND OUTS IN WEBDEV
5. How to position a background image using %.
<html>
<head>
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 30% 20%;
}
</style>
</head>
<body>
</body>
</html>
CSS Background Properties
The CSS background properties allow you to control the background color of
an element, set an image as the background, repeat a background image
vertically or horizontally, and position an image on a page.
Browser support: Internet Explorer, Firefox, Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the
property is defined (CSS1 or CSS2).
Property Description Values

background A shorthand property background-color
for setting all background-
background image
properties in one background-
declaration repeat
background-
attachment
background-
position
background- Sets whether a scroll
attachment background image is fixed
fixed or scrolls with
the rest of the page
background-color Sets the background color-rgb
color of an element color-hex
color-name
transparent
background- Sets an image as the url(URL)
image background none
background- Sets the starting top left
position position of a top center
background image top right
center left
center center
center right
bottom left

HAND OUTS IN WEBDEV
bottom center
bottom right
x% y%
xpos ypos
background- Sets if/how a repeat
repeat background image repeat-x
will be repeated repeat-y
no-repeat
Example 6. Set the color of the text
<html>
<head>
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
</body>
</html>
Example # 7. Set the background color of the text.
<html>
<head>
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="highlight">This is a text.</span> This is a text.
This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. <span
class="highlight">This is a text.</span>
</p>
</body>

HAND OUTS IN WEBDEV
</html>
Example # 8: Specify space between lines.
<html>
<head>
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
Example #9. Align Text
<html>
<head>
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
</body>
</html>

HAND OUTS IN WEBDEV
Example # 10. Decorate text
<html>
<head>
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</style>
</head>
<body>
<p><a href="http://www.w3schools.com/default.asp">This is a
link</a></p>
</body>
</html>
Example # 11. Indent Text
<html>
<head>
p {text-indent: 1cm}
</style>
</head>
<body>
<p>
This is some text in a paragraph
</p>
</body>
</html>
Example #12. Controls the letters in the text.
<html>
<head>
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<p class="uppercase">This is some text in a paragraph</p>
<p class="lowercase">This is some text in a paragraph</p>

HAND OUTS IN WEBDEV
<p class="capitalize">This is some text in a paragraph</p>

</body>
</html>
Example #13. Set the text direction of the element.
<html>
<head>
div.one
{
direction: rtl
}
div.two
{
direction: ltr
}
</style>
</head>
<body>
<div class="one">Some text. Right-to-left direction.</div>

<div class="two">Some text. Left-to-right direction.</div>
</body>
</html>
Example #14. Increase white space between words.
<html>
<head>
p
{
word-spacing: 30px
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html>

HAND OUTS IN WEBDEV
Example #15. Disable text wrapping inside an element
<html>
<head>
p
{
white-space: nowrap
}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
</p>
</body>
</html>
CSS Text Properties
The CSS text properties allow you to control the appearance of text. It is
possible to change the color of a text, increase or decrease the space
between characters in a text, align a text, decorate a text, indent the first
line in a text, and more.
W3C: The number in the "W3C" column indicates in

which CSS recommendation the property is defined
(CSS1 or CSS2).
color Sets the color of a color

text
direction Sets the text direction ltr

rtl
line-height Sets the distance normal

between lines number
length
%
letter-spacing Increase or decrease normal

the space between length
characters

HAND OUTS IN WEBDEV
text-align Aligns the text in an left

element right
center
justify
text-decoration Adds decoration to none

text underline
overline
line-through
blink
text-indent Indents the first line length

of text in an element %
text-shadow none
color
length
text-transform Controls the letters in none

an element capitalize
uppercase
lowercase
unicode-bidi normal
embed
bidi-override
white-space Sets how white space normal

inside an element is pre
handled nowrap
word-spacing Increase or decrease normal

the space between length
words
CSS Font Properties
The CSS font properties allow you to change the font family, boldness, size,
and the style of a text.
Note: In CSS1 fonts are identified by a font name. If a browser does not
support the specified font, it will use a default font.
W3C: The number in the "W3C" column indicates in which CSS

recommendation the property is defined (CSS1 or CSS2).

HAND OUTS IN WEBDEV
font A shorthand property font-style

for setting all of the font-variant
properties for a font font-weight
in one declaration font-size/line-
height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family A prioritized list of family-name
font family names generic-family
and/or generic family
names for an element
font-size Sets the size of a font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-size-adjust Specifies an aspect none
value for an element number
that will preserve the
x-height of the first-
choice font
font-stretch Condenses or normal
expands the current wider
font-family narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Sets the style of the normal
font italic
oblique
font-variant Displays text in a normal
small-caps font or a small-caps
normal font
font-weight Sets the weight of a normal
font bold
bolder
lighter
100

HAND OUTS IN WEBDEV
200
300
400
500
600
700
800
900
Examples:
1. Set the font of text.
<html>
<head>
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>
<body>
<p class="sansserif">This is a paragraph</p>
</body>
</html>
2. Set the size of the font.
<html>
<head>
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
</style>

HAND OUTS IN WEBDEV
</head>
<body>
</body>
</html>
3. Set the style of the font.
<html>
<head>
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>
<body>
</body>
</html>
4. Set the variant of font.
<html>
<head>
p.normal {font-variant: normal}

HAND OUTS IN WEBDEV
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
</html>
5. Set the boldness of the font.
<html>
<head>
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="thick">This is a paragraph</p>
<p class="thicker">This is a paragraph</p>
</body>
</html>
CSS Border Properties

The CSS border properties allow you to specify the style and color of
an element's border. In HTML we use tables to create borders around

HAND OUTS IN WEBDEV
a text, but with the CSS border properties we can create borders with
nice effects, and it can be applied to any element.

border A shorthand border-width
property for setting border-style
all of the properties border-color
for the four borders
in one declaration
border-bottom A shorthand border-bottom-
property for setting width
all of the properties border-style
for the bottom border-color
border in one
declaration
border-bottom- Sets the color of the border-color
color bottom border
border-bottom- Sets the style of the border-style
style bottom border
border-bottom- Sets the width of thin
width the bottom border medium
thick
length
border-color Sets the color of the color
four borders, can
have from one to
four colors
border-left A shorthand border-left-
for the left border in border-color
one declaration
border-left-color Sets the color of the border-color
left border
border-left-style Sets the style of the border-style
left border
border-left- Sets the width of thin
width the left border medium
thick
length
border-right A shorthand border-right-

HAND OUTS IN WEBDEV
for the right border border-color

in one declaration
border-right- Sets the color of the border-color
color right border
border-right- Sets the style of the border-style
style right border
border-right- Sets the width of thin
width the right border medium
thick
length
border-style Sets the style of the none
four borders, can hidden
have from one to dotted
four styles dashed
solid
double
groove
ridge
inset
outset
border-top A shorthand border-top-
for the top border in border-color
one declaration
border-top-color Sets the color of the border-color
top border
border-top-style Sets the style of the border-style
top border
border-top- Sets the width of thin
width the top border medium
thick
length
border-width A shorthand thin
property for setting medium
the width of the thick
four borders in one length
declaration, can
have from one to
four values

HAND OUTS IN WEBDEV
Examples:
1. This example demonstrates a shorthand property for setting all of the

properties for the four borders in one declaration, can have from one to
three values.
<html>
<head>
border: medium double rgb(250,0,255)
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
2. Set the different borders on each side.

HAND OUTS IN WEBDEV
<html>
<head>
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>
<body>
<p class="soliddouble">Some text</p>
<p class="doublesolid">Some text</p>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body>
</html>
3. Set the style of the four borders.
<html>
<head>
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>

HAND OUTS IN WEBDEV
<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="inset">An inset border</p>
<p class="outset">An outset border</p>
</body>
</html>
4. Set the color of the four borders
<html>
<head>
p.one
border-style: solid;
border-color: #0000ff
p.two
border-color: #ff0000 #0000ff
p.three

HAND OUTS IN WEBDEV
border-color: #ff0000 #00ff00 #0000ff
p.four
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it

is used alone. Use the "border-style" property to set the borders
first.</p>
</body>
</html>
CSS Margin Properties

The CSS margin properties define the space around elements. It is
possible to use negative values to overlap content. The top, right,
bottom, and left margin can be changed independently using separate
properties. A shorthand margin property can also be used to change all
of the margins at once.
Note: Netscape and IE give the body tag a default margin of 8px.
Opera does not! Instead, Opera applies a default padding of 8px, so if
one wants to adjust the margin for an entire page and have it display
correctly in Opera, the body padding must be set as well!

margin A shorthand margin-top

HAND OUTS IN WEBDEV
property for setting margin-right

the margin margin-bottom
properties in one margin-left
declaration
Sets the bottom auto
margin-bottom margin of an length
element %
Sets the left margin auto
margin-left of an element length
%
Sets the right auto
margin-right margin of an length
element %
margin-top Sets the top margin auto
of an element length
%
Examples
1. All the margin properties in one declaration.
<html>
<head>
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>
2. Set the right margin of a text using the percent value.
<html>
<head>

HAND OUTS IN WEBDEV
p.rightmargin
margin-right:25%
</style>
</head>
<body>
<p style="text-align:right">This is a right aligned paragraph

with no margin specified</p>
<p class="rightmargin" style="text-align:right">This is a right

aligned paragraph with a specified right margin</p>
</body>
</html>
CSS List
The CSS list properties allow you to place the list-item marker, change
between different list-item markers, or set an image as the list-item
marker.
CSS List Properties
The CSS list properties allow you to place the list-item marker, change
between different list-item markers, or set an image as the list-item
marker.
W3C: The number in the "W3C" column indicates in which CSS

recommendation the property is defined (CSS1 or CSS2).

list-style A shorthand list-style-type
property for setting list-style-
all of the properties position
for a list in one list-style-image
declaration
list-style-image Sets an image as none
the list-item marker url

HAND OUTS IN WEBDEV
list-style- Sets where the list- inside

position item marker is outside
placed in the list
list-style-type Sets the type of the none
list-item marker disc
circle
square
decimal
decimal-leading-
zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
marker-offset auto
length
Examples:
1. The different list item markers in unordered lists.
<html>
<head>
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">

HAND OUTS IN WEBDEV
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
2. The different list items in the ordered lists.
<html>
<head>
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}

HAND OUTS IN WEBDEV
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="lroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="uroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="lalpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="ualpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>

HAND OUTS IN WEBDEV
</html>
3. All the list style types.
<html>
<head>
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
</head>
<body>
<ul class="disc">
<li>Disc type</li>

HAND OUTS IN WEBDEV
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="circle">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="none">
<li>The "none" type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="decimal">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="decimal-leading-zero">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="lower-roman">

HAND OUTS IN WEBDEV
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="upper-roman">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="lower-alpha">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="upper-alpha">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="lower-greek">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="lower-latin">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

HAND OUTS IN WEBDEV
<ul class="upper-latin">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="hebrew">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="armenian">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="georgian">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="cjk-ideographic">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="hiragana">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

HAND OUTS IN WEBDEV
<ul class="katakana">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="hiragana-iroha">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="katakana-iroha">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
4. Place the list item marker.
<html>
<head>
ul.inside
list-style-position: inside
ul.outside
list-style-position: outside
</style>

HAND OUTS IN WEBDEV
</head>
<body>
<p>This list has a list-style-position with a value of

"inside":</p>
<ul class="inside">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>
<p>This list has a list-style-position with a value of

"outside":</p>
<ul class="outside">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>
</body>
</html>
5. All list properties in one declaration
<html>
<head>
ul
list-style: square inside url('arrow.gif')
</style>
</head>
<body>
<ul>
<li>Coffee</li>

HAND OUTS IN WEBDEV
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
CSS Table
The CSS table properties allow you to set the layout of a table.
CSS Table Properties
The CSS table properties allow you to set the layout of a table.
Browser support: Internet Explorer, Mac IE only, Firefox, N:

Netscape.

border-collapse Sets whether the collapse
table borders are separate
collapsed into a
single border or
detached as in
standard HTML
border-spacing Sets the distance length length
that separates cell
borders (only for
the "separated
borders" model)
caption-side Sets the position of top
the table caption bottom
left
right
empty-cells Sets whether or not show
to show empty cells hide
in a table (only for
the "separated
borders" model)
table-layout Sets the algorithm auto
used to display the fixed
table cells, rows,
and columns
Examples:

HAND OUTS IN WEBDEV
1. Set the layout of the table.
<html>
<head>
table.one
table-layout: automatic
table.two
table-layout: fixed
</style>
</head>
<body>
<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>

HAND OUTS IN WEBDEV
</table>
</body>
</html>
2. Show empty cells in the table.
<html>
<head>
table
border-collapse: separate;
empty-cells: show
</style>
</head>
<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
3. Collapse a table border.
<html>
<head>

HAND OUTS IN WEBDEV
table.coll
border-collapse: collapse
table.sep
border-collapse: separate
</style>
</head>
<body>
<table class="coll" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br />
<table class="sep" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>

HAND OUTS IN WEBDEV
<td>Griffin</td>
</tr>
</table>
</body>
</html>
4. Set the space between table borders.
<html>
<head>
table.one
border-spacing: 10px
table.two
border-spacing: 10px 50px
</style>
</head>
<body>
<table class="one" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>

HAND OUTS IN WEBDEV
<td>Griffin</td>
</tr>
</table>
<br />
<table class="two" border="1">
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>
</body>
</html>
5. Set the position of the table caption.
<html>
<head>
caption
caption-side:bottom
</style>
</head>
<body>
<table border="1">
<caption>This is a caption</caption>
<tr>

HAND OUTS IN WEBDEV
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

CSS Hand Outs

Uploaded by

Document Information

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

CSS Hand Outs

Uploaded by

Copyright:

Available Formats

HAND OUTS IN WEBDEV

CONTROLLING TYPOGRAPHY WITH CASCADING STYLE SHEETS (CSS)

Understanding Style Rules

The declaration contains a PROPERTY and a VALUE. The property is the

<head><title> Sample Document </title>

Prepared by: Mr. HYB

<h1 style = “color: blue”> Some Text </h1>

Linking to an External Style Sheet

An external style sheet is a text document with a .css extension that

CSS SELECTION TECHNIQUES

1. Selecting multiple elements.

1. <DIV> - block division

Selecting Multiple Elements

Prepared by: Mr. HYB

Selecting with a CLASS attribute

To create CLASS, first declare it within the <style> element. The

Use the class attribute in the document:

<p class=”Quote”> Some text </p>

WORKING WITH THE <DIV> ELEMENT

<style type =”text/css”>

then specify the <div> element in the document

<div class=”INTRO”> Some Text </div>

WORKING WITH THE SPAN ELEMENT

Prepared by: Mr. HYB

type="text/css" href="ex1.css" />

<h1>This header is 36 pt</h1>

<p>This paragraph has a left

This is the style sheet file (ex1.css):

body {background-color: yellow}

This is the output:

<h1>This is a header 1</h1>

<p>You can see that the style

Prepared by: Mr. HYB

This is the style sheet file (ex2.css):

body {background-color: tan}

3. Set the background color

<h1>This is header 1</h1>

4. Image as the background

Prepared by: Mr. HYB

5. How to position a background image using %.

CSS Background Properties

Browser support: Internet Explorer, Firefox, Netscape.

Property Description Values

Prepared by: Mr. HYB

Example 6. Set the color of the text

Example # 7. Set the background color of the text.

Prepared by: Mr. HYB

Example # 8: Specify space between lines.

Example #9. Align Text

Prepared by: Mr. HYB

Example # 10. Decorate text

Example # 11. Indent Text

Example #12. Controls the letters in the text.

<p class="lowercase">This is some text in a paragraph</p>

Prepared by: Mr. HYB

<p class="capitalize">This is some text in a paragraph</p>

Example #13. Set the text direction of the element.

<div class="one">Some text. Right-to-left direction.</div>

Example #14. Increase white space between words.

Prepared by: Mr. HYB

Example #15. Disable text wrapping inside an element

CSS Text Properties

Browser support: Internet Explorer, Firefox, Netscape.

W3C: The number in the "W3C" column indicates in