unit 7 - weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfintroduction to style...
TRANSCRIPT
![Page 1: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/1.jpg)
UNIT 7Creating Style Sheets
![Page 2: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/2.jpg)
DAY 1Introduction to Style Sheets
![Page 3: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/3.jpg)
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.
![Page 4: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/4.jpg)
Introduction to Style Sheets
![Page 5: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/5.jpg)
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
![Page 6: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/6.jpg)
INTRODUCTION TO STYLE SHEETS
• 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!
![Page 7: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/7.jpg)
INTRODUCTION TO 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
![Page 8: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/8.jpg)
INTRODUCTION TO STYLE SHEETS
• 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.
![Page 9: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/9.jpg)
INTRODUCTION TO STYLE SHEETS
• 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!
![Page 10: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/10.jpg)
INTRODUCTION TO STYLE SHEETS
• 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
![Page 11: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/11.jpg)
INTRODUCTION TO STYLE SHEETS
• Cascading Style Sheets (CSS)• Three types of style sheets
• Inline Style Sheet• Embedded Style Sheet• External (or Linked) Style Sheet
![Page 12: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/12.jpg)
INTRODUCTION TO STYLE SHEETS
• 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
![Page 13: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/13.jpg)
INTRODUCTION TO STYLE SHEETS
• 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
![Page 14: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/14.jpg)
INTRODUCTION TO STYLE SHEETS
• 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
![Page 15: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/15.jpg)
Project 7:
Blue Cell, Inc. Web Site
![Page 16: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/16.jpg)
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
![Page 17: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/17.jpg)
Project 8: Creating Style Sheets
17Default Paragraph style, font, and link colors
![Page 18: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/18.jpg)
Project 8: Creating Style Sheets
18Paragraph style, font, and link colors created with Style Sheets
![Page 19: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/19.jpg)
Project 8: Creating Style Sheets
19
![Page 20: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/20.jpg)
Project 8: Creating Style Sheets
20
![Page 21: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/21.jpg)
Project 8: Creating Style Sheets
21
![Page 22: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/22.jpg)
Project 8: Creating Style Sheets
22External Style Sheet -defining overall
appearance of the pages in the main frame
![Page 23: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/23.jpg)
Project 8: Creating Style Sheets
23Embedded Style Sheet -defining appearance of the menu frame; placed inside of <head> tags
![Page 24: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/24.jpg)
Project 8: Creating Style Sheets
24
Inline Style Sheet -defining appearance of
the last paragraph
![Page 25: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/25.jpg)
Creating Style Sheets
![Page 26: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/26.jpg)
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!
![Page 27: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/27.jpg)
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
![Page 28: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/28.jpg)
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
![Page 29: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/29.jpg)
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
![Page 30: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/30.jpg)
STYLE STATEMENT FORMAT
• Style Statement• A statement defining the styles for one or
more properties• Parts:
• Selector• Declaration, which defines:
• Properties• Values
![Page 31: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/31.jpg)
STYLE STATEMENT FORMAT
• Style Statement• Selector
• Identifies the page elements to be affected by the style statement
• Examples: paragraph, header, table, etc.
![Page 32: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/32.jpg)
STYLE STATEMENT FORMAT
• Style Statement• Declaration
• Identifies how the element given as the selector should appear
• Includes at least one style
![Page 33: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/33.jpg)
STYLE STATEMENT FORMAT
• Style Statement• Property
• The style being defined• Examples: color, text-indent, border-
width, font style, etc.
![Page 34: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/34.jpg)
STYLE STATEMENT FORMAT
• Style Statement• Value
• Specifies the specific display parameters for the properties
• Example: make the font color red
![Page 35: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/35.jpg)
STYLE STATEMENT FORMAT
• Style Statement: Inline Style Sheet Example
<h1 style=“font-family: Garamond; font-color: navy”>
• Parts:• Selector• Declaration
• Properties• Values
35
![Page 36: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/36.jpg)
STYLE STATEMENT FORMAT
• Style Statement: Inline Style Sheet Example
<h1 style=“font-family: Garamond; font-color: navy”>
• Parts:• Selector• Declaration
• Properties• Values
![Page 37: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/37.jpg)
STYLE STATEMENT FORMAT
• Style Statement: Inline Style Sheet Example
<h1 style=“font-family: Garamond; font-color: navy”>
• Parts:• Selector• Declaration
• Properties• Values
![Page 38: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/38.jpg)
STYLE STATEMENT FORMAT
• Style Statement: Inline Style Sheet Example
<h1 style=“font-family: Garamond; font-color: navy”>
• Parts:• Selector• Declaration
• Properties• Values
![Page 39: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/39.jpg)
STYLE STATEMENT FORMAT
• Style Statement: Inline Style Sheet Example
<h1 style=“font-family: Garamond; font-color: navy”>
• Parts:• Selector• Declaration
• Properties• Values
![Page 40: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/40.jpg)
STYLE STATEMENT FORMAT
• Style Statement: Embedded Style Sheet Example
h1 {font-family: Garamond;font-size: 32pt}
Selector Declaration
Properties Values
![Page 41: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/41.jpg)
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
![Page 42: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/42.jpg)
SIX MAIN STYLE PROPERTIES
• family• size• style• variant• weight
• image• position• type
3. Font
4. List
Property Options of what can be changed
![Page 43: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/43.jpg)
SIX MAIN STYLE PROPERTIES
• length• percentage
• alignment• decoration• indentation• spacing• whitespace
5. Margin
6. Text
Property Options of what can be changed
![Page 44: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/44.jpg)
HOMEWORK
• Worksheet 7A
![Page 45: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/45.jpg)
Project 8: Creating Style Sheets
![Page 46: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/46.jpg)
DAY 2CSS Syntax
![Page 47: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/47.jpg)
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
![Page 48: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/48.jpg)
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”>
![Page 49: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/49.jpg)
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
![Page 50: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/50.jpg)
EMBEDDED STYLE SHEET
• Embedded Style Sheet – All tags of same type on ONE PAGE
• Placed within the <head> </head> tags• Syntax:
<style type=“text/css”><!--
style statements here-->
</style>
![Page 51: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/51.jpg)
EMBEDDED STYLE SHEET• Embedded Style Sheet: • Example:
<style type=“text/css”><!--
p {text-indent: 8pt}
a {text-decoration: none;font-family: Verdana;font-size: 14pt;color: navy}
![Page 52: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/52.jpg)
EMBEDDED STYLE SHEET
• Embedded Style Sheet: (Example continued)
a:hover {background: navy;color: white}
--></style>
![Page 53: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/53.jpg)
EMBEDDED STYLE SHEET• Embedded Style Sheet: Example:
<style type=“text/css”><!--
p {text-indent: 8pt}
a {text-decoration: none;font-family: Verdana;font-size: 14pt;color: navy}
Selector: p(paragraph)
- indents paragraphs by 8 pt.
![Page 54: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/54.jpg)
• Embedded Style Sheet:• Example:
<style type=“text/css”><!--
p {text-indent: 8pt}
a {text-decoration: none;font-family: Verdana;font-size: 14pt;color: navy}
Selector: a (anchor tag)- links have no underline
- links displayed in 14 pt Verdana
- link color is navy (normal, visited, and active states)
![Page 55: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/55.jpg)
• 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
![Page 56: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/56.jpg)
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
![Page 57: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/57.jpg)
EXTERNAL STYLE SHEET
• External Style Sheet (continued)• Two steps:
• creating the external style sheet• linking this style sheet into the desired
Web pages
![Page 58: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/58.jpg)
EXTERNAL STYLE SHEET
• 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
![Page 59: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/59.jpg)
EXTERNAL STYLE SHEET
• External Style Sheet: Example of code:
a {text-decoration: none;color: navy}
p {font-family: Verdana, Garamond;font-size: 11pt}
![Page 60: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/60.jpg)
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}
![Page 61: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/61.jpg)
EXTERNAL STYLE SHEET
• 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
![Page 62: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/62.jpg)
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”>
![Page 63: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/63.jpg)
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
![Page 64: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/64.jpg)
EXTERNAL 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
![Page 65: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/65.jpg)
HOMEWORK
• In Class – Activity• Worksheet 7B
![Page 66: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/66.jpg)
Project 8: Creating Style Sheets
66
![Page 67: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/67.jpg)
DAY 3CSS Classes
![Page 68: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/68.jpg)
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.
![Page 69: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/69.jpg)
Example of using an Embedded
Style Sheet
![Page 70: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/70.jpg)
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
![Page 71: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/71.jpg)
WORKING WITH STYLE SHEETS
• After the <title> tag, before the </head> tag, insert:
<style type=“text/css”><!--
p {text-indent: 12pt;font-family: Arial;font-size: 14pt}
![Page 72: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/72.jpg)
EMBEDDED STYLE SHEET
a {text-decoration: none;font-size: 18pt;color: green}
h1{color: red}
--></style>
![Page 73: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/73.jpg)
Working with Classes in Style
Sheets
![Page 74: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/74.jpg)
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
![Page 75: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/75.jpg)
WORKING WITH CLASSES
• 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
![Page 76: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/76.jpg)
WORKING WITH CLASSES
• 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
![Page 77: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/77.jpg)
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
![Page 78: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/78.jpg)
STEPS IN WRITING CLASSES
• Class Definition• Identifies the name of the class, and• Defines the styles that will be applied to
the particular tag
![Page 79: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/79.jpg)
STEPS IN WRITING CLASSES
• 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?
![Page 80: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/80.jpg)
STEPS IN WRITING CLASSES
• 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}
![Page 81: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/81.jpg)
STEPS IN WRITING CLASSES
• 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}
![Page 82: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/82.jpg)
STEPS IN WRITING CLASSES
• 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}
![Page 83: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/83.jpg)
STEPS IN WRITING CLASSES
• 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
Project 8: Creating Style Sheets
![Page 84: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/84.jpg)
STEPS IN WRITING CLASSES
• Using the class• Syntax:
<tag class=“classname”>
• Example:<h1 class=“special”>Blah Blah</h1><h1 class=“extra”>Yadda Yadda</h1>
![Page 85: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/85.jpg)
EXAMPLE OF CLASSES• Class Example:
• Type in a new page in Notepad:
<!-- Sample using Classes in Style Sheets -->
<html>
<head>
<title>Example with Classes in Style Sheets</title>
![Page 86: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/86.jpg)
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}
![Page 87: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/87.jpg)
EXAMPLE OF CLASSESp.smallblue {color: navy;
font-weight: bolder;
font-variant: small-caps;
font-style: normal;
font-size: 12pt}
![Page 88: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/88.jpg)
EXAMPLE OF CLASSESh1.redhead {color: red;
font-style: oblique}
h1.bluehead {color: navy;
font-weight: lighter}
-->
</style>
</head>
![Page 89: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/89.jpg)
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>
![Page 90: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/90.jpg)
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>
![Page 91: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/91.jpg)
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>
![Page 92: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/92.jpg)
EXAMPLE OF CLASSES
<p>This is normal; paragraph 7 </p>
<p class="greenitalic">This is paragraph 8</p>
</body>
</html>
![Page 93: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/93.jpg)
ADDING AN EMBEDDED STYLE SHEET
• Create a project 7 folder – save this as
classSample.htm
• View the file in the browser
![Page 94: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/94.jpg)
Project 8: Creating Style Sheets
94Example of Classes
![Page 95: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/95.jpg)
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?
![Page 96: UNIT 7 - Weeblymswardecke.weebly.com/.../1/7/1/6/17167688/unit_7_part_1.pdfINTRODUCTION TO STYLE SHEETS • Cascading Style Sheets (CSS) • CSS does not add content to a Web site;](https://reader030.vdocument.in/reader030/viewer/2022040515/5e70889d0075d80dc70b5a17/html5/thumbnails/96.jpg)
HOMEWORK
• In Class – Whiteboard Task• Worksheet 7C