7/29/2019 IS3330-L3

1/35

IS3330: Web Authoring

Troy University

Ingyu Lee

7/29/2019 IS3330-L3

2/35

Todays Topic

Using Cascading Style Sheets

Create style sheets that configure common color and

text properties

Apply inline styles Use embedded style sheets

Use external style sheets

Create CSS class and id selectors

Q/A

7/29/2019 IS3330-L3

3/35

Overview of Cascading Style Sheets (CSS)

See what is possible with CSS: Visit http://www.csszengarden.com

Style Sheets

used for years in Desktop Publishing apply typographical styles and spacing to printed media

CSS provides the functionality of style sheets (and much more) for

web developers a flexible, cross-platform, standards-based language

developed by the W3C.

http://www.csszengarden.com/http://www.csszengarden.com/

7/29/2019 IS3330-L3

4/35

CSS Advantages

Greater typography and page layout control

Style is separate from structure

Styles can be stored in a separate document and linked

to from the web page

Potentially smaller documents

Easier site maintenance

7/29/2019 IS3330-L3

5/35

Types of Cascading Style Sheets

Inline Styles Configured in the body of the Web page

Use the style attribute of an HTML tag; Apply only to the specific

element

Embedded Styles Configured in the header section of a Web page.

Use the HTML element; Apply to the entire Web page

document

External Styles Configured in a separate text file with .css file extension

The HTML element in the header section of a Web page

associates it with the .css file

7/29/2019 IS3330-L3

6/35

CSS Syntax

Style sheets are composed of "Rules" that

describe the styling to be applied.

Each Rule contains a Selector and a Declaration

CSS Style Rule Selector: HTML element, classname, an id name

CSS Style Rule Declaration: Property + Value

7/29/2019 IS3330-L3

7/35

CSS Syntax Sample

Configure a Web page to display blue text and yellow background.

body { color: blue;

background-color: yellow; }

This could also be written using hexadecimal color values as shown

below.

