Chapter 8 Creating Style Sheets.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets
Advertisements

Chapter 3 – Web Design Tables & Page Layout
Creating Tables in a Web Site
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.
Cascading Style Sheets
Today CSS HTML A project.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Introducing CSS CIS 133 mashup Javascript, jQuery and XML 1.
Project 8 Creating Style Sheets.
Creating and Editing a Web Page Using Inline Styles
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.
© 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.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
CSW131 Steven Battilana 1 CSW 131 – Chapter 5 (More) Advanced CSS Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston,
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.
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.
Chapter 5 Creating an Image Map.
Starting BBEdit (Notepad) and Opening an HTML File Open the Public Folder Start Notepad or BBEdit Click File on the menu bar, and then click Open In the.
Chapter 3 Working with Text and Cascading Style Sheets.
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
4.01 Cascading Style Sheets
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Using Frames in a Web Site
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
Creating Tables in a Web Site Using an External Style Sheet
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets.
1 Web Developer Foundations: Using XHTML Chapter 9 Cascading Style Sheet Concepts.
Adding an Inline Style Sheet Page without Inline Style Sheet Page with Inline Style Sheet.
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
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.
Chapter 3 Working with Text and Cascading Style Sheets.
Creating Tables in a Web Site
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
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.
Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
Tutorial 5 Formatting with CSS. Objectives Session 5.1 – Evaluate why CSS styles are used – Determine where to write styles – Create an element selector.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
HTML Concepts and Techniques Fifth Edition Chapter 4 Creating Tables in a Web Site.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Creating and Editing a Web Page
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.
Creating and Editing a Web Page Using Inline Styles
Creating Web Pages with Links, Images, and Embedded Style Sheets
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
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.
4.01 Cascading Style Sheets
Madam Hazwani binti Rahmat
Project 8 Creating Style Sheets.
Creating Tables in a Web Site Using an External Style Sheet
Web Development & Design Foundations with HTML5
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Working with Text and Cascading Style Sheets
Using Cascading Style Sheets (CSS)
Tutorial 3 Working with Cascading Style Sheets
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
Presentation transcript:

Chapter 8 Creating Style Sheets

Chapter Objectives Describe the three different types of Cascading Style Sheets Add an embedded style sheet to a Web page Change the margin and link styles using an embedded style sheet Create an external style sheet Chapter 8: Creating Style Sheets

Chapter Objectives Change the body margins and background using an external style sheet Change the link decoration and color using an external style sheet Change the font family and size for all paragraphs using an external style sheet Change table styles using an external style sheet Chapter 8: Creating Style Sheets

Chapter Objectives Use the <link /> tag to insert a link to an external style sheet Add an inline style sheet to a Web page Change the text style of a single paragraph using an inline style sheet Chapter 8: Creating Style Sheets

Using Style Sheets Style - a rule that defines the appearance of an element on a Web page Style sheet – series of rules that defines the style for Web page or entire Web site Alter appearance of Web pages by changing characteristics such as font family, font size, margins, and link specifications Adhere to a common language with set standards and rules Cascading Style Sheets (CSS) – language allows Web developer to write code statements that control the style of elements on a Web page Chapter 8: Creating Style Sheets

Using Style Sheets CSS is not HTML- separate language used to enhance the display capabilities of HTML W3C – defines the specifications for CSS Used to add visual elements such as colors, borders, margins, and font styles to your Web pages Makes content look more stylish Example: want all text paragraphs indented by five spaces: Use style sheet to handle the indenting, rather than coding each paragraph CSS can establish a standard look for all Web pages in a Web site. Using CSS, avoid tedious steps of adding repetitive code to format the same types of information. Chapter 8: Creating Style Sheets

Using Style Sheets (3 types of style sheets) Inline style sheet – add a style to an individual HTML tag (heading or paragraph) Changes specific tag, does not affect other tags in document Embedded style sheet – add style sheet within the <head> tags of the HTML document defines the style for entire Web page External style sheet (linked) – create a text file that contains all the styles to be applied Save file with extension .css Add link to this external style sheet on any Web page in the Web site Most flexibility apply same formats to all pages in Web site Chapter 8: Creating Style Sheets

