Web Design and CSS

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>
<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>
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>
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>
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
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>
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style> </head>
<body>
</body>
</html>
Set an image as the background
<html>
<head><title> AMSantos CSS
Notes</title>
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>
</body>
</html>
How to place the background image
<html>
<head>
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.
</p>
</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">
</body>
</html>
Indent text & Control the letters in a text
<html>
<head>
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 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>
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>
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>
p.one
{ border-style: solid;
border-color: #0000ff }
p.two
border-color: #ff0000 #0000ff }
p.three
border-color: #ff0000 #00ff00 #0000ff }
p.four
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>

Web Design and CSS

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Web Design and CSS

Caricato da

Copyright:

Formati disponibili

Cascading Style Sheet

 To learn how to declare CSS.

 To differentiate HTML code to CSS

 To create a sample CSS codes and

CSS offers much more flexibility in terms of the

At the time of writing, style sheets are at least

In order to decrease repetitious statements within

See Output on the NEXT

Another type of variation within a font family is

The 'font-variant' property selects that font and

The value is a prioritized list of font family names

Many web pages display lists of items -- these may

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

Potrebbero piacerti anche