Lecture2 CSS1
- 1. Lecture 2: CSS I SFDV2001 Web Development
- 2. Cascading Style Sheets You have experienced the limitation of presentation control in transitional HTML. Now you can forget about deprecated tags and experience the highly advanced presentation control afforded by CSS. With CSS: One file can completely control the appearance of ALL your HTML files. You have much, much greater control over appearance and behaviour of your page content. Web sites that use CSS are much easier to alter the appearance of.
- 3. Cascading Style Sheets Transitional code is, generally speaking, consistently presented by most browsers. Switching to CSS to control all your presentation means much more work to get satisfactory behavior across a range of browsers. The power of CSS means that it is a lot more complicated than transitional HTML. There are many, many new stylistic controls and a new way of thinking about elements on your page. Your structural HTML skills need to be sound if you are to use your CSS sensibly. Writing sensible and efficient CSS code is harder than writing good HTML code.
- 4. A little background W3C completed the CSS1 specifications in 1996. IE 3, released the same year, had some CSS support. CSS2 was published in 1998. Not until 2000, when IE 5 for Mac, was released did any browser have "full" CSS1 support. No browser has full CSS2 support. The latest versions of Safari and Opera pass the Acid2 test. Firefox and IE do not. IE currently fares worst. "I’ll go ahead and relieve the suspense by saying we will not pass this test when IE7 ships." - Chris Wilson (IEBlog)
- 5. Getting started Step 1. doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> When you use CSS your HTML should conform to the HTML 4.01 strict standard. Step 2. Get rid of all deprecated tags and attributes: font align bgcolor etc. Your HTML should only describe the structure of your content, it should ideally contain no formatting information.
- 6. Getting started Step 3. Add style information Internally: inline and embedded Externally: linked and imported 99% of the time linked is the best option. You may opt to have a few single-page specific styles embedded in an HTML document. Inline styles are really no better than <font> tags and there are very, very few good reasons for using them. Imported and embedded styles can be hidden from older browsers.
- 9. CSS Rules Cascading style sheets consist of a series of rules that determine how your HTML content will be displayed. Rules take the format: selector{ property: value; } For example: body{ background-color: #ffe89d; }
- 10. CSS Rules You add further property value pairs to an element's rule to more specifically control its appearance: body{ background-color: #ffe89d; color: #000e78; font-family: Arial, sans-serif; margin: 5%; } A style sheet consists of a series of such rules.
- 11. Cascading It's probably fairly obvious how the "style sheet" bit of CSS applies, but the "cascading" bit isn't so obvious. The cascade in CSS is how styles take precedence over other styles. Because you can have many style rules in play, to avoid conflict certain style information overrides other.
- 12. The cascade Least powerful: Browser default settings User browser settings Linked styles * Imported styles* Embedded styles** Inline styles Author !important rules Most powerful: User !important rules * Later files take precedence over earlier ones. ** Later rules have greater weight.
- 13. The cascade You can alter the power hierarchy by using the !important indicator: selector{ property: value !important; } !important beats even inline styles. Think carefully before wielding such power - you have to ensure that the style is sensible in all circumstances.
- 15. Ultimately the user wins Users can take away your power with one click.
- 16. Inheritance One of the things that makes CSS so efficient to use is the ability to have style rules inherited between parent and child elements. Parent Child <html> <body> <ol> <li> <ul> <li> <table> <tr> <tr> <td>
- 17. Inheritance
- 18. Inheritance Alter to suit
- 19. Inheritance Many CSS properties are automatically inherited from an element's parent. You can explicitly set a property's value to inherit. Everything contained within you <body> tags is a child of the body. So, properties set for the body can be inherited by its children (like <p> or <h1> etc).
- 20. Recommended sites: CSS Zen garden: http://www.csszengarden.com/ A List Apart's CSS articles: http://www.alistapart.com/topics/code/css/ W3C's CSS Home Page: http://www.w3.org/Style/CSS/ Further reading: Cascading Style Sheets the Definitive Guide by Eric A. Meyer CSS Cookbook by Christopher Schmitt
Editor's Notes
- #3: Show CSS Zen Garden - Dave Shea (pronouned &quot;shay&quot;) Show CSS Zean Garden files - same HTML for all versions.
- #5: Show web standards project site with Acid2 test. Internet Explorer 5.0 for the Macintosh, shipped in March of 2000, was the first browser to have full (better than 99 per cent) CSS1 support. Microsoft Internet Explorer , whose version 6 lacks support for about 30 percent of CSS2 properties, and, more significantly, misinterprets a significant number of important properties, such as &quot;width&quot;, &quot;height&quot;, and &quot;float&quot;. &quot;We fully recognize that IE is behind the game today in CSS support. We’ve dug through the Acid 2 Test and analyzed IE’s problems with the test in some great detail, and we’ve made sure the bugs and features are on our list - however, there are some fairly large and difficult features to implement, and they will not all sort to the top of the stack in IE7. I believe we are doing a much better service to web developers out there in IE7 by fixing our known bang-your-head-on-the-desk bugs and usability problems first, and prioritizing the most commonly-requested features based on all the feedback we've had.&quot; - http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx
- #8: You can use multiple linked or imported style sheets.
- #9: You can use multiple linked or imported style sheets.
- #14: User &quot;!important&quot; rules override author &quot;!important&quot; rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.
- #20: Play with inheritance code. - Show that font face inherits automatically. - Show that background color does not automatically inherit but text color does. - Show that list color is automatic, show how to force border inhertitance.