Style Sheet Precedence Each style sheet type has a different level of precedence or priority in relationship to the others. Inline – takes precedence over any other style sheet Embedded – overrides an external style sheet Because style sheets have different levels of precedence, all three types of style sheets can be used on a single Web page May want some elements of a Web page to match other Web pages in a site, but also want to vary the look of certain sections of that web page Do this by using the three types of style sheets Chapter 8: Creating Style Sheets

Style Sheet Precedence Chapter 8: Creating Style Sheets

Style Statement Format Style statement - a rule that defines the style of an element on a Web page Inline style sheet example: <h1 style = “font-family: Arial; font-color: navy”> 2 parts of style statement Selector – identifies the page elements (h1) Declaration – identifies how elements should appear Everything in quotation marks Includes at least one type of style or property For each property, declaration includes a related value, which specifies display parameters for that specific property. Chapter 8: Creating Style Sheets

Inline Style Sheets Inline style sheet – add a style to an individual HTML tag (heading or paragraph) Changes specific tag, does not affect other tags in document Inline style sheet example: <p style = “font-style: italic; font-size: 8pt”> Override both embedded and external style sheets offering a great amount of flexibility Inline style sheets useful when one section of a Web page needs to have a style different from the rest of the Web page. Chapter 8: Creating Style Sheets

Embedded Style Sheets Embedded style sheet – add style sheet within the <head> tags of the HTML document defines the style for entire Web page End the embedded style sheet by adding an end </style> tag <style type="text/css"> <!-- p {text-indent: 20pt} a {text-decoration: none; font-family: Verdana, Garamond; font-size: 12pt; color: navy} a:hover {background: navy; color: white} --> </style> Chapter 8: Creating Style Sheets

Embedded Style Sheets Style statement using the a selector Changes all link states (normal, visited, active) Can define a unique style for each link state by creating 3 separate style statements a:link a:visited a:active a:hover – selector used to define the style of a link when the mouse pointer points to or hovers over a link. Chapter 8: Creating Style Sheets

External Style Sheets External style sheet (linked) – most comprehensive create a text file that contains all the styles to be applied Save file with extension .css Add link to this external style sheet on any Web page in the Web site Most flexibility apply same formats to all pages in Web site 2 Step Process Create external style sheet Enter all style statements in a text file using Notepad or another text editor (.css extension) example: styles1.css Link this style sheet onto desired Web pages <link /> tag must be inserted within <head> tags of Web page <link rel=“stylesheet” type=“text/css” href=“styles1.css” /> Chapter 8: Creating Style Sheets

