unit 7 - weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfintroduction to style...

UNIT 7Creating Style Sheets

DAY 1Introduction to Style Sheets

LESSON LEARNING TARGETS

• I can describe Web styles and style sheets as a way to format content on Web pages.

• I can describe how style sheets are written using Cascading Style Sheets.

• I can identify and describe the three categories of style sheets, and choose the correct style sheet based on their functionality and need within a Web page.

• I can identify and describe the different parts of a style.

Introduction to Style Sheets

INTRODUCTION TO STYLE SHEETS

• HTML allows you to change the appearance of a Web page by changing tag attributes, etc.

• By careful planning (and repetitive use of tags), you can develop Web sites with a consistent, attractive appearance

• This is how we have styled EVERYTHING so far


• Problem: What if you want to change the appearance of all the pages of a Web site?

• Solution:1. change the tags on all pages, or2. style sheets!


• Style• A rule that defines the appearance of an

element on a Web page• Can change the appearance of the text,

links, etc. for the area affected by the style


• Style Sheet• A series of rules that defines the style for a

Web page or for an entire Web site• Can use to alter the appearance of a

Web page by changing characteristics, such as:

• font family• font size• margins• link specifications• etc.


• Cascading Style Sheets (CSS)• The language that allows a Web

developer to write code statements to control the style of elements on a Web page

• CSS is its own language, with its own standards and syntax

• CSS specifications are defined by the W3C• CSS is not HTML, but it enhances the

display capabilities of HTML!


• Cascading Style Sheets (CSS)• CSS does not add content to a Web site; it

makes the content look more stylish• With CSS, you can add visual elements to

one section, page, or an entire site, such as:

• colors• borders• margins• font styles• paragraph indenting


• Cascading Style Sheets (CSS)• Three types of style sheets

• Inline Style Sheet• Embedded Style Sheet• External (or Linked) Style Sheet


• Inline Style Sheet• Adds a style to an individual HTML tag

• Examples:• heading• paragraph• tables

• The style changes the specific tag, but does not affect other tags within the file


• Embedded Style Sheet• Adds the style sheet within the <head>

tags of an HTML document• Define the styles for an entire Web page• Other pages in the Web site are not

affected, only the page in which the style sheet appears


• External (Linked) Style Sheet• A text file that contains all of the styles to

be applied within a Web site• Text file is saved with a .css extension• Any Web page in the Web site can then

be linked to the external style sheet to define its styles

• Offers the most flexibility• Useful for applying the same formats to all

the Web pages of a Web site

Project 7:

Blue Cell, Inc. Web Site

PROJECT: USING STYLE SHEETS

• Uses all three types of style sheets• Inline• Embedded• External)

• Changes the formatting of a Web site from default settings (such as default font) to a consistent, attractive appearance

Project 8: Creating Style Sheets

17Default Paragraph style, font, and link colors


18Paragraph style, font, and link colors created with Style Sheets


19


20


21


22External Style Sheet -defining overall

appearance of the pages in the main frame


23Embedded Style Sheet -defining appearance of the menu frame; placed inside of <head> tags


24

Inline Style Sheet -defining appearance of

the last paragraph

Creating Style Sheets

CREATING STYLE SHEETS

• Style Sheets• Allow a Web developer to assign several

properties to Web page elements at once

• Example: • changing all the text within a paragraph to a

certain font family and font size• could do within each paragraph tag of the

Web site, but…• style sheets do it easier and more consistently!

CREATING STYLE SHEETS

• Style Sheets - Flexibility in Design• External Style Sheet

• used to control the style for multiple Web pages in a Web site

• Embedded Style Sheet• used to control the style for a single Web

page, overriding an external style sheet• Inline Style Sheet

• used to control the style for a single Web element, overriding all other style sheets

STYLE SHEET PRECEDENCE

• Style Sheets - Precedence• Most SPECIFIC Wins

1. Inline Style Sheet• Highest Precedence – overrides all other

style sheets2. Embedded

• 2nd Highest Precedence - overrides external style sheets

3. External• 3rd Highest – only used when no other style

sheet types can be found

STYLE SHEET PRECEDENCE

• General Rule of Style Sheet Precedence– the more limited the scope of the style sheet,

the higher its precedence

• Because of the precedence rules, all three types of style sheets can be used in the same Web site

STYLE STATEMENT FORMAT

• Style Statement• A statement defining the styles for one or

more properties• Parts:

• Selector• Declaration, which defines:

• Properties• Values


• Style Statement• Selector

• Identifies the page elements to be affected by the style statement

• Examples: paragraph, header, table, etc.


• Style Statement• Declaration

• Identifies how the element given as the selector should appear

• Includes at least one style


