1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

Introduction to HTML & CSS
Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.
Today CSS HTML A project.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Project 8 Creating Style Sheets.
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.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Robby Seitz 121 Powers Hall ADVANCED WEB DESIGN USING DREAMWEAVER
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Chapter 8 Creating Style Sheets.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
1 Lesson 9 Using JavaScript with Frames HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.
1 Lesson 10 Using JavaScript with Styles HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
Web Program Development1 February 23, 2011 HTML Web Page Development Debbie Bartlett February 23, 2011.
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
Lesson 4 HTML Structural Design Techniques
1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
Lesson 8 Creating Forms with JavaScript
Review HTML  What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
Chapter 12 Creating and Using XML Documents HTML5 AND CSS Seventh Edition.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
1 Web Developer Foundations: Using XHTML Chapter 9 Cascading Style Sheet Concepts.
Dreamweaver MX. 2 Creating External Style Sheets-1 (p. 400) n A style is a group of formatting attributes identified by a single name. n An ________ style.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Styles and Style Sheets for Design
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Web Technologies Website Development Trade & Industrial Education
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
1 Lesson 7 Using Images with JavaScript HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
Website Development with Dreamweaver
Introduction To CSS.. HTML Review What is HTML used for? Give some examples of formatting tags in HTML? HTML is the most widely used language on the Web.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.
1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
CSS Basic (cascading style sheets)
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Cascading Style Sheets CSS. Source W3Schools
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
Body and Heading Tags and their Attributes. Attribute Name DefinitionValues backgroundIndicates the background image of the Web page. Ex. Filename(path.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.
HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
WEB FOUNDATIONS CSS Overview. Outline  What is CSS  What does it do  Where are styles stored  Why use them  What is the cascade effect  CSS Syntax.
Web Basics: HTML/CSS/JavaScript What are they?
Create and edit web pages 4
Chapter 2 Developing a Web Page.
Madam Hazwani binti Rahmat
Link Label Text Label… Click Here… Image Image Lorem Ipsum Lorem Ipsum
>> Dynamic CSS Selectors
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Presentation transcript:

1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 22 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes among Web pages. Control HTML table appearance with CSS.

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 33 Vocabulary active cascading style Cascading Style Sheet.css CSS files hover look and feel normal style style class style sheets visited

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 44 Introduction A style is simply a collection of one or more attributes that are applied to the visual components of a Web page. A cascading style is a collection of one or more attributes that can be specified once within the header of a Web page and then applied to many instances of a particular tag.

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 55 Creating Cascading Style Sheets A Cascading Style Sheet is a collection of one or more cascading style codes that has been extracted from the header of a Web page and stored in a separate file in a specific (CSS) format. CSS makes it possible to customize the appearance and behavior of the Web site simply by changing the values in the style sheets.

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 66 Creating Cascading Style Sheets (continued) Web page using a Cascading Style Sheet By convention, Cascading Style Sheet files are always given a.css extension.

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 77 Exploring Hyperlink Styles There are four possible states of a link. The normal state of a hyperlink is the way it appears when the mouse pointer is not over it and it has never been clicked. The hover state defines the link’s appearance when the mouse pointer is over it but has not yet been clicked.

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 88 Exploring Hyperlink Styles (continued) A link’s active state is when it has the focus on a Web page and pressing the mouse button gives it focus. The visited state specifies a link’s appearance after it has been clicked at least once.

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 99 Exploring Hyperlink Styles (continued) By default, many popular browsers display text hyperlinks in an underlined, blue font. Navigation bar with hover, active, and visited links

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 10 Working with Style Classes CSS technology allows you to define style classes that can be applied to certain tags without affecting other tags of the same type. A style class is a named group of attributes that are defined in a Cascading Style Sheet and that can be applied to specified tags within an HTML document.

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 11 Sharing Style Classes All that is required for two or more Web pages to share a style class is for these Web pages to link in the style sheet in which the style class is defined. Although not a requirement, this is often done when the Web pages sharing the class are all displayed in a common frameset.

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 12 Exploring Table Styles Tables support a variety of attributes that are used to define column widths, border thickness and style and other table features. HTML table using style classes

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 13 Exploring Table Styles (continued) Because it is common for Web designers to want different tables on their Web pages to have different attributes, this is a perfect opportunity to make use of style classes.

Lesson 5 Barksdale / TurnerHTML and JavaScript BASICS 4E 14 Summary In this lesson, you learned: How to create a Cascading Style Sheet. How to control hyperlink behavior with CSS. How to create style classes. How to share style classes among Web pages. How to control HTML table appearance with CSS.