External Style Sheets (example) a {text-decoration: none; color: black} p {font-family: Verdana, Garamond; font-size: 11pt} table {font-family: Verdana, Garamond; font-size: 10pt; border-color: #6d6f7b; border-style: double} th {background-color: #6d6f7b; color: white; text-align: left} Chapter 8: Creating Style Sheets

External Style Sheets Format of external style sheet – similar to format of embedded style sheet external style sheet, does not need <style> tags to start and end the style sheet It includes just the style statements Add link to this external style sheet on any Web page in the Web site Most flexibility apply same formats to all pages in Web site Chapter 8: Creating Style Sheets

Adding an Embedded Style Sheet File name HTML code before modifications Chapter 8: Creating Style Sheets

Text-decoration property settings Blink – causes the text to blink on and off Line-through – places a line through the middle of the text Overline – places a line above the text Underline – places a line below the text Note: can apply two different text styles to a link by specifying two text-decoration values, separating the choices with a space Example: {text-decoration: underline overline} Chapter 8: Creating Style Sheets

Adding an Embedded Style Sheet Indicates that CSS used in text file Start <style> tag Changes paragraph style Beginning comment line hides CSS from browser, if needed Changes link style Sets link hover style End comment line End <style> tag Chapter 8: Creating Style Sheets

Viewing index HTML File Text set to 12-point Verdana menu.html file Text indented 20 points Link hover with white text on color code #6d6f7b background Chapter 8: Creating Style Sheets

Printing an HTML File and Web Page Print the Web page from the browser Click the menu.html - Notepad button on the taskbar Click File on the menu bar and then click Print on the File menu Click the Print button in the Print dialog box to print the HTML code Chapter 8: Creating Style Sheets

Printing menu HTML File Chapter 8: Creating Style Sheets

Creating an External Style Sheet using Notepad Click File on the menu bar and then click New Enter the CSS code as shown in Table 8–5 on page HTML 360 click File on the menu bar and then click Save As. Type styles1.css in the File name text box. Click the Save button in the Save As dialog box to save the file as styles1.css Click the File menu, click Print on the File menu, and then click the Print button in the Print dialog box Chapter 8: Creating Style Sheets

Creating an External Style Sheet File saved as style1.css Paragraph style Style for all link states Table header style Table style Caption style Chapter 8: Creating Style Sheets

Linking to an External Style Sheet Click Notepad button on the taskbar Click File on the menu bar, and then click Open on the File menu Navigate to the proper folder. Click the Files of type box arrow, and then click All Files to show all files in the folder. Click the contact.html file Click the Open button in the Open dialog box Highlight the text, <!--Insert link statement here -->, in line 10 Type <link rel=”stylesheet” type=”text/css” href=”styles1.css” /> to enter the link to the external style sheet Chapter 8: Creating Style Sheets

Linking to an External Style Sheet Chapter 8: Creating Style Sheets

Linking to an External Style Sheet Link tag placed within <head> </head> tags Link to external style sheet Relation indicates style sheet is linked Text indicates text file uses CSS code Reference indicates name and location of linked style sheet Chapter 8: Creating Style Sheets

Working with Classes in Style Sheets In some Web sites, might need more control over the style on a Web page. Example: rather than having all paragraphs appear in the same style, want 1st one to be different. To gain more control – define specific elements of an HTML file as a category, or class. Create specific style for each class Using classes in style sheets allows applying styles selectively to HTML tags See HTML page 367 in book for examples Chapter 8: Creating Style Sheets

Working with Classes in Style Sheets Defining and using Classes (2 Step Process) Any elements that belong to the class are marked by adding the tag: class=“classname” To define a class that includes any beginning paragraphs Example: <p class=“beginning”> After naming the classes, use the names in a selector and define a specific style for the class Example: within the <style> tags in an embedded or external style sheet – style statement in format: p.beginning {color: red; font: 20pt} Chapter 8: Creating Style Sheets

Adding an Inline Style Sheet If necessary, click the welcome.html - Notepad button on the taskbar so the file welcome.html is displayed Click immediately to the right of the p in the <p> tag on line 30. Press the SPACEBAR and then type style=”fontstyle: italic; font-size: 8pt” to insert the inline style sheet Chapter 8: Creating Style Sheets

Adding an Inline Style Sheet Inline style sheet added font-size property font-style property font-style value set to italic font-size value set to 8-point Chapter 8: Creating Style Sheets

Viewing and Printing Framed Web Pages New style for links defined by embedded style sheet Paragraph style defined by external style sheet that is linked to pages Last paragraph style defined by inline style sheet Chapter 8: Creating Style Sheets

Chapter Summary Describe the three different types of Cascading Style Sheets Add an embedded style sheet to a Web page Change the margin and link styles using an embedded style sheet Create an external style sheet Chapter 8: Creating Style Sheets

Chapter Summary Change the body margins and background using an external style sheet Change the link decoration and color using an external style sheet Change the font family and size for all paragraphs using an external style sheet Change table styles using an external style sheet Chapter 8: Creating Style Sheets

Chapter Summary Use the <link /> tag to insert a link to an external style sheet Add an inline style sheet to a Web page Change the text style of a single paragraph using an inline style sheet Chapter 8: Creating Style Sheets

Homework # 13 In the Lab 1 page HTML 378-379 Using External and Internal Styles See INF 186 Computer Assignment 13 Web page for details, hints, and requirements for the assignment Project 4: Creating Tables in a Web Site 36 36

Chapter 8 Complete Creating Style Sheets