• Style Statement• Property

• The style being defined• Examples: color, text-indent, border-

width, font style, etc.


• Style Statement• Value

• Specifies the specific display parameters for the properties

• Example: make the font color red


• Style Statement: Inline Style Sheet Example

<h1 style=“font-family: Garamond; font-color: navy”>

• Parts:• Selector• Declaration


35


• Style Statement: Inline Style Sheet Example

<h1 style=“font-family: Garamond; font-color: navy”>

• Parts:• Selector• Declaration



• Style Statement: Embedded Style Sheet Example

h1 {font-family: Garamond;font-size: 32pt}

Selector Declaration

Properties Values

SIX MAIN STYLE PROPERTIES

• color• image• position

• color• style• width

1. Background

2. Border

Property Options of what can be changed

When chosen to change – tie together: background-color


• family• size• style• variant• weight

• image• position• type

3. Font

4. List



• length• percentage

• alignment• decoration• indentation• spacing• whitespace

5. Margin

6. Text


HOMEWORK

• Worksheet 7A

DAY 2CSS Syntax

INLINE STYLE SHEET• Inline Style Sheet

• Used to define the style of an individual HTML tag• Take precedence over other defined styles• Does not change unrelated defined styles

already given in embedded or external style sheets

• Useful when one section of a Web page needs a style different from the rest of the Web page

INLINE STYLE SHEET

• Inline Style Sheet – ONE SECTION/Tag• Examples:

<p style=“font-style: italic; font-size: 8pt”>

<h2 style=“font-family: Arial; color: red”>

EMBEDDED STYLE SHEET

• Embedded Style Sheet – all tags of one type of a SINGLE webpage

• Used to control the style of a single Web page• Take precedence over styles defined in an

external style sheet• Can be overridden by an inline style sheet• Useful when one Web page needs a style

different from (or in addition to) the rest of the Web site

• Embedded Style Sheet – All tags of same type on ONE PAGE

• Placed within the <head> </head> tags• Syntax:

<style type=“text/css”>

</style>

EMBEDDED STYLE SHEET• Embedded Style Sheet: • Example:


p {text-indent: 8pt}

a {text-decoration: none;font-family: Verdana;font-size: 14pt;color: navy}


• Embedded Style Sheet: (Example continued)

a:hover {background: navy;color: white}

--></style>

EMBEDDED STYLE SHEET• Embedded Style Sheet: Example:




Selector: p(paragraph)

- indents paragraphs by 8 pt.

• Embedded Style Sheet:• Example:




Selector: a (anchor tag)- links have no underline

- links displayed in 14 pt Verdana

- link color is navy (normal, visited, and active states)

• Embedded Style Sheet: (continued)

a:hover {background: navy;color: white}

--></style>

Selector: a:hover- defines the style of a link when the

mouse pointer points to, or hovers over, a link

- displays white text on navy background when mouse hovers over link

EXTERNAL STYLE SHEET• External Style Sheet

• Used to control the style of multiple Web pages or an entire Web site

• Used to control the consistency and look of the Web site

• Can be overridden by embedded or inline style sheets

EXTERNAL STYLE SHEET

• External Style Sheet (continued)• Two steps:

• creating the external style sheet• linking this style sheet into the desired

Web pages


• External Style Sheet (continued)• Syntax: similar to embedded style sheets,

but: • the <style> tags are not needed• there are no <head> tags in the file• contains only style statements


• External Style Sheet: Example of code:

a {text-decoration: none;color: navy}

p {font-family: Verdana, Garamond;font-size: 11pt}

EXTERNAL STYLE SHEET• External Style Sheet: Example of code: (con’t.)

table {font-family: Verdana, Garamond;

font-size: 11pt}

th {color: white;background-color: blue;font-size: 11pt;text-align: left}


• External Style Sheet (continued)• Creating the external style sheet:

• type in the style statements• save the text file with a .css extension

• Example:styles1.css

EXTERNAL STYLE SHEET• External Style Sheet (continued)

• Linking a Web page to an external style sheet

• place within the <head> tags of the page

• uses the <link> tag

• Example:<link rel=“stylesheet”

type=“text/css” href=“styles1.css”>

EXTERNAL STYLE SHEET• External Style Sheet (continued)

• Example:<link rel=“stylesheet”

type=“text/css” href=“styles1.css”>

link tag- indicates a style

sheet should be applied to the page

href attribute- indicates the name and

location of the linked style sheet


• External Style Sheet (continued)• Example:

<link rel=“stylesheet”type=“text/css”href=“styles1.css”>

rel attribute- defines the relationship

of the linked document (i.e. a style sheet)

type attribute- indicates the content and

language used in the linked document

HOMEWORK

