Introduction To Web Design: Cascading Style Sheet

INTRODUCTION TO
WEB DESIGN:
CASCADING STYLE SHEET
CREATING STYLE SHEETS
Objectives:
• Define the meaning of CSS.
• Discuss capabilities and advantages
of using CSS in web design
• Identify CSS structure and the three
types of CSS
• Appreciate the importance of how
CSS works in web development
Video Presentation
What is CSS
• CSS or Cascading Style Sheet
allow you to control the layout of
your HTML document. It is a
simple way to add style such as
font colors or spacing in your
web page.
What is CSS
• CSS is usually a text file that is
embedded or separated from
your HTML file.
What is CSS
• HTML is used to define the
page’s content while CSS is
used to define how the content
and web page will look.
Sample CSS file
<!DOCTYPE html>
<html>
<head>
<title>Understanding CSS</title>
<style type="text/css">
body {
background-color: lightblue; }
h1 {
color: white;
text-align: center; } CSS
p{
font-family: verdana;
font-size: 20px; }
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output
Output (without CSS)
Why Use CSS
(Capabilities of CSS)
1. CSS makes updating web pages easy and
quickly. You can also specify a style once and
then apply it repeatedly in your document.
2. CSS gives you control when placing objects on
the page exactly where you want them.
3. CSS allows you to position objects in three
dimensions (layers).
4. CSS allows you to create custom tags to
achieve specialized objectives.
Advantages of Using CSS
1. Save typing and development time.
2. Download faster because your browser will
download only one file once.
3. You can add multiple link tags in one document.
CSS Structure
Curly Braces
Colon
Selector p { Semi Colon
color: red; Declaration

Block
} Value
Property
Three Kinds of CSS
1. Inline Style Sheets – These are used for
isolated changes to a headline, paragraph,
picture or other element. Inline style sheets
override external and embedded style sheets.
Ex. <p style=“background-color: gray;”>
Three Kinds of CSS
2. Embedded Style Sheets (Internal Style Sheets)
- These are used for creating a document-wide
style rule. They are placed within an HTML
document, between the <head> and </head>.
Ex. <style type=“text/css”>
- They are also used when you have a page
that your want to present in a different style from
other pages. Embedded style sheets override
external style sheets.
Three Kinds of CSS
3. External Style Sheets – These are the most
global of the three kinds of CSS because you can
apply the same one to an unlimited number of
pages. They allow you to develop a consistent style
across pages. They easily allow you to change the
layout of your entire web site by simply changing
the external style sheet and every page is instantly
updated. External CSS file has a .css file extension.
Ex. <link rel=“css” href=“style.css” type=“text/css”>
Activity: Identify what kind of CSS are
the following codes.
<html>
<head>
p{
font-family: arial; color: red
}
</style>
</head>
<body>
<p>So many times…</p>
<p>When my heart was broken…</p>
<p>Visions of you would keep me strong…</p>
</body>
</html>
<html>
<head>
</head>
<body>
<p>How many times did I pray you’d find me...</p>
<p>How many whishes on the star...</p>
<p style="font-family: Tahoma; color: yellow">
It was you who first believed.
</p>
</body>
</html>
<html>
<head>

</style>
</head>
<body>
<h1>What matter most</h1>
<p>It’s not how long we held each other’s hand..</p>
<p>What matters is how well we loved each other…</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href=“picture.css“ type="text/css"/>
</head>
<body>
<p>You know it’s really suicidal to just give in
with people you can never really bu sure.
</p>
</body>
</html>
<html>
<head>
</head>
<body>
<p>When you find yourself in a compromising spot..</p>
<p style="font-family: arial; color: green">
<p>You should know, you shouldn’t take…</p>
</body>
</html>
Assignment:
Create three simple web pages
that will contain a piece of poem
that you originally created. Use
the three kinds of CSS.
Quiz: Identify what kind of CSS are the
following codes.
<html>
<head>

</style>
</head>
<body>
<h1>What matter most</h1>
<p>It’s not how long we held each other’s hand..</p>
<p>What matters is how well we loved each other…</p>
</body>
</html>
following codes.
<html>
<head>
p{
font-family: arial; color: red
}
</style>
</head>
<body>
<p>So many times…</p>
<p>When my heart was broken…</p>
<p>Visions of you would keep me strong…</p>
</body>
</html>
following codes.
<html>
<head>
</head>
<body>
<p>How many times did I pray you’d find me...</p>
<p>How many whishes on the star...</p>
<p style="font-family: Tahoma; color: yellow">
It was you who first believed.
</p>
</body>
</html>
following codes.
<html>
<head>
<link rel="stylesheet" href=“picture.css“ type="text/css"/>
</head>
<body>
<p>You know it’s really suicidal to just give in
with people you can never really bu sure.
</p>
</body>
</html>
following codes.
<html>
<head>
</head>
<body>
<p>When you find yourself in a compromising spot..</p>
<p style="font-family: arial; color: green">
<p>You should know, you shouldn’t take…</p>
</body>
</html>
Identify parts of CSS Structure
6
Colon
10. p { Semi Colon
color: red; 7.
} 8.
9.
Quiz: Enumeration
• Give 3 advantages of CSS
• Give at least 2 capabilities of CSS
Essay: (5 pts)
What is the difference between HTML and CSS?
Transitional Page
www.animationfactory.com
Backdrops:
- These are full sized
backdrops, just scale them up!
- Can be Copy-Pasted out of
Templates for use anywhere!

Introduction To Web Design: Cascading Style Sheet

Uploaded by

Document Information

Original Description:

Original Title

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

Introduction To Web Design: Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

INTRODUCTION TO

color: red; Declaration

You might also like