Professional Documents
Culture Documents
Objectives:
Prepared by:
Amelita M. Santos, MAEd-CAI
What is CSS?
<style type="text/css">
h1,h2,h3,h4,h5,h6
{
color:blue;
font-family: arial;
text-align: center
}
HTML Code CSS Code
<html> <html>
<head> <head>
<title>My first Web page</title> <style type="text/css">
</head> H1 {
<body> font-weight: bold;
<h1>This is Header 1</h1> font-size: 10pt;
<h2>This is Header 2 </h2> line-height: 12pt;
<p>This is a paragraph</p> font-family: arial
</body> }
</html> </style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
Font-style
The 'font-style' property can be selected between
normal, italic and oblique faces within a font
family.
<html>
<head>
<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>
<body bgcolor=“yellow”>
<h1>Black and White Processing</h1>
<h2>Digital Camera Media</h2>
<p>Diskette, CD, Zip to print</p>
</body>
</html>
<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p class="normal">Black and White
Processing</p>
<p class="small">Digital Camera
Media</p>
</body>
</html>
Font-family
HTML Code
My Unordered List:
<ul>
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
CSS Code
<style type="text/css">
ul{list-style-type}
</style>
</head>
<body>
<ul>
My Unordered List
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
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>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
Set an image as the background
<html>
<head><title> AMSantos CSS
Notes</title>
<style type="text/css">
body {
background-image:
url('back.jpg')
}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color:
rgb(250,0,255)}
</style> </head>
<body>
<h1>This is header 1<br>
with Background Image</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
How to place the background image
<html>
<head>
<style type="text/css">
body
{ background-image:url('Baby_angel2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; }
</style> </head>
<body>
<p><b>Note:</b> For this to work in Mozilla,
the background-attachment property must
be set to "fixed".</p>
<p> x x x x x x************************
x x x x x x </p>
<h1> Sample of single background image
</h1>
</body> </html>
Specify Spaces
<html> <h3 align=center>
<head> Specify the space between lines</h3>
<style type="text/css"> <p>
h1 {letter-spacing: -4px} This is a paragraph with a standard line-
h4 {letter-spacing: 0.5cm} height.
p.small {line-height: 90%}
<br>The default line height in most
p.big {line-height: 200%}
</style> browsers is about 110% to 120%.
</head> </p>
<p class="small">
<body>
This is a paragraph with a smaller line-
<h3 align=center>
height.
Specify the space between characters
This is a paragraph with a smaller line-
</h3>
height.
<h1>This is header 1</h1>
</p>
<h4>This is header 4</h4>
</body>
<html>
<head>
Text Alignment and
<style type="text/css"> Decoration
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
</head>
<body bgcolor="#11bbee">
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
</body>
</html>
Indent text & Control the letters in a text
<html>
<head>
<style type="text/css">
p {text-indent: 1.5cm}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style> </head>
<body bgcolor=pink><p>
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph WITH INDENTION
</p>
<p class="uppercase">This is some text in a
paragraph in uppercase</p>
<p class="lowercase">This is some text in a
paragraph in lowercase</p>
<p class="capitalize">This is some text in a
paragraph as capitalize</p>
</body> </html>
Different FONT Styles
<html>
<head>
<style type="text/css">
h3 {font-family: tahoma}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style> </head>
<body bgcolor=#efbc11">
<h2> Use of Different Font Styles:
default
<br>Times new roman </h2>
<h3>This is header 3- tahoma</h3>
<p>This is a paragraph- courier</p>
<p class="sansserif">This is a
paragraph- sans-serif</p>
</body>
</html>
Borders
<html>
<head>
<style type="text/css">
p { border: medium double rgb(200,250,100)}
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}
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>
Border Styles
<body bgcolor="#66bbcc">
<h3> Border Styles</h3>
<p>Some text</p>
<p class="soliddouble">Some text</p>
<p class="doublesolid">Some text</p>
<p class="groovedouble">Some text</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>
<p class="three">Some text</p>
<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>
</body>
</html>
<html> <head>
<style type="text/css">
p.one
{ border-style: solid;
border-color: #0000ff }
p.two
{ border-style: solid;
border-color: #ff0000 #0000ff }
p.three
{ border-style: solid;
border-color: #ff0000 #00ff00 #0000ff }
p.four
{ border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) }
</style> </head>
<body bgcolor="#c3c3ee">
<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>
<h3><font face="arial"><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.</h3>
</body> </html>