body { color: #0000FF;

background-color: #FFFF00; }

7/29/2019 IS3330-L3

8/35

Common Formatting CSS Properties

See Table 3.1 Common CSS Properties, including:

background-color

color

font-family

font-size font-style

font-weight

line-height

margin, margin-left, margin-right

text-align

text-decoration

width

7/29/2019 IS3330-L3

9/35

Using Color on Web Pages

Computer monitors display color as intensities of

red, green, and blue light; RGB Color

The values of red, green, and blue vary from 0 to

255.

Hexadecimal numbers (base 16) represent these

color values.

Hexadecimal color values

# is used to indicate a hexadecimal value

Hex value pairs range from 00 to FF

Three hex value pairs describe an RGB color

CSS Syntax

p { color: red; }

p { color: #FF0000; }

p { color: #F00; }

p { color: rgb(255, 0, 0); }

7/29/2019 IS3330-L3

10/35

Configuring Color with Inline CSS (1)

Inline CSS Configured in the body of the Web page

Use the style attribute of an HTML tag

Apply only to the specific element

The Style Attribute

Value: one or more style declaration property and value pairs

Example: configure red color text in an element:

Heading text is red

7/29/2019 IS3330-L3

11/35

Configuring Color with Inline CSS (2)

Example 2:

configure the red text in the heading

configure a gray background in the heading

Separate style rule declarations with ;

This is displayed as a redheading with gray background

7/29/2019 IS3330-L3

12/35

CSS Embedded Styles

Configured in the header section of a Web page.

Use the HTML element

Apply to the entire Web page document

Style declarations are contained between the opening and closing

tags

Example: Configure a Web page with white text on a black background

body { background-color: #000000;

color: #FFFFFF;}

7/29/2019 IS3330-L3

13/35

Embedded Style: Hands-On 3.2

H1 tag

Anchor within div tag

H2 tag

Paragraph tag

Unordered list

H2 tag

Paragraph tag with break line

Div tag

7/29/2019 IS3330-L3

14/35

CSS Embedded Styles

The body selector

sets the global style

rules for the entire

page.

These global rules

are overridden for

and elements by the h1

and h2 style rules.

body { background-color: #E6E6FA;

color: #191970;}

h1 { background-color: #191970;

color: #E6E6FA;}

h2 { background-color: #AEAED4;

color: #191970;}

7/29/2019 IS3330-L3

15/35

Questions

Cascading Style Sheet rules are comprised of:

a. Selectors and Declarations

b. Properties and Declarations

c. Selectors and Attributes

d. None of the aboveWhen CSS is coded in the body of the

web page as an attribute of an HTML

tag it is called ________.a. Embedded

b. Inline

c. External

d Imported

To associate an external style sheet with

a web page, code:

a. a link element in the body section of

the web page

b. a link element in the head section of

the web page

c. a style element in the body section of

the web page

d. a style element in the head section of

the web page

7/29/2019 IS3330-L3

16/35

Configuring Text with CSS

CSS properties for configuring text:

font-weight

Configures the boldness of text

font-style

Configures text to an italic style

font-size

Configures the size of the text font-family

Configures the font typeface of the text

7/29/2019 IS3330-L3

17/35

The font-size Property

Accessibility Recommendation: Use em or percentage font sizes these can be

easily enlarged in all browsers by users

7/29/2019 IS3330-L3

18/35

The font-family Property

Not everyone has the same fonts installedin their computer

Configure a list of fonts and include a

generic family namep { font-family: arial, verdana, sans-serif; }

7/29/2019 IS3330-L3

19/35

body { background-color: #E6E6FA;

color: #191970;

font-family: Arial, Verdana, sans-serif; }

h1 { background-color: #191970;

color: #E6E6FA;

line-height: 200%;

font-family: Georgia, "Times New Roman", serif; }

h2 { background-color: #AEAED4;color: #191970;

font-family: Georgia, "Times New Roman", serif;

text-align: center }

p {font-size: .90em; text-indent: 3em; }

ul {font-weight: bold; }

Embedded Styles Example

7/29/2019 IS3330-L3

20/35

CSS Selectors

CSS style rules can be configured for an:

HTML element selector

class selector

id selector

7/29/2019 IS3330-L3

21/35

Using CSS with class

class Selector Apply a CSS

rule to a certain

"class" of elements

on a Web page

Does not associate the

style to a particularHTML element

Configure with .classname

The sample creates a class called new with red italic text.

To use the class, code the following HTML:

This is text is red and in italics

.new { color: #FF0000;

font-style: italic;

}

7/29/2019 IS3330-L3

22/35

Using CSS with id

id Selector

Apply a CSS

rule to ONE element

on a Web page.

Configure with #idname

The sample creates an id called new with red, large,

italic text.

To use the id, code the following HTML:

This is text is red, large, and in italics

#new { color: #FF0000;

font-size:2em;

font-style: italic;

}

7/29/2019 IS3330-L3

23/35

Embedded Style Example

.nav {font-weight: bold; font-size: 1.25 em;}

.feature { color: #ff0000; }

#footer {color: #333333; font-size: .75em; font-style: italic;}

...

Home

ServicesContact

Usability Studies

Search Engine Optimization

Copy right 2011 Your Name Here

7/29/2019 IS3330-L3

24/35

CSS Contextual Selector

Specify an element within the

context of its container (parent)

element

AKA descendent selector

Example figures a green text color

only for anchor tags located within

the footer id

Advantage of contextual selectors: Reduce the number of classes and

ids you need to apply in the HTML

#footer a {

color: #00ff00; }

7/29/2019 IS3330-L3

25/35

HTML element

A block-level element

Purpose: configure a specially formatted division

or area of a Web page There is a line break before and after the division.

Can contain other block-level and inline elements

Useful to define an area that will contain otherblock-level tags (such as paragraphs or spans)

within it.

7/29/2019 IS3330-L3

26/35

HTML Element Example

Configure a page footer area Embedded CSS:

.footer { font-size: small;text-align: center; }

HTML:

7/29/2019 IS3330-L3

27/35

HTML element

An inline-level element

Purpose:

Configure a specially formatted area displayed

in-line with other elements, such as within a

paragraph.

There is no line break before and after the

span.

7/29/2019 IS3330-L3

28/35

HTML Element Example

Embedded CSS:

.companyname { font-weight: bold;

font-family: Georgia, "Times New Roman", serif;

font-size: 1.25em;

}

HTML:

Your needs are important to us at

7/29/2019 IS3330-L3

29/35

Embedded Style Example

.companyname {font=weight: bold;

font-family: Georgia, Times New Roman, serif;

font-size: 1.25em;

...

Trillium Media

Design will bring

7/29/2019 IS3330-L3

30/35

External Style Sheets - 1

CSS style rules are contained in a text

file separate from the HTML documents.

The External Style Sheet text file:

extension ".css"

contains only style rules

does not contain any HTML tags

7/29/2019 IS3330-L3

31/35

External Style Sheets - 2

Multiple web pages can associate with

the same external style sheet file.

body {

background-color:#E6E6FA;

color:#000000;

font-family:Arial, sans-serif;

font-size:90%;

}

h2 { color: #003366; }

.nav {

font-size: 16px;

font-weight: bold;

}

site.css

index.htm

clients.htm

about.htm

Etc

7/29/2019 IS3330-L3

32/35

The Element

A self-contained tag

Placed in the header section

Purpose: associates the external style sheet file with

the web page.

Example:

7/29/2019 IS3330-L3

33/35

Using an External Style Sheet

To link to the external style sheet called color.css,

the HTML code placed in the header section is:

body {

background-color: #0000FF;

color: #FFFFFF;}

External Style Sheet color.css

7/29/2019 IS3330-L3

34/35

Questions

Select the code below that uses CSS to configure a idnamed footer that configures small, italic text.

a. #footer { font-size: small; font-weight: italic;}

b. .footer{ font-size: small; font-style: italic;}

c. .footer { font-size: small; font-style: italic;}

d. #footer { font-size: small; font-style: italic;}

To apply a style to a certain

group of elements on a web

page, configure a CSS

_____________.

a. groupb. id

c. class

d. None of the above

Select the code below that uses CSS to

configure a background color of #eaeaea for a

web page.

a. body {background-color:#eaeaea; }

b. document {background-page:#eaeaea; }

c. body {bgcolor:#eaeaea; }d. None of the above

7/29/2019 IS3330-L3

35/35

Centering Page Content with CSS

#container {margin-left: auto;

margin-right: auto;

width: 80%;

}