Scribd
Upload
47 views

Webdev Ch02 Css

This document discusses different methods for styling web pages using CSS, including inline styles, internal style sheets, and external style sheets. It explains that inline styles apply only to individual elements, internal style sheets can style all elements of a type within a page, and external style sheets are best for controlling styles across many pages of a site. The document also covers CSS syntax, including using IDs to select unique elements and classes to select groups of elements.

Uploaded by

mervat anwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

Webdev Ch02 Css

This document discusses different methods for styling web pages using CSS, including inline styles, internal style sheets, and external style sheets. It explains that inline styles apply only to individual elements, internal style sheets can style all elements of a type within a page, and external style sheets are best for controlling styles across many pages of a site. The document also covers CSS syntax, including using IDs to select unique elements and classes to select groups of elements.

Uploaded by

mervat anwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

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.

You might also like