Using Styles and Style Sheets for Design Chapter 8 Using Styles and Style Sheets for Design

Chapter 7 Lessons Introduction Create and use embedded styles Modify embedded styles Use CSS3 and Media Queries Work with conflicting styles

Using Cascading Style Sheets Introduction Using 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

Using Styles and Style Sheets Lesson 1: Create and Use Embedded Styles Using 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

Creating and Applying a Custom Style Lesson 1: Create and Use Embedded Styles Creating 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 (.)

Creating and Applying a Custom Style – cont. Lesson 1: Create and Use Embedded Styles Creating and Applying a Custom Style – cont. Rule in CSS Panel – Custom Style with . Class Selector Rule Name Rule Location

Creating and Applying a Custom Style – cont. Lesson 1: Create and Use Embedded Styles Creating and Applying a Custom Style – cont. To add a Custom Style to a block of text or a page element: Select the page element or block of text using the Custom Style Access the HTML Property Inspector or CSS Property Inspector 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

Using Styles and Style Sheets – Inline Styles Lesson 1: Create and Use Embedded Styles Using Styles and Style Sheets – Inline Styles Rule in CSS Panel – Inline Style with # ID Selector Rule Name Rule Location

Using Styles and Style Sheets – Inline Styles Lesson 1: Create and Use Embedded Styles Using Styles and Style Sheets – Inline Styles To add an Inline Style to a page element: Select the page element using the Inline Style Access the HTML Property Inspector Select the Inline Style from the ID List Box

Editing Styles Lesson 2: Modify Embedded Styles Editing a style can be done using various methods: CSS Properties Inspector CSS Rule Definition dialog box Accessed through Edit Rule button in either the CSS Styles Panel or the CSS Property Inspector CSS Styles Panel Properties Pane Edit code of Embedded CSS Style found in the Head Section of page HTML Code

Lesson 2: Modify Embedded Styles Editing Styles – cont.

Redefining HTML Tags Lesson 2: Modify Embedded Styles 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

Redefining HTML Tags Lesson 2: Modify Embedded Styles To change the definition of an HTML tag: 1. Specify Tag to redefine HTML element 2. Choose HTML element to redefine 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 Sheet Lesson 2: Modify Embedded Styles Adding 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

Adding Hyperlink Rules to a CSS Style Sheet Lesson 2: Modify Embedded Styles Adding Hyperlink Rules to a CSS Style Sheet To create styles for all links using a style sheet: 1. Specify Compound for links 2. Choose link selector from list 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 Lesson 2: Modify Embedded Styles CSS Styles Panel – All vs. Current Summary for Selection Pane All Rules Pane Rules Pane Properties Pane Properties Pane

Understanding CSS3 Features Lesson 3: Use CSS3 and Media Queries Understanding 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

Media Queries and Adaptive Websites Lesson 3: Use CSS3 and Media Queries Media 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

Validating for CSS3 Standards Lesson 3: Use CSS3 and Media Queries Validating 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

Adobe BrowserLab Lesson 3: Use CSS3 and Media Queries 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

The Order of Precedence Lesson 4: Work with Conflicting Styles The 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

The Order of Precedence Lesson 4: Work with Conflicting Styles The Order of Precedence The second order of precedence is by importance and origin as follows: user important declarations author important declarations author normal declarations user normal declarations 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

Using Tools to Manage Styles Lesson 4: Work with Conflicting Styles Using 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