You are on page 1of 24

Cascading Style Sheet

Objectives:

 To learn how to declare CSS.

 To differentiate HTML code to CSS


code.

 To create a sample CSS codes and


display its output.

Prepared by:
Amelita M. Santos, MAEd-CAI
What is CSS?

CSS offers much more flexibility in terms of the


presentation effects that they provide. Properties
such as color, background, margin, border and
many more can be applied to all elements.
Style sheets also form an integral part of
dynamic HTML as they can be accessed and
changed on-the-fly by scripting languages

At the time of writing, style sheets are at least


partially supported by Microsoft Internet Explorer
3 upwards, Netscape Navigator 4 upwards and
Opera 3.5 upwards.
The style sheet can be written in any text editor.
The file should contain any HTML tags like <HEAD>,
<STYLE> such as:
HTML Code
CSS Code
<html>
<head>
<head>
<style type="text/css"> <style type="text/css">
: hr {color: sienna}
</style> p {margin-left: 20px}
body {background-image:
</head> url(“angel2.jpg")}
<body> </style>
: </head>
:
</body>
</html>
Grouping

In order to decrease repetitious statements within


style sheets, grouping of selectors and
declarations is allowed. For example, all of the
headings in a document could be given identical
declarations through a grouping separated by
commas, thus:

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

See Output on the NEXT


slide
The Output
Font-variant

Another type of variation within a font family is


the small-caps. In a small-caps font the lower
case letters look similar to the uppercase ones,
but in a smaller size and with slightly different
proportions.

The 'font-variant' property selects that font and


be used normal instead of small.
Example of Font-variant

<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

The value is a prioritized list of font family names


and/or generic family names. To indicate that they
are alternatives, values are separated by a
comma.
<html>
<head>
<style type="text/css">
h3 {font-family: Arial}
p {font-family: courier}
</style>
</head>
<body>
<h3>Black and White Processing</h3>
<p>Digital Camera Media</p>
</body>
</html>
List-item

Many web pages display lists of items -- these may


be items preceded with a "bullet" (Unordered) or a
sequentially numbered list (Ordered).

Unordered Lists, or <ul> .. </ul> tags, are ones


that appear as a list of items with "bullets" or
markers in the front. The bullet marks will depend
on the particular version of your web browser
Here is an example of an unordered list in
HTML:

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>