Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.

Slides:

Advertisements

Similar presentations

Introduction to HTML & CSS

Advertisements

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.

CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.

Project 8 Creating Style Sheets.

Using Advanced Cascading Style Sheets

กระบวนวิชา 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.

Cascading Style Sheets Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.

Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.

Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.

AD Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS Cascading Style Sheets.

Cascading Style Sheets Controlling the Display Of Web Content.

XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9 1 Microsoft Office FrontPage 2003 Tutorial 9 – Using Layout Tables, Styles, and Office.

4.01 Cascading Style Sheets

Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.

Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.

Creating Tables in a Web Site Using an External Style Sheet

Principles of Web Design 6 th Edition Chapter 4 – Cascading Style Sheets.

HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

Adding an Inline Style Sheet Page without Inline Style Sheet Page with Inline Style Sheet.

HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets.

Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.

Web Technologies COMP6115 Session 2: Planning, Designing, Constructing and Testing Static Web Sites Dr. Paul Walcott Department of Computer Science, Mathematics.

XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.

Advanced CSS - Page Layout. Advanced CSS  Compound Selectors:  Is a Dreamweaver term, not a CSS term.  Describes more advanced types of selectors such.

STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.

 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)

CSS – Presentation of Information. Types of Style Sheets External Embedded h1{color:red; font-family: Arial;} Inline Text is here.

XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.

CSS Basic (cascading style sheets)

© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.

Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,

XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.

Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

Chapter 6 Introducing Cascading Style Sheets Principles of Web Design, 4 th Edition.

Moving Boxes The CSS ‘box’ Model and moving elements around the page 1.

© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.

Cascading Style Sheets

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.

CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.

Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.

How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

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.

Creating Web Pages with Links, Images, and Embedded Style Sheets

Chapter 8 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.

Chapter 7.  Change body and link styles  Create a drop-down menu  Change color and font styles in the menu  Create a pop-up effect using CSS  Utilize.

XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

CASCADING STYLE SHEET 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.

Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.

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.

Week-12 (Lecture-1) Cascading Style Sheets (CSS): describe how documents are presented on screens. Types of Style Sheets: External Style Sheet - Define.

Web Basics: HTML/CSS/JavaScript What are they?

CSS HTML and website development.

4.01 Cascading Style Sheets

Madam Hazwani binti Rahmat

Project 8 Creating Style Sheets.

CASCADING STYLE SHEET CSS.

Training & Development

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.

4.01 Cascading Style Sheets

5.00 Apply procedures to organize content by using Dreamweaver. (22%)

Presentation transcript:

Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition

Add an embedded style sheet to a Web page Change the body and link styles using an embedded style sheet Create a drop-down menu using an embedded style sheet Change the color and font styles of the drop-down menus Create an external style sheet Chapter 7: Using Advanced Cascading Style Sheets2 Chapter Objectives

Change the paragraph margins and font styles using an external style sheet Create a pop-up using an external style sheet Use classes, pseudoclasses, and divisions for the pop-up effect Use the tag to insert a link to an external style sheet Add an external style sheet for printing Web pages Chapter 7: Using Advanced Cascading Style Sheets3 Chapter Objectives

Plan the Web site Analyze the need Choose the content for the Web page Determine the type of style sheets to use for the pages and their precedence Create the style sheets Chapter 7: Using Advanced Cascading Style Sheets4 Plan Ahead

Chapter 7: Using Advanced Cascading Style Sheets5 Using Style Sheets

Chapter 7: Using Advanced Cascading Style Sheets6 Shorthand Properties

Chapter 7: Using Advanced Cascading Style Sheets7 Measurement Values

Chapter 7: Using Advanced Cascading Style Sheets8 Position Property Values

Chapter 7: Using Advanced Cascading Style Sheets9 Adding an Embedded Style Sheet

It is useful to understand how you can structure your Web page by dividing it into logical sections The CSS box model describes the structure of the elements that are displayed on the Web page The margin specifies the space between the element and other content on the Web page The border is what surrounds the element content The padding is the space between the content of the element and the box border Chapter 7: Using Advanced Cascading Style Sheets10 Structuring the Web page

Chapter 7: Using Advanced Cascading Style Sheets11 Structuring the Web page

Chapter 7: Using Advanced Cascading Style Sheets12 Creating an External Style Sheet

Chapter 7: Using Advanced Cascading Style Sheets13 Linking to an External Style Sheet

Chapter 7: Using Advanced Cascading Style Sheets14 Creating an External Style Sheet for Printing

Chapter 7: Using Advanced Cascading Style Sheets15 Creating an External Style Sheet for Printing

Add an embedded style sheet to a Web page Change the body and link styles using an embedded style sheet Create a drop-down menu using an embedded style sheet Change the color and font styles of the drop-down menus Create an external style sheet Chapter 7: Using Advanced Cascading Style Sheets16 Chapter Summary

Change the paragraph margins and font styles using an external style sheet Create a pop-up using an external style sheet Use classes, pseudoclasses, and divisions for the pop-up effect Use the tag to insert a link to an external style sheet Add an external style sheet for printing Web pages Chapter 7: Using Advanced Cascading Style Sheets17 Chapter Summary

Chapter 7 Complete HTML 7 th Edition