Chapter 11 CSS2. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A.

Size: px

Start display at page:

Download "Chapter 11 CSS2. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A."

Randolph Stokes
5 years ago
Views:

1 Chapter 11 CSS2 Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell

2 CSS2 CSS2 ( ) was finalized in May 1998 Major contribution so far is support of positioned regions Replaced the interim CSS-P (Positioning) standard Provides a number of other features including alternate styles, aural styles, new selectors, improved lists, etc. Browser support is very spotty for CSS2 beyond positioning As of late 2003 the best CSS2 browsers are Mozilla, Opera and Safari IE6 has many CSS2 holes so proceed with caution

3 CSS2 Selectors Wildcard selector * { color: red; } /* all tags red */ Most likely used in contextual selection rules div * span {background-color: yellow; } Direct Child Selector body > p {background-color: yellow;} <p> tag must be directly enclosed within the <body> tag. This is not the same as the contextual selector body p which just says that p must be a descendent of body

4 CSS2 Selectors Contd. Adjacent-sibling Selector h1 + p {color: red;} /* <p> tags directly after an <h1> are red */ Example <h1>heading</h1> <p>i am red</p> <p>i am no red</p> Attribute Based selectors Occurrence Match a[href] {color: green} /* a tags with href are green */ Value match a[href= ]{font-weight: bold} Partial Match (space seperated) p[title~= test ]{font-style: italic;} Partial Match (dash separated) P[lang = en ] {color: red;} /* matches en-uk, en-us, etc. */ There are others including special

5 CSS2 Pseudoclasses New pseudo-elements supported in CSS2: - :first-child - :focus - :hover - :lang - :before - :after Not as valuable as it relies greatly on tree knowledge Useful for form field highlighting Commonly supported in IE Useful in mixed-language pages These used primarily with content inclusion rules to add graphics or text around sections

6 CSS2 Properties Positioning and Sizing of Regions CSS-P has been incorporated into the CSS2 specification position property has the following values, used to specify the position of an element : static (default, takes position from the document flow) absolute (most common) relative (valuable with nested objects) fixed (very interesting but Mozilla / Opera only) inherit (take your parent s value) <div style= position: absolute; top: 100px; left: 100px; >Hey!</div>

7 CSS2 Properties z-index property Used when elements overlap one another Tip: Avoid using values like 1,2,3 try using 5,10,15 or larger gaps. It allows for putting items in between When z-index is not set the order in which the tag is encountered in the document determines the stacking value. The later in the document the higher up z-index wise it will be visibility property Determines whether an element is visible, values are visible, hidden and inherit. Beware this is not the same as display: none which completely removes the tag from the document flow.

8 CSS2 Properties visibility property Determines whether an element is visible, values are visible, hidden and inherit. Beware this is not the same as display: none which completely removes the tag from the document flow. Demo <p>this is a <span style= display: none >test</span> of the two <span style= visibility: hidden >properties</span>. You should notice a difference</p>

9 CSS2 Properties, contd. Content Overflow The overflow property determines what should happen when content doesn t fit in its allocated space defined by height and width properties Possible values: hidden, scroll, none Scroll introduces a similar feature to <iframes> Be careful of printing scrolled regions

10 CSS2 Properties, contd. Max and Min Height and Width max-width and max-height properties can be set to indicate how large a region can grow when the browser is resized min-width and min-height can limit how far down a region can shrink min-width and max-width are most useful, but browser support is inconsistent, though some folks have tried to use JavaScript to dynamically adjust regions to suit

11 CSS2 Properties, contd. Clipping Regions The clip property can be used to set the coordinates of a clipping rectangle A clipping rectangle defines the subset of the content rectangle that actually shown Syntax clip: rect(top right bottom left); <div style="position:absolute; background-color: #FFA500; left:20px; top:20px; width:140px; height:140px; border-style: solid; border-width: 1px; clip: rect(10px 90px 90px 10px);" > With clipping </div>

12 CSS2 Properties, contd. Clipping is best shown when you can see that it limits the content showing as demonstrated by this picture

