chapter 8 using styles and style sheets for design
TRANSCRIPT
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