ChaptChapter 8er 8Using Styles and Style Sheets

for Design

Chapter 7 LessonsChapter 7 Lessons

Introduction1. Create and use embedded styles2. Modify embedded styles3. Use CSS3 and Media Queries4. Work with conflicting styles

Using Cascading Style SheetsUsing Cascading Style Sheets

• Most powerful method to ensure that all elements in a website are formatted consistently– External – Formatting rules kept in a separate file

• Every page attached to external style sheet will update when style sheet file is modified

• Better practice for formatting code to be in separate external file– Embedded – style code is located within the head section of the

HTML code of a web page• Embedded styles do not format website content globally

IntroductionIntroduction

Using Styles and Style SheetsUsing Styles and Style Sheets

• Embedded CSS styles– Styles whose code is

located in the head section of the HTML code of a Web page

– An embedded style overrides an external style

• Inline Style– Part of individual page

code in body section– Refers to specific instance

of Tag, rather than global tag

Lesson 1: Create and Use Embedded StylesLesson 1: Create and Use Embedded Styles

Creating and Applying a Custom StyleCreating and Applying a Custom Style

• A Custom (or class) Embedded Style contains a combination of formatting attributes that can be applied to a block of text or other page elements

• To create a new custom style, use the New CSS Rule dialog box– To specify the new style as an embedded style, Rule Definition

location should be “This Document Only”

• Custom Embedded Style name begins with a period (.)

Lesson 1: Create and Use Embedded StylesLesson 1: Create and Use Embedded Styles

Creating and Applying a Custom Style – cont.Creating and Applying a Custom Style – cont.

Class Selector

Rule Name

Rule Location

Rule in CSS Panel – Custom Style with .

Lesson 1: Create and Use Embedded StylesLesson 1: Create and Use Embedded Styles

Creating and Applying a Custom Style – cont.Creating and Applying a Custom Style – cont.

• To add a Custom Style to a block of text or a page element:1. Select the page element or block of text using the Custom Style2. Access the HTML Property Inspector or CSS Property Inspector3. Select the Custom Style from the Class List Box in the HTML

Property Inspector or the Targeted Rule List Box in the CSS Property Inspector

Lesson 1: Create and Use Embedded StylesLesson 1: Create and Use Embedded Styles

Using Styles and Style Sheets – Inline StylesUsing Styles and Style Sheets – Inline StylesLesson 1: Create and Use Embedded StylesLesson 1: Create and Use Embedded Styles

ID Selector

Rule Name

Rule Location

Rule in CSS Panel – Inline Style with #

Using Styles and Style Sheets – Inline StylesUsing Styles and Style Sheets – Inline Styles

• To add an Inline Style to a page element:1. Select the page element using the Inline Style2. Access the HTML Property Inspector3. Select the Inline Style from the ID List Box

Lesson 1: Create and Use Embedded StylesLesson 1: Create and Use Embedded Styles

Editing StylesEditing Styles

• Editing a style can be done using various methods:1. CSS Properties Inspector2. CSS Rule Definition dialog box• Accessed through Edit Rule button in either the CSS Styles

Panel or the CSS Property Inspector3. CSS Styles Panel Properties Pane4. Edit code of Embedded CSS Style found in the Head Section of

page HTML Code

Lesson 2: Modify Embedded StylesLesson 2: Modify Embedded Styles

Editing Styles – cont.Editing Styles – cont.Lesson 2: Modify Embedded StylesLesson 2: Modify Embedded Styles

Redefining HTML TagsRedefining HTML Tags

• When you use the Property inspector to format a web page element, a predefined HTML tag is added to that element

• Once you save the rule and apply it, the tags you target will be formatted according to the altered settings you specified

Lesson 2: Modify Embedded StylesLesson 2: Modify Embedded Styles

2. Choose HTML element to redefine

Redefining HTML TagsRedefining HTML Tags

• To change the definition of an HTML tag:

Lesson 2: Modify Embedded StylesLesson 2: Modify Embedded Styles

1. Specify Tag to redefine HTML element

3. Specify where Rule should be saved (embedded or external)

4. Use the CSS Rule Definition dialog box to redefine HTML element

