8 - Style Sheets NEW

Comprehensive Concepts and Techniques
Shelly Cashman Series

Instructor: Erwin Donavan Ong

A style is a rule that defines the
appearance of an element on a Web
page.
Style sheet is a series of rules that
defines the style of for a Web page or an
entire Web site.
With a style sheet, you can alter the
appearance of a web page, by changing
characteristics such as font family, font
size, margins and links specifications.
CSS allows a web developer to write
code statements that controls that control
the style of elements on a web page.
CSS is not HTML; it is a separate
language used to enhance the display
capabilities of HTML.
You add a style to an individual HTML
tags, such as heading or paragraph. The
style changes that specific tag, but does
not affect other tags in the document.
You add the style sheet within the
<head> tags of the HTML documents to
define the style for the entire Web page
You create a text file that contains all of
the styles you want to apply and then
save the text file with the file extension,
.css. You then add a link to this external
style sheet into any web page in the web
site.
This gives you the most flexibility.
Adding an Embedded Style
Sheet
A style statement is made up of a
selector and a declaration that defines
the style for one or more properties
Example:
<h1 style=font-family: Garamond; font-
color: navy>
<html>
<head>
<title>Intra-Wall Manang Chicken Sample Website</title>
</head>
<body>
<img src=chicken.jpg align=middle/>
<br/>
<br/>
<h1 style="font-family: arial black"> Hello! Welcome to the official
website of Intramuros

famous Manang Chicken!</h1>
<p>Manang Chicken is opened for business since 1890.bla bla
bla</p>
<p>Call 922-2222 for delivery</p>
<h1>Erwin Donavan Ong</h1>
</body>
</html>
Style Sheets allow you to control
many different property values for
various elements in a Web page.
Next slide shows the six main
properties and related options that
you can control.
Property Name Options that can be controlled:
background Color, image, position
border Color, style, width
font Family, size, style, variant,
weight
list Image, position, type
Margin Length, percentage
text Alignment, decoration,
indentation, spacing, white
space
Inline style sheet is used to define the
style of an individual HTML tag
Inline style sheet takes precedence over
both embedded and external style sheets
Example:
<p style=font-style: italic; font-size: 8pt>
Embedded style sheet is used to control
the style of a single web page.
Use the <style> </style> tags
You insert the style tag inside the <head>
tag
<head>
<title>Sample webpage</title>
<style type=text/css>
p {text-indent: 8pt}
a {text-decoration: none;
font-family: Verdana;
font-size: 14pt;
font-color: navy}
a:hover {background: navy;
color: white}
</style>
</head>
<html>
<head>
<title>Sample Image Maps</title>
<style type="text/css">
body{margin-left: 50px;}
p{color:blue ; font-family: verdana, arial, sans-serif; font-size:

medium;}
h1{color:red ; font-family: verdana, arial, sans-serif; font-size:

large; text-align:center;}
</style>
</head>
<body>
<h1>A Basic Page</h1>
<p>
Cascading style sheets were developed by Hakon Lie and Bert Bos, working

for the World Wide Web Consortium. The idea was to separate

presentation-the way the page looks-from structure-the way the page is

organized.
</p>
<p>
Using cascading style sheets, you separate the style elements of the page

(the font, size, color, spacing, etc.) and put them in a style section.

Then if you decide later that you want to make a change, you have to deal

with only one place, rather than hunting down all the places where you

used the old font tags.
</p>
</body>
</html>

External style sheets are the most
comprehensive form of style sheet and
can be used to control the consistency
and look of many web pages within a
web site
Adding an external style sheet to a web
page involves two-step process: creating
an external style sheet and linking the
style sheet
a {text-decoration: none;
color: blue}
p {font-family: Verdana, Garamond;
font-size: 11pt}
table {font-family: Verdana, Garamond;
font-size: 11pt}
The format is similar to the embedded style
sheets except that the <style> tag is no longer
needed.

To create an external style sheet, enter all of the
style statements in a text file using Notepad or
another text editor and then save the text file
with a .css extension.

