Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading Style SHEETS for formatting and layout control CSS HTML HTML HTML HTML HTML.

Published byCarmella Morrison Modified over 8 years ago

Similar presentations

Presentation on theme: "Cascading Style SHEETS for formatting and layout control CSS HTML HTML HTML HTML HTML."— Presentation transcript:

1 Cascading Style SHEETS for formatting and layout control CSS HTML HTML HTML HTML HTML

2 Why Use CSS? Consistency and standardization (W3C)W3C Additional and consistent control to look and layout of all web pages in a site SAVES TIME!!!Changes can be made to multiple pages through a single external source – SAVES TIME!!! Allows for more structurally sound code CSS HTML HTML HTML HTML HTML

3 Vocabulary Equivalents CSS HTML SelectorsSelectors DeclarationsDeclarations –Properties –Values SyntaxSyntax –{Curly Braces} –Colons : –No quotes –Semi-colons ; Elements/TagsElements/Tags DefinitionsDefinitions –Attributes –Values SyntaxSyntax – –Equal signs = –Quotes “ ” –Spaces

4 HTML Code CSS Code body {font-size: medium; font-family: verdana} Located in AREA WITHIN TAG Located in area within tag LINKED to outside CSS file in area in area within tag

5 Locations for CSS linkheadWithin a separate Notepad file with a.css extension then linked with a tag in the section of an HTML page headstyleWithin the area within a tag Embedded within a line of HTML code as a “style” attribute with declarations listed in one set of quotes

6 In Notepad, linked to HTML page <html><head> CSS Sample CSS Sample </head>

7 In the section <html><head> CSS Sample CSS Sample </head> Takes precedence over External CSS

8 Embedded in HTML code <html><head> CSS Sample CSS Sample </head><body> Sample text Sample text Takes precedence over External CSS AND CSS embedded in the section

9 CSS Online RESOURCES Creating Order from Chaos Creating Order from Chaos Webmonkey - CSS Resource Pages http://hotwired.lycos.com/webmonkey/reference/stylesheet_gui de/Webmonkey - CSS Resource Pages http://hotwired.lycos.com/webmonkey/reference/stylesheet_gui de/ http://hotwired.lycos.com/webmonkey/reference/stylesheet_gui de/ http://hotwired.lycos.com/webmonkey/reference/stylesheet_gui de/ Cascading Style Sheets http://www.webreference.com/authoring/style/sheets/Cascading Style Sheets http://www.webreference.com/authoring/style/sheets/ http://www.webreference.com/authoring/style/sheets/ The CSShark Answers FAQs The CSS Know-How Site http://www.mako4css.com/The CSShark Answers FAQs The CSS Know-How Site http://www.mako4css.com/ http://www.mako4css.com/ W3Schools CSS Samples http://www.w3schools.com/css/css_examples.aspW3Schools CSS Samples http://www.w3schools.com/css/css_examples.asp http://www.w3schools.com/css/css_examples.asp

10 Read the introduction at WebMonkey http://hotwired.lycos.com/webmo nkey/reference/stylesheet_guide/ Yes…RIGHT NOW!!!

11 Go to the class agenda for today Click on the link within the item CSS Practice CSS Practice Read it NOW… …START it TODAY!!!

12 SAMPLE CSS

Download ppt "Cascading Style SHEETS for formatting and layout control CSS HTML HTML HTML HTML HTML."

Similar presentations

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Computer Applications II.  A Style Sheet is a web page development tool that allows the developer to make global changes to a web page (or web site)

Computer Applications II.  A Style Sheet is a web page development tool that allows the developer to make global changes to a web page (or web site)
Today CSS HTML A project.

Today CSS HTML A project.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.

HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.

Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.
CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.

CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Cascading Style Sheets Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.

Cascading Style Sheets Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.
XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.

XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.
Chapter 3 Working with Text and Cascading Style Sheets.

Chapter 3 Working with Text and Cascading Style Sheets.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:

Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.

Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.
Controlling Page Style: Cascading Style Sheets (CSS) References: 1.Wang, P.S & Katila, S. (2004). A Introduction to Web Design and Programming. CA: Thomson.

Controlling Page Style: Cascading Style Sheets (CSS) References: 1.Wang, P.S & Katila, S. (2004). A Introduction to Web Design and Programming. CA: Thomson.
CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
4.01 Cascading Style Sheets

4.01 Cascading Style Sheets
CSSMR.Mostafa badr1. Lesson 3 Creating an Style Sheet Lesson 2 Structure of the Style Lesson 1: What Cascading Style Sheets are?

CSSMR.Mostafa badr1. Lesson 3 Creating an Style Sheet Lesson 2 Structure of the Style Lesson 1: What Cascading Style Sheets are?
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.

Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
Basics of HTML.

Basics of HTML.
STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.

STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.
CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.

CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.

Similar presentations

Ads by Google