| 1. What is the difference between ID and Class? When should either be used? |
| IDs identify an element; they are unique for a given page, which means they can be used only once. In case of a class, elements are treated as though they are members of a group and they can be used multiple times. If a style defined is to be applied to multiple elements in a page, then a class needs to be used. |
| 2. When would you use a margin or a padding ? What is the difference between the two? |
| Padding adds extra space inside the border, while margins add extra space outside the border. Therefore, margins are used for spacing to appear outside of the box created by a border property. Padding is used when we want all of the space to be inside the border. |
| 3. What are the pros and cons of table-less HTML? |
| Using DIV-based, table-less layouts helps create a web site with less source code, and makes it W3C compatible (The W3C guidelines recommend table-less layouts).Why table based layouts after all?Web designers who use tables to create the layout claim that table based layouts consume less time compared to DIV-based layouts and that they are more compatible. There is little argument about compatibility - table based layouts are easier to create and they easily look decent in all major browsers. But being easy does not mean being right. The table based layout creates lots of junk code. You cannot separate design from data (easy with DIV-based layouts), and in fact this is the main reason why table-less layouts are recommended these days. Provided you can understand how to place DIVs using the CSS definitions it is very easy to create table-less layouts. The DIV-based layouts are also search engine friendly, that is, they’re good for your SEO because most of the layout related definitions exist in a separate CSS file and the main file is rendered quite light. I have come across some top ranking web sites created using tables but I think they have less competition and that’s why they rank at the top. The best thing about the DIV-based layouts is that you can change the entire look of the web site by just changing the definitions in the CSS file. For instance if you visit CSS Zen Garden you will notice how quickly the entire design of a web site can be changed with the help of a single CSS file. Besides, provided you know how to control the various DIVs, your web design is more compatible with all devices that can browse the Internet not just PCs. It does take more effort to learn how to create DIV-based layouts with CSS, but once you learn the art, the effort is worth it. |
| 4. What top three things would one take care of when doing a table-less layout? |
- Fixed-width layouts or Liquid Layouts.
- DOCTYPE- Xhtml-transitional or strict for coding pages.
- What font styles have been used in design, and how to use them across the site
- Where to use and not use images
|
| 5. What are the best practices of planning a CSS? |
- Comment your stylesheet
- Define general rules and main classes at the top of the stylesheet
- Order the CSS in the same order as the HTML
- Know when to use IDs and classes
- Name classes and IDs logically
- Nest CSS selectors
- Take advantage of inheritance
- Group selectors with common CSS declarations
|
| 6. For a multi page site, what are the CSS planning best practices? |
- Create an external CSS file
- Create a hierarchy in CSS
- Import the templates accordingly.
|
| 7. What browsers and browser versions should one test for? |
- Internet Explorer 6.x and 7.x
- Firefox2.x and 3.x
- Safari3.x in Windows
- Opera 9.x
|
| 8. How is testing done across multiple browsers? |
Have various browsers installed in different machines, Verify the page to be tested in different browsers manually to:
- Ensure consistency in UI
- Make sure that the HTML version used is compatible with appropriate browser versions.
- Ascertain if images (Including animated GIFs) display correctly with browsers under test
- Verify fonts are usable on any of the browsers
- Confirm Code/Scripts are usable by the browsers under test
|
| 9. How is cross-browser compatibility handled, at a CSS level? |
| Use Javascript to check for browser User Agents and load the relevant CSS file accordingly. In some cases it may suffice to have browser specific hacks within a single CSS (for example, a case where use of child selector commands - which IE6 cannot understand - wont be interpreted by IE6). |
| 10. For pop-ups, how should one code to ensure that the page is XHTML strict? |
| XHTML 1.0 does not allow javascript in href tags. Instead, 'rel' attribute can be used with value as 'external'. |
| 11. When should h1, h2, h3 tags be used? |
| h1, h2 and h3 tags are used for Header, Sub header and taglines; these tags help in SEO. |
| 12. What are the top reference sites for CSS? |
- www.smashingmagazine.com
- www.cssdrive.com
- www.cssmix.com
- www.w3schools.com
- www.alistapart.com
- www.delicious.com/tag/css
|
| 13. When would you use 'important' property in css? What would you use 'important' for? |
| This property allows us to apply rules that are most crucial. In CSS 2.0, this allows the user style sheets to have precedence over author stylesheets. |
| 14. What are the different ways of treating non-standard fonts? |
Scalable Inman Flash Replacement (sIFR) is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents. Example sites:
- http://www.mikeindustries.com/blog/files/sifr/2.0/
- http://designintellection.com/2008/this-is-how-you-get-sifr-to-work/
Some this sites use images for fonts:
- http://www.southernmedia.org/v4/
- http://www.espiratecnologias.com/
- http://www.jonbrousseau.com/
- http://webdever.nfshost.com/
- http://www.hashrocket.com/
- http://www.pontocriativo.com.br/por/
- http://www.mezzoblue.com/tests/revised-image-replacement/
|
| 15. What tools should one use to validate CSS, HTML? |
- http://validator.w3.org/
- http://jigsaw.w3.org/css-validator/
|
| 16. What is the difference between HTML and XHTML? |
The Most Important Differences:
- XHTML elements must be properly nested
- XHTML elements must always be closed
- XHTML elements must be in lowercase
- XHTML documents must have one root element
|
| 17. What are the latest versions of CSS, HTML and XHTML? |
| CSS 2.0, HTML 4.01, XHTML 1.0 |
| 18. Should one use different CSS for different browser versions? |
| Use External Style Sheets and take advantage of the "Cascading" aspect of Cascading Style Sheets. Placing your main standards-compliant style sheet and the browser-specific style sheets in different external files allow you to simply remove a particular file in the future should that version of the browser cease to be used. |
| 19. What are the advantages of table layout? |
- The concept is relatively easy for web developers to understand.Tables fit in with the idea of markup for presentation, an idea that (unfortunately) is still being taught. Most web developers are actually more at home with using tables than with using the alternative CSS (Cascading Style Sheets).
- Most development software offers a great deal of support for the creation of layout using tables.
- Fortunately, support for creating layout by means of CSS has vastly improved over the last few years.
- Tables for layout ‘work’.By means of tables, web developers can create a visually attractive layout that works out pleasingly even in old browsers. If only the layout counts, there is no reason to avoid the use of tables.
|
| 20. What top 5 commercial sites use table-less layout? |
| www.cnet.com, www.youtube.com, www.apple.com, www.cnn.com, www.bbc.co.uk, www.yahoo.com |
| 21. What top 5 sites use tables? |
- www.amazon.com
- www.google.com
- www.complianceonline.com
- www.rediff.com
|
| 22. What integration problems can potentially occur when using a CMS with a CSS? |
| Issues faced are more at the time of content upload. If HTML tags customized for the template are used for styling the content, during upload the page format goes off. Otherwise there are no issues using CMS with CSS. |
| 23. When using a CMS such as open CMS, DNN, Joomla, how should the workflow be, if table-less layout is to be used? |
Once the Mocks are ready:
- Identify the common elements of the page (example header/footer) and decide on the number of templates that are needed for the whole web site.
- Approach the designer with the identified template to create these templates.
- Once the templates are ready, integrate the templates in the CMS.
- HTML-ise the rest of the elements on each page and integrate it into the CMS
- Implement the dynamic elements of the page.
- Publish the page.
|
| 24. What WYSIWYG editors are available that can generate tables or table-less and strict XHTML layouts? |
- Sharepoint Designer
- Dreamweaver
- Expression Web
- Media Lab SiteGrinder
- NetObjects Fusion
- RapidWeaver
- CoffeeCup HTML Editor
- Alleycode HTML Editor
|
| 25. What do mobile phone browsers support? Tables or table-less? HTML or XHTML? |
| Table-less, HTML and XHTML. Example: http://m.infosys.com/, http://wap.ibibo.com/wap/home.php |
Email us
1-888-REGALIX
