Download presentation
Presentation is loading. Please wait.
Published byCharla Clark Modified over 9 years ago
1
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4
2
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 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
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 4 Three ways to define style: 1. Within XHTML elements. 2. Within the HEAD element. 3. Through one or more style sheets.
9
Module 2: XHTML Basics LESSON 4 Hierarchy of Style Created by CSS. Rank order of how browsers determine which style to follow. Fourth rule is given greatest priority: 1.Browsers default 2.External style sheet 3.Internal style sheet (inside the tag 4.Inline style (inside an XHTML element)
10
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 4 CSS Syntax CSS Syntax has three parts: Selector Property Value Syntax:selector {property: value}
12
Module 2: XHTML Basics LESSON 4 Selector selector {property: value} The XHTML element to be styled. Examples include: PARAGRAPH BODY HEADING,
13
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 4 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
Module 2: XHTML Basics LESSON 4 Lesson Review What is the result of the following code? p {text-color: green}Each time the … tags are used, the text will be green. h1 {font-family: arial}Each time the 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 }
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.