# CSS and Web Design # Learning about CSS CSS, or Cascading Style Sheets, have taken over the design end of websites, it seems. I’m not that good with them yet, so I’m starting to collect useful CSS Links. - [http://css.maxdesign.com.au/](http://css.maxdesign.com.au/) – *Great site to learn CSS. Straightforward to find available topics.* - [http://www.csszengarden.com/](http://www.csszengarden.com/) – *an amazing demonstration of what can be accomplished visually through CSS-based design. Each link on the side shows exactly the same text with a completely different CSS design and layout.* - [http://businesslogs.com/design\_and\_usability/my\_5\_css\_tips.php](http://businesslogs.com/design_and_usability/my_5_css_tips.php) - [http://del.icio.us/tag/css](http://del.icio.us/tag/css) Here is a list of Books that were recommended thru the CWP group. 1\. [Designing With Web Standards](http://www.amazon.com/exec/obidos/ASIN/0321385551/ref%3Dnosim/jeffreyzeldmanprA/) – Jeffrey Zeldman 2\. [CSS Definitive Guide](http://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330/sr=1-3/qid=1171569720/ref=pd_bbs_sr_3/002-3753062-0508037?ie=UTF8&s=books) OR [http://proquest.safaribooksonline.com/0596527330](http://proquest.safaribooksonline.com/0596527330) has a ton of info — better as a reference than to just read since it’s information overload – it covers all sorts of minute details on CSS and is guaranteed to give you a headache.(Sue) 3\. [CSS Cookbook](http://www.amazon.com/CSS-Cookbook-2nd-Christopher-Schmitt/dp/0596527411/ref=pd_sim_b_2/103-4788431-9696611?ie=UTF8&qid=1171569720) by Christopher Schmitt - 4\. [The Zen of CSS Design](http://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/dp/0321303474/sr=8-1/qid=1171569312/ref=pd_bbs_1/002-3753062-0508037?ie=UTF8&s=books): Visual Enlightenment for the Web is a great book for design ideas from a more artistic than technical standpoint. 5.[Web Developers Handbook](http://www.alvit.de/handbook/) 6.[Bullet Proof Web Design](http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321346939): Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (Paperback) by Dan Cederholm (Author) 7\. [CSS Mastery](http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1590596145/ref=pd_bxgy_b_img_b/102-9974745-6216962): Advanced Web Standards Solutions (Paperback) by Andy Budd (Author), Simon Collison (Author), Cameron Moll (Author) Also, don’t forget that UCLA has access to Safari Online [Proquest](http://proquest.safaribooksonline.com/)) which lists 5 or 6 books on CSS that you can read online for free from a UCLA computer (or using the VPN from off-campus).(Sue) # What sort of menus can I make with CSS? There are practically no limits to what you can do with CSS, the trick is figuring out how to make it do what you want! Or another way of looking at it is: what sort of ideas can you come up with to use CSS in a new (and hopefully useful) way? Here are just a few common things you’ll see sites do with CSS: - Drop-down menus that show up when you hover your mouse over them - Pull-up menus, that go up instead of down - Horizontal menus - Nested hierarchical menus - Menus with images in them - Stylized borders Tons of great examples can be found here: [http://www.cssplay.co.uk/menus/index.html](http://www.cssplay.co.uk/menus/index.html) # Top Ten Web Design Mistakes of 2005 By Jakob Nielsen: [http://www.useit.com/alertbox/designmistakes.html](http://www.useit.com/alertbox/designmistakes.html) # The importance of "!important" in CSS Normally, CSS works by having the most recently-declared rule take precedence. However, this isn’t always the case. Rules can be followed by the expression “!important” to give them precedence over later rules. This can come up a lot in systems like Plone, where a large amount of CSS has already been written, to which you make your own additions. The existing CSS may use !important rules which will override any rules you declare, no matter where you place them. Needless to say, this can be very confusing, since it goes against what most of us have been taught about CSS. Most of the time, you’ll be using !important to get your new CSS to override some existing rules that have been declared !important. An example usage would be: `p { font-size: 10px !important; }` This makes sure that later CSS, including user stylesheets that browsers sometimes apply, does not override this rule. However, many times you’ll want to override a rule that has already been declared !important. To do so, just make your new rule !important as well, and place it somewhere after the rule you want to replace. Internet Explorer 6 and earlier versions do not recognize the !important rule. If you are trying to override someone else’s !important rules, this does not matter much, since your later rules will override them no matter what. However, if you are trying to create new rules that user stylesheets won’t override, you’re out of luck. IE7 should fully support the rule. The official W3C word on !important can be found at: [http://www.w3.org/TR/](http://www.w3.org/TR/)REC-CSS2/cascade.html#important-rules Number 4 out of [Ten CSS tricks you may not know](http://www.evolt.org/ten-css-tricks-you-may-not-know) mentions the lack of !important support in IE6, and how it can be used to feed it browser-specific code. # CSS Design Concerns for IE6, IE7, and Firefox Below is the beginning of (hopefully) an ongoing collection of design-related CSS issues concerning different browsers. For this initial posting, I focus on Firefox, IE6, and IE7. The good news regarding IE7 is that a lot of bugs were fixed. See the following for a [list of fixes.](http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx) Unfortunately, those improvements leave a fairly large gap between how IE6 and IE7 render the same CSS. See [http://kimblim.dk/csstest/](http://kimblim.dk/csstest/) for a good look at CSS testing of Selector and Pseudo-selectors for Firefox, IE6, IE7b3, and Safari. You will notice that IE7 and Firefox display more similarly than IE7 does with IE6. If you looked through the above site, you noticed that IE6 did not properly display any of the Selectors and Pseudo-selectors that were tested. In an effort to demonstrate some of the steps that can be taken to make the same page (or element within a page) display similarly across IE6, IE7, and Firefox, I listed some **workarounds** (min/max-width, inline vs. block-level elements) for a few of the tested Selectors and Pseudo-selectors. You will find them at: [http://www.sscnet.ucla.edu/ssc/lederman/browser\_design\_issues\_1.html.](http://www.sscnet.ucla.edu/ssc/lederman/browser_design_issues_1.html) Some general ways to deal with IE6: In an effort to have your web pages validate, use Conditional Comments to write browser specific rules/code, etc. You can find more info at: [http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment\_ovw.asp.](http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp) When using Conditional Comments, make sure that the links for them come later than the main CSS file link in the coding, AND that the rules within the Conditional Comment have at least the same or higher specificity than any similar rules in the main sheet. Otherwise, the rules in the Conditional Comments will not override the main CSS. Though not an ideal solution, hacks can be helpful at times. A [list of CSS hacks.](http://brunildo.org/test/csshacks.html) Two common hacks, the Star HTML hack and the Underscore hack, both IE-specific, (you can see a list of common hacks specific to which browsers at [http://www.centricle.com/ref/css/filters](http://www.centricle.com/ref/css/filters)), can be avoided using the following approach: Write a rule, adding the IE-specific declaration. .title h3 { height: 21px; }After each rule, add a second rule using a child selector. This is key because IE6 will ignore this rule, but Firefox and IE7 will apply it. .title h3 {height: 21px; } .title > h3 {height: auto; min-height: 21px; } Though this leaves your CSS a bit bloated, it is an approach that avoids using these two common hacks in favor of a CSS-based solution. I should note that I haven�t tested this approach yet using really *complicated* coding. I�ve read that the above method requires you to be operating in strict mode, however, I found the method to work just fine (as far as I tested it) while in transitional mode. Test away! # Forcing a page break with CSS Here is a simple style sheet method for making a web page have page breaks, or form feeds in it. **Example:** Try going to the following example page and printing it. It will come out on two separate pages. [http://www.sscnet.ucla.edu/test/formfeed.htm](http://www.sscnet.ucla.edu/test/formfeed.htm) **Source Code:** ``` 1. Form Feed Test2. 3. 4. 5.

Page 1

6.

7.

Page 2

``` **Explanation:** - Line 2 is where you set up your style sheet definition. - Line 6 shows what you put wherever you want a page break. # What's a solid starting point (global reset) for a CSS file? Browsers often have different ways of rendering the same element. For example we expect lists to be left-indented. Firefox does this by applying a left padding of 40 pixels to an unordered list (`