13 CSS2 Text and Font Improvements Font-stretch is used to stretch or condense fonts and texts values of ultra-condensed, condensed, expanded, etc. It also takes relative values like wider or narrower.narrow {font-stretch: narrower;} #arialstretch {font-family: Arial; font-stretch: ultra-expanded;} Font-size-adjust can be used to scale fonts to make content take up similar space regardless of font availability. It is not well supported in browsers Text-shadow allows us to create drop shadows on text h1 {color: #CC0000; text-shadow: 0.2em 0.2em blue;} Likely to be the new <blink> but so far only the very latest version of Safari supports this property

14 List Changes in CSS2 Main change is the use of counters to control list numbering. With counters you can increment/decrement depending on certain conditions and create outline styles. The counter, counter-increment, and counter-reset properties are used to set variables to control the counter value. In some sense we see CSS introducing some simple programming concepts. The picture here illustrates lists working in Opera 7 which would require manual insertion without CSS

15 Display Property Changes The little used display property now takes new values including: compact, run-in and marker. <h1 style="display: run-in">heading 1</h1> <p>this paragraph should have the heading run right into its first line.</p> The marker value is interesting because it allows the automatic inclusion of flagged elements #new:before {display: marker; content: url(new.gif); marker-offset: 1.5em; } There are even more display values related primarily to tables but even the basic values presented are very poorly supported so far.

16 Media Types CSS2 adds the support for multiple output formats particularly print The main way to set this is via the media attribute on a <link> tag <link rel="stylesheet" href="screenstyle.css" media="screen" type="text/css" /> <link rel="stylesheet" href="printstyle.css" media="print" type="text/css" />

17 Media Types There are numerous media types including aural, Braille, embossed, handheld, print, projection, screen, tty, and tv. The default value when not specified is all which sets the local for all display environments. You do not necessarily need to use linked styles to use media values consider rules like so <style screen {body {font-family: sans-serif; font-size: 18 pt;} print {body {font-family: serif; font-size: 9 pt;} } </style> Be careful of the double { } s here!

18 Printer Style Notes There are some special printer specific properties like page-break-before and page-break-after that are useful for print output You may find it better to measure using in,cm,pt,pc, etc. for printout Be careful about the difference between 8.5 x 11 and A4 Microsoft has some proprietary printer CSS if you really want control and want to stay away from PDF Consider that a print version does have some value since what you see on screen is not what you get with printer styles! Users may not like that surprise?

19 Alternative Styles You can provide multiple styles and the browser or JavaScript can be used to toggle between them. <link rel="stylesheet" href="standard.css" title="standard" /> <link rel="alternate stylesheet" href="orange.css" title="halloween" /> <link rel="alternate stylesheet" href="greenandred.css" title="xmas" />

20 Alternative Styles Example

21 User Styles Users can override your styles very easily Consider the!important abuse now

22 User Interface Changes The cursor property can be used to set cursors. Usually used with :hover or JavaScript mouseover Values for built-in cursors like pointer, text, crosshair, nw-resize, s- resize, wait, etc. are fairly well supported See page 350 of the 4 th edition for a chart Internet Explorer 6 also was the first to allow for custom cursors without a plug-in or control p { cursor:url("mything.cur"), url("second.cur"), text; } Notice the fall-thru technique for problems Another major change is the use of system dependent color values so you can match a Web interface to a user s GUI preference. Points to the future where the difference between a Web application and a desktop application is mainly if it is installed locally or not

23 Microsoft CSS Changes Zoom property allows you to zoom text/objects up and down <p onmouseover="this.style.zoom='200%'" onmouseout="this.style.zoom='normal'"> Roll your mouse over me and watch me zoom!</p> Scrollbar control to color scrollbars Example: body {scrollbar-face-color: red;} Be careful with a strict doctype you might see these properties ignored by IE even! Writing mode allows you to format text up and down Useful for Asian languages Big change is downloadable fonts Without browser detection this may be dangerous but it is an exciting final step for layout on the Web

24 Odds and Ends I skipped a few things in CSS2 most notably aural properties and a few things like outline CSS2 provides excellent support for screen readers This would be very important for usability though screen readers are not widely available for developers to test with CSS3 is on the way but considering we are over 5 years old with CSS2 and don t have 100% conformance we might start to worry about CSS3 in 2010

Tutorial 4: Creating Special Effects with CSS

Tutorial 4: Creating Special Effects with CSS College of Computing & Information Technology King Abdulaziz University CPCS-403 Internet Applications Programming Objectives Work with CSS selectors Create