chp16_final - Mastering the Internet, XHTML, and JavaScript...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Mastering the Internet, XHTML, and JavaScript Chapter 16 Cascading Style Sheets Goals and Objectives Chapter Headlines Introduction CSS Syntax Linking CSS to XHTML Inheritance and Cascading Order Box Model Font Properties Text Properties Color Properties Content Positioning Summary Chapter 16 - Cascading Style Sheets 2 Outline Goals and Objectives Goals Understand CSS, their syntax, properties, use in formatting Web pages and controlling content location in pages, and how styles cascade, and how they inherit from each other Objectives Separation of Web page content and formatting CSS syntax Linking CSS and XHTML Inheritance and Cascading Order Box model Font Properties Text Properties Content Positioning Chapter 16 - Cascading Style Sheets 3 Chapter Headlines 16.1 Introduction CSS makes web page formatting less time-consuming 16.2 CSS Syntax CSS is as easy as XHTML tags and it uses property/value pairs 16.3 Linking CSS to XHTML Write styles directly into XHTML files or save them in their own files 16.4 Inheritance and Cascading Order Parent/child relationship applies to style sheets 16.5 Box Model Style sheet has margins, borders, and paddings Chapter 16 - Cascading Style Sheets 4 Chapter Headlines 16.6 Font Properties The CSS fonts are same as word processor fonts 16.7 Text Properties If you have been using a word processor, you already know CSS text properties 16.8 Color Properties CSS lets you use colors the same way you have been doing in XHTML 16.9 Content Positioning You can space out, overlap web page content with CSS, and much more Chapter 16 - Cascading Style Sheets 5 Content and Formatting are two separate parts The CSS concept separates content from presentation CSS allows use to define a style separately, and we can apply this style to any content in the web page Editing content becomes easy and formatting becomes more consistent CSS has a powerful concept which is easy to use CSS has gone through 3 major revisions CSS1 December 1996 CSS2 May 1998 CSS3 April 2001 CSS authoring tools are either stand-alone editors, or a part of HTML editors Chapter 16 - Cascading Style Sheets 6 Introduction CSS Syntax CSS rule is a statement that follows a specific syntax CSS sheet consists of a list of rules There are two types of rules at-rules begins with an @ character followed by an identifier, the rule definition, and terminated with a semicolon Example: @import "printPage.css"; rule sets they set the style of XHTML tags by using property/ value pairs Example: h1, h2 {color:blue; fontweight:bold} CSS syntax provides comment statements which begin with "/*" and end with "*/" CSS also allows XHTML comments i.e. <!--.........--> Chapter 16 - Cascading Style Sheets 7 CSS Syntax Example 16.1: Using a simple style sheet Develop a web page with blue text and yellow background Chapter 16 - Cascading Style Sheets 8 5 options for linking CSS to XHTML Linking CSS to XHTML Inline CSS: Used to apply style to one XHTML tag only using the style attribute inside the tag Embedded CSS: Used to apply style to an entire web page using the <style> tag inside the <head> tag External CSS: Used to apply style to an entire website by saving the CSS code in its own external file and using the <link> tag in the <head> section Import CSS: Works the same way as external CSS but uses the @import statement inside the <style> tag or a CSS file Attributes and tags: uses class and id attributes and <span> and <div> tags to allow fine control of style Chapter 16 - Cascading Style Sheets 9 Example 16.2: Linking style sheets to XHTML Develop a web page that illustrates different types of linking Linking CSS to XHTML Chapter 16 - Cascading Style Sheets 10 Inheritance and Cascading Order CSS tags and selectors may be nested which gives rise to the inheritance issue The inheritance rule is simple and logical: children inherit from parents, unless they override their parents' style When multiple style sheets are used, they cascade Cascading order is used to resolve conflicts that arise out of cascading The general rule is the last style sheet overrides the ones specified before them Cascading order depends on other factors such as weight, specificity, use of special keywords, and browsers Chapter 16 - Cascading Style Sheets 11 CSS uses box-oriented formatting Each formatted content results in a rectangular box inside a core box Each box has content, border, padding, and margin Box Model Chapter 16 - Cascading Style Sheets 12 Setting font properties is a very common activity Purpose specifies text font such as arial, courier specifies text style such as italic, normal specifies text size such as 12, 16, 24 specifies bold text using normal, bold, bolder, lighter, 100 900 specifies small caps text using small-caps Specifies amount of text stretching horizontally using normal, wider, narrower, condensed, expanded, etc. Chapter 16 - Cascading Style Sheets 13 Font Properties Property Font-family Font-style Font-size Font-weight Font-variant Font-stretch CSS provides a rich set of text formatting properties Values start, end, left, center, justify auto, inter-word, inter-ideograph, kashida auto, start, end, center, justify, size 10pt, 20pt, etc auto, top, sub, super, central, middle, bottom length, percentage normal, strict (white space in text stream) normal, honor normal, none normal, pre, nowrap (character spacing) normal, length Chapter 16 - Cascading Style Sheets 14 Text Properties Property Text-align Text-justify Text-align-last Min(Max)-font-size Vertical-align Text-indent Line-break Text-space Text-wrap White-space Text-spacing CSS allows you to set color properties Color Properties Purpose text color: name, hex code, RGB signals background color: name, hex code,RGB tiling effect: repeat, repeat-x/y, no-repeat transparency: 0.0 fully transparent to 1.0 color model: RGB, sRGB, URL color profile: auto, perceptual, saturation Property Color Background Background-repeat Opacity Color-profile Rendering-intent Chapter 16 - Cascading Style Sheets 15 Content Positioning CSS offers excellent control of placing web elements position property allows you to do so CSS uses the 2D coordinate system with origin on the top left corner The position property takes two values absolute or relative Absolute positioning uses the origin as the reference point for all measurements Relative positioning measures coordinates relative to the position of the last placed page element Relative positioning is sometimes easier to use over absolute positioning Chapter 16 - Cascading Style Sheets 16 CSS separates content from presentation (formatting) and thus allows better control over page design The fundamental syntactic unit of CSS is the rule There are various options to link CSS with XHTML Inheritance and Cascading order is based on simple and logical rules A box model is used as a formatting guideline CSS allows you to set font properties CSS allows you to set text properties CSS allows you to set color properties A 2D coordinate system is used for content positioning Chapter 16 - Cascading Style Sheets 17 Summary ...
View Full Document

Ask a homework question - tutors are online