Let us assume that the above code is named as
style1.css
This link tag is placed inside the <head>
tag in exchange for the embedded which
is the <style> tag
<head>
<title>Sample webpage</title>
<link rel=stylesheet type=text/css
href=styles1.css>
</head>
Note: rel means relationship
Type means the content
The purpose of classes is if in case you
want the style of the first paragraph to be
different from the succeeding paragraph,
you can define specific elements using
the attribute class
Defining and using classes in a style sheet is a two-step process.
First, any elements that belongs to the class are marked by adding
the tag:
class=classname
where the classname is the identifier or name of the class. To define a
class the includes any beginning paragraphs, for example, you would
enter the code:
<p class=beginning>
which means that the class is specific to that paragraph only. After you
have named the classes, you can use the names in a selector and
define a specific style for the class. In Embedded style sheet for
example, you add the ff:
p: beginning {color: red;
font: 20pt}
<html>
<head>
<title>Embedded Style Sheet - Sample classes</title>
<style type="text/css">

p.beginning {color:red;
font-size: 20pt}

p.middle {color:green;
font-weight: bold;
font-style: obligue;
font-size: 16pt}

p.end {color: navy;
font-weight: bolder;
font-variant: small-caps;
font-style: normal;
font-size: 12pt}

</style>
</head>
<body>

<p class="beginning">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris rutrum metus nec lorem. Mauris ipsum nisl,
rutrum

non, dapibus eget, semper et, nulla. Mauris scelerisque purus quis quam. In cursus pharetra nisi. Nullam porta.

Donec nec tellus egestas elit feugiat rutrum. Aenean libero. Nullam posuere volutpat metus. Nulla et nunc at nisi

</p>

<p class="middle">
rutrum



</p>

<p class="end">
rutrum



</p>

</body>
</html>
Convert the codes in the previous
slides using the External Style Sheets
Font-family

Ex:
h2{font-family: garamond, palatino,
georgia, times, serif ;}
Font-family
Font-size (small, medium, large)
Ex:
georgia, times, serif ; font-size:small; }
Font-family
Font-style (italic, normal)
Ex:
georgia, times, serif ; font-size:small;
font-style: italic;}
Font-family
Font-style (italic, normal)
Font-weight (normal,bold)
Ex:
georgia, times, serif ; font-size:small;
font-style: italic;}
Line-height

Ex:
p{font-family: garamond, palatino, georgia,
times, serif ; line-height:1.5; }
Line-height
Text-align (left,right,cente,justify)

Ex:
times, serif ; line-height:1.5; text-
align:center; }
Line-height
Text-align (left,right,cente,justify)
Text-indent
Ex:
times, serif ; line-height:1.5; text-
align:center; text-indent:5% ;}
Text-decoration (underline, overline, line-
through, blink)

Ex:
times, serif ; text-decoration: underline;}
Text-decoration (underline, overline, line-
through, blink)
Letter-spacing (px)

Ex:
times, serif ; text-decoration: underline;
letter-spacing=15px ;}
Margin (px)
Padding (px)

Ex:
Img{ margin:10px; padding:10px ;}
Backgound-repeat (repeat , no-repeat)
Background-position
(top,bottom,left,right,center)

Ex:
Body{ background-image:url(pic.jpg) ;
background-repeat:no-repeat;
background-position:center ;}
Background-position
Background-color

Ex:
background-repeat:no-repeat; background-
position:center ; background-color:red;}
Background-position
Background-color
Background-attachment (fixed ,scroll)

Ex:
background-repeat:no-repeat; background-
position:center ; background-color:red;}
A:link{ color:gray; text-decoration: none ;}
A:visited{ color:blue; text-decoration:
none ;}
A:hover { color: red; text-decoration:
underline ;}

8 - Style Sheets NEW

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

8 - Style Sheets NEW

Încărcat de

Drepturi de autor:

Formate disponibile

Comprehensive Concepts and Techniques

Shelly Cashman Series

S-ar putea să vă placă și