Adding Hyperlink Rules to a CSS Style SheetAdding Hyperlink Rules to a CSS Style Sheet

• Compound selectors are used to create styles for a combination of rules– Class, ID, or Tag

• Compound rules are also used to style states of a tag• Compound rule can be created to style the way a link

looks when you hover over it with your cursor– a:link – unvisited link– a:visited – visited link– a:hover – link when mouse is hover over it

Lesson 2: Modify Embedded StylesLesson 2: Modify Embedded Styles

Adding Hyperlink Rules to a CSS Style SheetAdding Hyperlink Rules to a CSS Style Sheet

• To create styles for all links using a style sheet:

Lesson 2: Modify Embedded StylesLesson 2: Modify Embedded Styles

2. Choose link selector from list

1. Specify Compound for links

3. Specify where Rule should be saved (embedded or external)

4. Use the CSS Rule Definition dialog box to redefine link rule

CSS Styles Panel – All vs. Current CSS Styles Panel – All vs. Current Lesson 2: Modify Embedded StylesLesson 2: Modify Embedded Styles

All Rules Pane

Properties Pane

Summary for Selection Pane

Properties Pane

Rules Pane

Understanding CSS3 FeaturesUnderstanding CSS3 Features

• CSS3 is the latest version of CSS being developed by the World Wide Web Consortium (W3C)

• CSS3 introduced improved coding techniques, such as new tags to insert audio and video objects

• Examples:– WOFF (Web Open Font Format) fonts: @font-face property allows a

browser to access and deliver a specified font– Semantic coding: values such as “small” or “large” instead of pixels for

text properties– Rounded Corners of div tags– Tabs and Accordions for navigation

Lesson 3: Use CSS3 and Media QueriesLesson 3: Use CSS3 and Media Queries

Media Queries and Adaptive WebsitesMedia Queries and Adaptive Websites

• Media Query are files that specify set parameters for displaying pages on separate devices, such as tablets or smart phones

• Media Queries specify a different style sheet for each device: a style sheet for a desktop monitor, a style sheet for a tablet, and a style sheet for a cell phone

• Adaptive websites are websites that adjust or modify the page content to fit the user’s needs and device type used to view the site

Lesson 3: Use CSS3 and Media QueriesLesson 3: Use CSS3 and Media Queries

Validating for CSS3 StandardsValidating for CSS3 Standards

• Validate your CSS3 code is compliant with today’s standards before publishing

• Utilize free validation service through W3C.org to check style sheets

Lesson 3: Use CSS3 and Media QueriesLesson 3: Use CSS3 and Media Queries

Adobe BrowserLabAdobe BrowserLab

• Online service that you can access through Dreamweaver to test your site with multiple browsers, without needing to have the browser programs installed on your computer

• Provides online viewing, as well as diagnostic and comparison tools

Lesson 3: Use CSS3 and Media QueriesLesson 3: Use CSS3 and Media Queries

The Order of PrecedenceThe Order of Precedence

• Cascading refers to the way styles are ranked in order of precedence as they are applied to page elements

• Style sheets originate from three sources:– the author, who is the creator of the page and style sheet– the user, or person who is viewing the page– the user agent, the software through which the page is

delivered

• The first order of precedence is to find declarations that specify and match the media type being used, such as a computer screen

Lesson 4: Work with Conflicting StylesLesson 4: Work with Conflicting Styles

The Order of PrecedenceThe Order of Precedence

• The second order of precedence is by importance and origin as follows:1. user important declarations2. author important

declarations3. author normal declarations4. user normal declarations5. user agent declarations

• The third order of precedence is by specificity of the selector

• The fourth order of precedence is by order specified in the code– Imported, or external style

sheets, are considered to be before any internal styles

Lesson 4: Work with Conflicting StylesLesson 4: Work with Conflicting Styles

Using Tools to Manage StylesUsing Tools to Manage Styles

• The Browser Compatibility Check feature flags issues on a page that may present a problem when viewed in a particular browser

• Inspect mode helps you to identify HTML elements and their associated styles

• Disable/Enable CSS allows you to disable a rule property in Design view so you can compare the effects of the affected page element with and without that property

Lesson 4: Work with Conflicting StylesLesson 4: Work with Conflicting Styles