1 / 17

Introduction to Cascading Style Sheets (CSS)

Introduction to Cascading Style Sheets (CSS). LESSON 4. Module 2: HTML Basics. Lesson Overview In this lesson, you will: Understand the value of using Cascading Style Sheets (CSS). Modify the style of a Web page with the use of CSS. Apply CSS hierarchy. Guiding Questions for Lesson 4

emilie
Télécharger la présentation

Introduction to Cascading Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Cascading Style Sheets (CSS) LESSON 4 Module 2: HTML Basics

  2. Lesson Overview • In this lesson, you will: • Understand the value of using Cascading Style Sheets (CSS). • Modify the style of a Web page with the use of CSS. • Apply CSS hierarchy.

  3. Guiding Questions for Lesson 4 • Look at your current “Attributes and Tags” Web page. Distinguish between the “content” and the “style” of this Web page? • How did you make changes to the style of your “Attributes and Tags” Web page in previous lessons?

  4. What are Cascading Style Sheets? Create a consistent look within a Web site. Web designers use them to easily change the look of entire Web site with a few simple changes in the CSS code.

  5. The Need for CSS XHTML defines the content of a Web page. With popularity of the Internet, style became important. XHTML alone makes it difficult to separate style from the content. The Result World Wide Consortium (W3C) created styles as a part of HTML 4.0. CSS separates content from style. A separate CSS file can contain most of the style details for the Web site.

  6. Advantages of Using CSS • Creates consistency. • Example without a CSS file: • A designer creates a Web page containing code for the heading to be bold, green, 32 pt. Arial font. • On the second page of the site, a heading is entered but this time the designer enters 26 pt. font for the heading. • Example with a CSS file: • Designer creates a CSS file to define h1 as bold, green, 32 pt. Arial font. • The CSS file is referenced on both the first and second page. • Every time h1 is used, a heading is as bold, green, 32 pt. Arial font. • A change in the CSS file automatically changes both pages.

  7. Advantages of Using CSS Improves the load time for Web pages. CSS code serves as the directions for the browser to display both content and style. Once the style has been downloaded into memory (cached), subsequent pages using the same style will load faster.

  8. Three ways to define style: Within XHTML elements. Within the HEAD <head> element. Through one or more style sheets.

  9. Hierarchy of Style Created by CSS. Rank order of how browsers determine which style to follow. Fourth rule is given greatest priority: Browsers default External style sheet Internal style sheet (inside the <head> tag Inline style (inside an XHTML element)

  10. Cascading Allows for a style to be defined in an external style sheet and then to be overridden as needed within the inline style. Example: paragraph style could be defined for regular text but when words need to be emphasized, the emphasis could be created inline.

  11. CSS Syntax CSS Syntax has three parts: Selector Property Value Syntax: selector {property: value}

  12. Selector selector {property: value} The XHTML element to be styled. Examples include: PARAGRAPH <p> BODY <body> HEADING <h1>, <h2>

  13. Property selector {property: value} The attribute of the element to set. Example: the style for the “selector” h1, can be set as 12 pt font size by providing a value for the “property” font-size. Examples of properties: font-size text-align color font-family text-indent

  14. Value selector {property: value} The specific value of property. Examples of properties and their values: font-size: 12 pt text-align: center Color: #00FF00 font-family: arial text-indent: 5em

  15. One Selector, Multiple Styles A single selector can have multiple styles defined for it. Syntax includes braces and semi-colons. A BODY element could be defined as: body { text-align: right; color: #FFFFFF; background-color: #000000; font-style: underline }

  16. Multiple Selectors, Same Style Multiple selectors can have a defined style. Commas separate the selectors. HEADER element styles can be defined as: h1,h2,h3,h4,h5,h6 { text-align: center; color: red; font-family: arial }

  17. Lesson Review What is the result of the following code? p {text-color: green} Each time the <p>…</p> tags are used, the text will be green. h1 {font-family: arial} Each time the <h1> tags are used, the text will be in the Arial style. body { The body will have font font-family: times new roman; in Times New Roman which is color: blue; blue on a red background. background-color: #FF0000 }

More Related