1. Advanced Topics Lecture 8 Rachel A Ober rober@ccs.neu.edu

2. Tips to Writing Styled Documents Use tags already available to you: Use tags when you want to use a header and a when you want to use a paragraph. Don't over use or when you can use something else. Watch margins on objects Margins add to the over space the object takes up on the page. Even though you give the width to be 300px, if you add a 5px margin, the width changes to 310px.

3. More Tips Design for flexibility If you use absolute positioned elements, it's hard to design other elements around it. Don't rely on people's browsers all being the same Test in other browsers. Also, make sure to set default colors because, for example, not all browsers use white as their background!

4. More Tips A trick I use when I am trying to position elements is to set a border around it with a “loud” color. This way you can see a definitive boundary to your elements and can move them to where you see fit. Many people will tell you not to use hacks. Why use hacks when you can do something right the first time? Don't base your design on hacks!

5. Secrets of CSS Remember when we were trying to make a table but all the cells had spacing in between them? Get rid of them with this: border-collapse As we've mentioned in class, you can get something to center by making its left and right margins set to “auto” table { margin: auto 10px; }

6. Separating Content and Design As presented before, the purpose of CSS is to separate design from content. Even though you can put styles within HTML, it is a much better idea to keep external CSS files. It is also possible to put content in your CSS files using the :before and :after pseudo- elements, but like above, it is suggested to keep design and style separate, but it is possible to integrate the two.

7. Interesting Ways to Integrate JavaScript and CSS Use span blocks set to hidden When a form field is clicked on, have JavaScript turn the style to visible so a box is shown with the “message.” When the field is deselected, have JavaScript turn the visibility back to “hidden.” Example http://www.askthecssguy.com/2007/03/form_field _hints_with_css_and.html http://www.askthecssguy.com/2007/03/form_field _hints_with_css_and.html

8. “Pull Quotes” You can use JS and CSS to create “pull quotes” like you see in magazines or newspaper articles. First, wrap the text you want to pull quote in a. Use JS to copy the element in the span and insert a new blockquote somewhere on the page. Example http://www.456bereastreet.com/archive/200609 /automatic_pullquotes_with_javascript_and_css / http://www.456bereastreet.com/archive/200609 /automatic_pullquotes_with_javascript_and_css /

9. Rounded Corners A big obsession with Web 2.0 design is rounded corners. Many people have their own ways of doing it. Adding extra tags Using JavaScript Using Images

10. Rounded Corners The problem with some of these techniques is that they aren't following the rule of separating style from content. In some methods, designers use the tag (because it is quicker to type and is shorter therefore making a smaller document) This kind of defeats the purpose of using CSS in the first place (IMHO) http://www.webreference.com/programming/cs s_borders/ http://www.webreference.com/programming/cs s_borders/

11. Nifty Corners Nifty Corners uses JavaScript combined with CSS to assign an id to the tag you want to round the corners of. It is a good alternative because it doesn't add superfluous tags to your HTML. Also saves file size! http://www.html.it/articoli/nifty/index.html

12. Other Tools of the Trade Color Picker There are some good sites out there that offer users the ability to create color schemes. Graphics Program Of course you can achieve a really great design without images, but using images is fun too! Validators Always, always validate your code, be it HTML, XHTML or CSS. Run it against the W3C validators to make sure it complies with the standards.

13. Other Tools of the Trade Plugins for Firefox Firebug – Edit and debug CSS, HTML and JS Colorzilla – Lets you pick out colors on the web WebDeveloper – Has a whole mess of cool toys. It's a pretty big extension though so it will slow down your power using but it is a priceless tool whenever you are in the midsts of writing a web site.

14. Good Links I have a bunch of links on my del.icio.us account under “css” http://del.icio.us/rachelober Web Developer Handbook http://www.alvit.de/handbook/ And of course, W3CSchools who have excellent tools and tutorials http://www.w3schools.com/