Internet & World Wide Web How to Program, 5/e
2020 Pearson Education, Inc. All rights reserved.
Understand the basic concept of CSS
Understand the differences among inline, internal
and external style sheets
Understand how to declare a style
2020 Pearson Education, Inc. All rights reserved.
2
Created by Hakon Lie of MIT in 1994
Has become the W3C standard for controlling visual
presentation of web pages
Cascading style-sheets are powerful mechanism to
add style to web document
Enforce standards and uniformity
Create dynamic effects
Works by allowing you to specify rules
2020 Pearson Education, Inc. All rights reserved.
3
Saves time
Easy to change
Keep consistency
Give you more control over layout
Make it easy to create a common format for all the
Web pages
2020 Pearson Education, Inc. All rights reserved.
4
In-line styles
Embedded/internal styles
External style sheet
2020 Pearson Education, Inc. All rights reserved.
5
2.1 In-line Styles
Inline styles
Add styles to each tag within the
HTML file
Use it when you need to format just a
single section in a web page
Style attribute is used to add style
Example
<h1 style=“color:red; font-family:
sans-sarif” > IU </h1>
2020 Pearson Education, Inc. All rights reserved.
2.1 In-line Styles…
Heading with no style
Color setting
Font size setting
Style attribute
2020 Pearson Education, Inc. All rights reserved.
2.1 In-line Styles…
Heading with no style
CSS styled
heading
2020 Pearson Education, Inc. All rights reserved.
2.2 Internal Styles
• A style is applied to the entire HTML file
• Use it when you need to modify all
instances of particular element (e.g., h1)
in a web page
Example
<style>
h1 {color:red; font-family:sans-serif}
</style>
2020 Pearson Education, Inc. All rights reserved.
2.2 Internal Styles…
Start of style block
Color setting
Tag
Font family
Font size
End of style
Simple heading
2020 Pearson Education, Inc. All rights reserved.
2.2 Internal Styles…
2020 Pearson Education, Inc. All rights reserved.
2.3 External Styles
An external style sheet is a text file
containing the style definition
(declaration)
Use it when you need to control the
style for an entire web site
2020 Pearson Education, Inc. All rights reserved.
2.3 External Styles…
Open a new blank document in Notepad
Type style declarations
h1 {color:red; font-family:calibri;}
Do not include <style> tags
Save the document as filename.css
2020 Pearson Education, Inc. All rights reserved.
2.3 External Styles…
Open an HTML file
Between <head> and </head> add
<link href=URL rel=“relation_type”
type=“link_type”>
URL is the file.css
Relation_type=“stylesheet”
Link_type=“text/css”
Save this file and the .css file in the same web
server directory
2020 Pearson Education, Inc. All rights reserved.
2.3 External Styles…
Style declaration
File is saved with mystyle.css
name
2020 Pearson Education, Inc. All rights reserved.
2.3 External Styles…
Style-sheet is included
Heading
2020 Pearson Education, Inc. All rights reserved.
2.3 External Styles…
2020 Pearson Education, Inc. All rights reserved.
2.4 Style Sheet Strategies
Wherever possible, place your styles in external
style sheets
At the top level of your web site: define a
default global.css style sheet
Refine styles at sublevels with a section.css
style sheet
Try to avoid using styles in tags
2020 Pearson Education, Inc. All rights reserved.
3. CSS Syntax
2020 Pearson Education, Inc. All rights reserved.
3.1 Defining a CSS Rule
CSS works by allowing you to associate rules
with the elements that appear in a web page
These rules govern how the content of those
elements should be rendered
2020 Pearson Education, Inc. All rights reserved.
3.1 Defining a CSS Rule…
A rule consists of
A selector: element or elements the declaration applies to
Declaration: how the elements referred to in the selector
should be styled
property: which is the property of the selected element
value: which is a specification for this property
2020 Pearson Education, Inc. All rights reserved.
3.2 Using Id,s
Use an id to distinguish something, like a paragraph,
from the others in a document
The id selector is used to specify a style for a single,
unique element
2020 Pearson Education, Inc. All rights reserved.
3.2 Using Id,s…
Create a style Id:
#id_name {style attributes and values}
Use a style Id:
<tag ID=id_name>
2020 Pearson Education, Inc. All rights reserved.
3.2 Using Id,s…
2020 Pearson Education, Inc. All rights reserved.
3.2 Using Id,s…
2020 Pearson Education, Inc. All rights reserved.
2.3 Using Classes
HTML and XHTML require each id be unique–
therefore an id value can only be used once in a
document
You can mark a group of elements with a common
identifier using the class attribute
2020 Pearson Education, Inc. All rights reserved.
2.3 Using Classes…
To create a class
tag.class_name {style attributes} or
.class_name {style attributes}
To apply a style
<tag CLASS=class_name>
<h1 CLASS=FirstHeader>IU</h1>
2020 Pearson Education, Inc. All rights reserved.
2.3 Using Classes…
2020 Pearson Education, Inc. All rights reserved.
2.3 Using Classes…
2020 Pearson Education, Inc. All rights reserved.
3.4 Difference between classes and Id,s
you can’t have more than one tag with the same ID
value
You can apply the same Class value to multiple
document tags
• Classes or Id?
• use ID's for any elements that are simply used once on a
page
OR
• only use classes to style websites, but, when you have to
use an element in JavaScript, use an identifier
2020 Pearson Education, Inc. All rights reserved.