• In Class – Activity• Worksheet 7B


66

DAY 3CSS Classes

LESSON LEARNING TARGETS

• I can code and apply an embedded style sheet to a Web page.

• I can code and apply an external style sheet to multiple Web pages.

• I can code and apply an inline style sheet to a single HTML tag.

• I can describe and apply classes to define multiple different styles to a single HTML tag.

Example of using an Embedded

Style Sheet

WORKING WITH STYLE SHEETS

• From your H: drive (PROJECT 5)• Open the Proj4Files folder• Open the living.htm file

• Find the opening <head> tag and the <title> tag

WORKING WITH STYLE SHEETS

• After the <title> tag, before the </head> tag, insert:


p {text-indent: 12pt;font-family: Arial;font-size: 14pt}


a {text-decoration: none;font-size: 18pt;color: green}

h1{color: red}

--></style>

Working with Classes in Style

Sheets

WORKING WITH CLASSES

• Classes• Specific HTML elements defined in a style

sheet as a special formatting category

• Gives the programmer more control over styles used in a Web page


• Classes• Allows programmer to easily and

selectively format certain elements differently than other similar type elements

• More flexible than using inline style sheets, as you can easily repeat the style


• Classes• Example: Paragraph tag

• Suppose you want some paragraphs to have:

• larger, red text• green, italicized text• small, blue, all caps text

• Could use inline style sheets for each, or define a class for each

STEPS IN WRITING CLASSES

• Two Steps in Writing Classes

1. Class Definition• Defines the styles used in the class

2. Using the Class• Used within the HTML tag to which the

class is to be applied


• Class Definition• Identifies the name of the class, and• Defines the styles that will be applied to

the particular tag


• Class Definition• Placed within the <style> tags in an

embedded or external style sheet

• Cannot be defined within an inline style sheet

• Why would you create a class when inline creates style for one singular tag?


• Class Definition• Syntax – if want same look applied to

different tags.classname {style definitions}

• Example:.special {color: red;

font-family: Arial}.extra {color: blue;

font-family: Bazooka}


• Class Definition• Syntax – when specific tag associated

with the class nametag.classname {style definitions}

• Example:h1.special {color: red;

font-family: Arial}h1.extra {color: blue;

font-family: Bazooka}


• Class Definition• Syntax:

tag.classname {style definitions}(tag not required – but adds specificity)

• Example (class used inside many types of tags) -> use “.” to talk about a class

.special {color: red;font-family: Arial}


• Using the Class• Mark the tag to which the class is to be

applied by using the class as an attribute of the particular tag

• Attribute: class

• Value: name of the class



• Using the class• Syntax:

<tag class=“classname”>

• Example:<h1 class=“special”>Blah Blah</h1><h1 class=“extra”>Yadda Yadda</h1>

EXAMPLE OF CLASSES• Class Example:

• Type in a new page in Notepad:



<html>

<head>

<title>Example with Classes in Style Sheets</title>

EXAMPLE OF CLASSES<style type=“text/css”>

<!--

p.bigred {color: red;

font-size: 20pt}

p.greenitalic {color: green;

font-weight: bold;

font-style: oblique;

font-size: 16pt}

EXAMPLE OF CLASSESp.smallblue {color: navy;

font-weight: bolder;

font-variant: small-caps;

font-style: normal;

font-size: 12pt}

EXAMPLE OF CLASSESh1.redhead {color: red;

font-style: oblique}

h1.bluehead {color: navy;

font-weight: lighter}

-->

</style>

</head>

EXAMPLE OF CLASSES<body>

<h1>Example with Classes 1</h1>

<h1 class=“redhead”>Example with Classes 2</h1>

<h1 class=“bluehead”>Example with Classes 3</h1>

EXAMPLE OF CLASSES

<p>This is normal; paragraph 1</p>

<p class="bigred">This is paragraph 2</p>

<p class="greenitalic">This is paragraph 3</p>

EXAMPLE OF CLASSES

<p class="smallblue">This is paragraph 4</p>

<p class="bigred">This is paragraph 5</p>

<p class="smallblue">This is paragraph 6</p>

EXAMPLE OF CLASSES

<p>This is normal; paragraph 7 </p>

<p class="greenitalic">This is paragraph 8</p>

</body>

</html>

ADDING AN EMBEDDED STYLE SHEET

• Create a project 7 folder – save this as

classSample.htm

• View the file in the browser


94Example of Classes

DOT METHOD FOR CLASS

• Add in a new style

.backpink{background-color: pink;

}• Change the class name of one paragraph and one

heading to pink• What happens?

HOMEWORK

• In Class – Whiteboard Task• Worksheet 7C

unit 7 - weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfintroduction to style...

Documents