New batch on Digital Marketing Courses in Bangalore starting this Monday, please call us on 099866 78681 for more details      New batch on SEO Training starting this Monday, please call us on 099866 78681 for more details

Latest 101 HTML Interview Questions and Answers

  • Home
  • /
  • Blog
  • /
  • Latest 101 HTML Interview Questions and Answers

Latest 101 HTML Interview Questions and Answers

 

Hypertext markup language (HTML) is the major markup language used to display Web pages on the Internet. In other words, Web pages are composed of HTML, which is used to display text, images or other resources through a Web browser. All HTML is plain text, meaning it is not compiled and may be read by humans.

Here are latest interview questions and Answers on HTML

 

1) What is HTML?

Answer: HTML is short for HyperText Markup Language and is the language of the World  Wide Web. It is the standard text formatting language used for creating and displaying pages on the Web. HTML documents are made up of two things: the content and the tags that format it for proper display on pages.

 

2) What are tags?

Answer: Content is placed in between HTML tags in order to properly format it. It makes use of the less than symbol (<) and the greater than symbol (>). A slash symbol is also used as a closing tag.

 

3) Do all HTML tags come in a pair?

Answer: No, there are single HTML tags that do not need a closing tag. Examples are the <img> tag and <br> tags.

 

4) What are some of the common lists that can be used when designing a page?

Answer: You can insert any or a combination of the following list types:
– ordered list
– unordered list
– definition list
– menu list
– directory list
Each of this list types makes use of a different tag set to compose

 

5) How do you insert a comment in HTML?

Answer: Comments in HTML begins with “<!–“nd ends with “–>”. For example:

<!– A SAMPLE COMMENT –>

 

6) Do all character entities display properly on all systems?

Answer: No, there are some character entities that cannot be displayed when the operating system that the browser is running on does not support the characters. When that happens, these characters are displayed as boxes.

 

7) What is an image map?

Answer: Image map lets you link to many different web pages using a single image. You can define shapes in images that you want to make part of an image mapping.

 

8 ) What is the advantage of collapsing white space?

Answer: White spaces are a blank sequence of space characters, which is treated as a single space character in HTML. Because the browser collapses multiple spaces into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the HTML code into a much more readable format.

 

9) Can attribute values be set to anything or are there specific values that they accept?

Answer: Some attribute values can be set to only predefined values. Other attributes can accept any numerical value that represents the number of pixels for a size.

 

10) How do you insert a copyright symbol on a browser page?

Answer: To insert the copyright symbol, you need to type &copy; or & #169; in an HTML file.

11) How do you create links to sections within the same page?

Answer: Links can be created using the <a> tag, with referencing through the use of the number (#) symbol. For example, you can have one line as <a href=”#topmost”>BACK TO TOP</a>, which would result in the words “BACK TO TOP” appearing on the webpage and links to a bookmark named topmost. You then create a separate tag command like <a name=”topmost”> somewhere on the top of the same webpage so that the user will be linked to that spot when he clicked on “BACK TO TOP”.

 

12) Is there any way to keep list elements straight in an HTML file?

Answer: By using indents, you can keep the list elements straight. If you indent each subnested list in further than the parent list that contains it, you can at a glance determine the various lists and the elements that it contains.

 

13) If you see a web address on a magazine, to which web page does it point?

Answer: Every web page on the web can have a separate web address. Most of these addresses are relative to the top-most web page. The published web address that appears within magazines typically points this top-most page. From this top level page, you can access all other pages within the website.

 

14) What is the use of alternative text in image mapping?

Answer: When you use image maps, it can easily become confusing and difficult to determine which hotspots correspond to which links. Using alternative text lets, you put a descriptive text on each hotspot link.

 

15) Do older HTML files work on newer browsers?

Answer: Yes, older HTML files are compliant to the HTML standard. Most older files work on the newer browsers, though some features may not work.

 

16) Does a hyperlink apply to text only?

Answer: No, hyperlinks can be used in the text as well as images. That means you can convert an image into a link that will allow users to link to another page when clicked. Surround the image within the <a href=” “>…</a> tag combinations.

 

17) If the user’s operating system does not support the needed character, how can the symbol be represented?

Answer: In cases wherein their operating system does not support a particular character, it is still possible to display that character by showing it as an image instead.

 

18) How do you change the number type in the middle of a list?

Answer: The <li> tag includes two attributes – type and value. The type attribute can be used to change the numbering type for any list item. The value attribute can change the number index.

 

19) What are style sheets?

Answer: Style sheets enable you to build consistent, transportable, and well-defined style templates. These templates can be linked to several different web pages, making it easy to maintain and change the look and feel of all the web pages within site.

 

20) State  bullet types available in HTML 

Answer: With ordered lists, you can select to use some different list types including alphabetical and Roman numerals. The type attribute for unordered lists can be set to disc, square, or circle.

21) How do you create multicolored text in a webpage?

Answer: To create text with different colors, use the <font color=”color”>…</font> tags for every character that you want to apply color. You can use this tag combination as many times as needed, surrounding a single character or an entire word.

 

22) Why are there both numerical and named character entity values?

Answer: The numerical values are taken from the ASCII values for the various characters, but these can be difficult to remember. Because of this, named character entity values were created to make it easier for web page designers to use.

 

24) What is the advantage of grouping several checkboxes together?

Answer: Although checkboxes don’t affect one another, grouping checkboxes together help to organize them. Checkbox buttons can have their name and do not need to belong to a group. A single web page can have many different groups of checkboxes.

 

25) What will happen if you overlap sets of tags?

Answer: If two sets of HTML tags are overlapped, only the first tag will be recognized. You will find this problem when the text does not display properly on the browser screen.

 

26) What are applets?

Answer: Applets are small programs that can be embedded within web pages to perform some specific functionality, such as computations, animations, and information processing. Applets are written using the Java language.

 

27) What if there is no text between the tags or if a text was omitted by mistake? Will it affect the display of the HTML file?

Answer: If there is no text between the tags, then there is nothing to format. Therefore no formatting will appear. Some tags, especially tags without a closing tag like the <img> tag, do not require any text between them.

 

28) Is it possible to set specific colors for table borders?

Answer: You can specify a border color using style sheets, but the colors for a table that does not use style sheets will be the same as the text color.

 

29) How do you create a link that will connect to another web page when clicked?

Answer: To create hyperlinks, or links that connect to another web page, use the href tag. The general format for this is: <a href=”site”>text</a>
Replace “site” with the actual page URL that is supposed to be linked to when the text is clicked.

30) What other ways can be used to align images and wrap text?

Answer: Tables can be used to position text and images. Another useful way to wrap text around an image is to use style sheets.

 

31) Can a single text link point to two different web pages?

Answer: No. The <a> tag can accept only a single href attribute, and it can point to only a single web page.

 

32) What is the difference between the directory and menu lists and the unordered list?

Answer: The key difference is that the directory and menu lists do not include attributes for changing the bullet style.

 

33) Can you change the color of bullets?

Answer: The bullet color is always the same as that of the first character in the list item. If you surround the <li> and the first character with a set of <font> tags with the color attribute set, the bullet color, and the first character will be a different color from the text.

 

34) What are the limits of the text field size?

Answer: The default size for a text field is around 13 characters. However, if you include the size attribute, you can set the size value to be as low as 1. The maximum size value will be determined by the browser width. If the size attribute is set to 0, the size will be set to the default size of 13 characters.

 

35) Do <th> tags always need to come at the start of a row or column?

Answer: Any <tr> tag can be changed to a <th> tag. This causes the text contained within the <th> tag to be displayed as bold in the browser. Although <th> tags are mainly used for headings, they do not need to be used exclusively for headings.

 

36) What is the relationship between the border and rule attributes?

Answer: Default cell borders, with a thickness of 1 pixel, are automatically added between cells if the border attribute is set to a nonzero value. Likewise, If the border attribute is not included, a default 1-pixel border appears if the rules attribute is added to the <table> tag.

 

37) What is a marquee?

Answer: A marquee allows you to put a scrolling text in a web page. To do this, place whatever text you want to appear scrolling within the <marquee> and </marquee> tags.

 

39) Are <br> tags the only way to separate sections of text?

Answer: No. The <br> tag is only one way to separate lines of text. Other tags, like the <p> tag and <blockquote> tag, also separate sections of text.

 

40) Are there instances where the text will appear outside of the browser?

Answer: By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window.

41) How are active links different from normal links?

Answer: The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link; others recognize active links when the link has the focus. Those that don’t have a mouse cursor over that link is considered a normal link.

 

42) Do style sheets limit the number of new style definitions that can be included within the brackets?

Answer: Style sheets do not limit the number of style definitions that can be included within the brackets for a given selector. Every new style definition, however, must be separated from the others by a semicolon symbol.

 

43) Can I specify fractional weight values such as 670 or 973 for font weight?

Answer: Implementation largely depends on the browser, but the standard does not support fractional weight values. Acceptable values must end with two zeroes.

 

44) What is the hierarchy that is being followed when it comes to style sheets?

Answer: If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.

 

45) Can several selectors with class names be grouped together?

Answer: You can define several selectors with the same style definition by separating them with commas. This same technique also works for selectors with class names.

 

46) What happens if you open the external CSS file in a browser?

Answer: When you try to open the external CSS file in a browser, the browser cannot open the file, because the file has a different extension. The only way to use an external CSS file is to reference it using <link/> tag within another HTML document.

 

48) What happens if the list-style-type property is used on a non-list element like a paragraph?

Answer: If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and do not affect the paragraph.

 

49) When is it appropriate to use frames?

Answer: Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.

 

50) What happens if the number of values in the rows or cols attribute doesn’t add up to 100 percent?

Answer: The browser sizes the frames relative to the total sum of the values. If the cols attribute is set to 100%, 200% the browser displays two vertical frames with the second being twice as big as the first.

51) Which browsers support HTML5?

Answer: The latest versions of Google Chrome, Apple Safari, Mozilla Firefox, and Opera all support most of the HTML5 features.

 

52) Name two new tags included in the HTML 5

<Video> and <Audio> are new tags which are included in HTML5 version. They are mainly used as a replacement for Flash, Silverlight, and similar technologies to play multimedia items.

 

53) Do you know which are two semantic tags are included in HTML5 version?

Answer: The <article> and <section> tags are two new tags that are included in HTML5. Articles can be composed of multiple sections that can have multiple articles. An article tag represents a full block of content which is a section of a bigger whole.

 

54) What is <figure> in HTML5?

Answer: This tag represents a piece of self-contained flow content. It is mostly used as a single unit as a reference the main flow of the document.

 

55) What is the use of Canvas element?

Answer:  The canvas element helps to build charts, graphs, bypass Photoshop to create 2D images and place them directly into HTML5 code.

 

56) What are the new FORM elements which are available in HTML5?

Answer: The new Form elements in HTML5 offers much better functionality than the earlier versions.

The tags given provided to carry out these functions are:

1) <datalist> – This tag is use to specify a list of options for input controls.

2) <keygen> – This tag represents a key-pair generator field.

3) <output> – It represents the result of any scripting calculation.

 

57) Tell me two benefits of HTML5 Web Storage
Answer: Two main benefits of HTML5 Web Storage:

  • It can store up to 10 MB data which is certainly more than what cookies have.
  • Web storage data cannot be transferred with the HTTP request. It helps to increase the performance of the application.

58) What are two types of Web Storage in HTML5?

Answer: Two storage types of HTML5 are:

Session Storage:

It stores data of current session only. It means that the data stored in session storage clear automatically when the browser is closed.

Local Storage:

Local storage is another type of HTML5 Web Storage. In local storage, data is not deleted automatically when the current browser window is closed.

 

59) What is the Application Cache in HTML5 and why it is used?

Answer: The Application Cache concept means that a web application is cached. It can be accessible without the need for internet connection.

Some advantages of Application Cache:

  1. Offline browsing – Web users can also use the application when they are offline.
  2. Speed – Cached resources load quicker
  3. Reduce the server load – The web browser will only download updated resources from the server.

 

60) Explain five new input types provided by HTML5 for forms?

Answer: Following are the important, new data types offered by HTML5:

  1. Date: It allows the user to select a date.
  2. datetime-local: This input type allows the user to select a date and time without time zone.
  3. datetime: This input type allows the user to select a date and time with time zone.
  4. month: It enables the user to select a month and year
  5. email: These input fields used to contain an e-mail address.

61) What Is External Style Sheet? How To Link?

Answer:  External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css.

 

  1. Is CSS Case Sensitive?

Answer: Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be.

The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.

It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { …}

div.myClass { … }

If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.

 

  1. What Is CSS Rule ‘ruleset’?

Answer : There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.

P {text-indent: 10pt} – CSS rule (ruleset)

{text-indent: 10pt} – CSS declaration

text-indent – CSS property

10pt – CSS value

 

  1. ‘fixed’ Background?

Answer: There is the possibility to use the HTML tag bgproperties=”fixed”, but that is IE proprietary, and dependent upon the ‘background’ attribute (deprecated in HTML4).

With CSS, you can declare the background like:

BODY {

font-family : “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

background-image: url(images/yourimage.gif);

background-repeat: no-repeat; /*no-tiling background*/

background-position: center;

background-attachment: fixed;

background-color: #hexcolor;

color : #hexcolor;

margin: 10px;

}

that shows a background-image in the center of the <BODY> element, non-scrolling and non-repeating – in IE or NN6. NN 4.xx gets the non-repeat-part right, but stuffs the picture in the upper left corner and scrolls …

 

  1. What Is Embedded Style? How To Link?

Answer: Embedded style is the style attached to one specific document. The style information is specified as a content of the STYLE element inside the HEAD element and will apply to the entire document.

<HEAD>

<STYLE TYPE=”text/css”>

<!–

P {text-indent: 10pt}

–>

</STYLE>

</HEAD>

 

Note: The styling rules are written as a HTML comment, that is, between <!– and –> to hide the content in browsers without CSS support which would otherwise be displayed.

 

  1. How Do I Have A Background Image That Isn’t Tiled?

Answer: Specify the background-repeat property as no-repeat. You can also use the background property as a shortcut for specifying multiple background-* properties at once. Here’s an example:

BODY {background: #FFF url(watermark.jpg) no-repeat;}

 

  1. Why Do Style Sheets Exist?

Answer: SGML (of which HTML is a derivative) was meant to be a device-independent method for conveying a document’s structural and semantic content (its meaning.) It was never meant to convey physical formatting information. HTML has crossed this line and now contains many elements and attributes which specify visual style and formatting information. One of the main reasons for style sheets is to stop the creation of new HTML physical formatting constructs and once again separate style information from document content.

 

  1. What Is Inline Style? How To Link?

Answer: Inline style is the style attached to one specific element. The style is specified directly in the start tag as a value of the STYLE attribute and will apply exclusively to this specific element occurrence.

<P STYLE=”text-indent: 10pt”>Indented paragraph</P>

 

  1. What Is A Style Sheet?

Answer: Style sheets are the way that standards-compliant Web designers define the layout, look-and-feel, and design of their pages. They are called Cascading Style Sheets or CSS. With style sheets, a designer can define many aspects of a Web page:

* fonts

* colors

* layout

* positioning

* imagery

* accessibility

Style sheets give you a lot of power to define how your pages will look. And another great thing about them is that style sheets make it really easy to update your pages when you want to make a new design. Simply load in a new style sheet onto your pages and you’re done.

 

  1. How Do I Place Text Over An Image?

Answer : To place text or image over an image you use the position property. The below example is supported by IE 4.0. All you have to do is adapt the units to your need.

<div style=”position: relative; width: 200px; height: 100px”>

<div style=”position: absolute; top: 0; left: 0; width: 200px”>

<image>

</div>

<div style=”position: absolute; top: 20%; left: 20%; width: 200px”>

Text that nicely wraps

</div>

</div>

  1. Why Does My Content Shift To The Left On Some Pages (in Ff)?

Answer: That’ll be the pages with more content? The ones that have a vertical scrollbar? If you look in IE there’s probably a white space on the right where there would be a scrollbar if there were enough content to require one. In Firefox, the scrollbar appears when it’s needed and the viewport becomes about 20px smaller, so the content seems to shift to the left when you move from a page with little content to one with lots of content. It’s not a bug or something that needs to be fixed, but it does confuse and irritate some developers.

If, for some reason, you’d like Firefox to always have scrollbars – whether they’re needed or not – you can do this :

CSS html {

height:100.1%;

}

 

  1. How Do I Combine Multiple Sheets Into One?

Answer : To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply as a preferred style, e.g.:

<LINK REL=Stylesheet HREF=”default.css” TITLE=”combined”>

<LINK REL=Stylesheet HREF=”fonts.css” TITLE=”combined”>

<LINK REL=Stylesheet HREF=”tables.css” TITLE=”combined”>

 

  1. Which Set Of Definitions, Html Attributes Or CSS Properties, Take Precedence?

Answer: CSS properties take precedence over HTML attributes. If both are specified, HTML attributes will be displayed in browsers without CSS support but won’t have any effect in browsers with CSS support.

 

  1. Why Call The Subtended Angle A “pixel”, Instead Of Something Else (e.g. “subangle”)?

Answer: In most cases, a CSS pixel will be equal to a device pixel. But, as you point out, the definition of a CSS pixel will sometimes be different. For example, on a laser printer, one CSS pixel can be equal to 3×3 device pixels to avoid printing illegibly small text and images. I don’t recall anyone ever proposing another name for it. Subangle? Personally, I think most people would prefer the pragmatic “px” to the non-intuitive “sa”.

 

  1. Why Was The Decision Made To Make Padding Apply Outside Of The Width Of A ‘box’, Rather Than Inside, Which Would Seem To Make More Sense?

Answer: It makes sense in some situations, but not in others. For example, when a child element is set to width: 100%, I don’t think it should cover the padding of its parent. The box-sizing property in CSS3 addresses this issue. Ideally, the issue should have been addressed earlier, though.

 

  1. Can CSS Be Used With Other Than Html Documents?

Answer: Yes. CSS can be used with any ny structured document format. e.g. XML, however, the method of linking CSS with other document types has not been decided yet.

 

  1. Can Style Sheets And Html Stylistic Elements Be Used In The Same Document?

Answer: Yes. Style Sheets will be ignored in browsers without CSS-support and HTML stylistic elements used.

 

  1. How Do I Design For Backward Compatibility Using Style Sheets?

Answer: Existing HTML style methods (such as <font SIZE> and <b>) may be easily combined with style sheet specification methods. Browsers that do not understand style sheets will use the older HTML formatting methods, and style sheets specifications can control the appearance of these elements in browsers that support CSS1.

 

  1. Why Use Style Sheets?

Answer: Style sheets allow a much greater degree of layout and display control than has ever been possible thus far in HTML. The amount of format coding necessary to control display characteristics can be greatly reduced through the use of external style sheets which can be used by a group of documents. Also, multiple style sheets can be integrated from different sources to form a cohesive tapestry of styles for a document. Style sheets are also backward compatible – They can be mixed with HTML styling elements and attributes so that older browsers can view content as intended.

 

  1. What Is CSS Rule ‘at-rule’?

Answer: There are two types of CSS rules: ruleset and at-rule. At-rule is a rule that applies to the whole style sheet and not to a specific selector only (like in ruleset). They all begin with the @ symbol followed by a keyword made up of letters a-z, A-Z, digits 0-9, dashes and escaped characters, e.g. @import or @font-face.

  1. What Is Selector?

Answer : CSS selector is equivalent of HTML element(s). It is a string identifying to which element(s) the corresponding declaration(s) will apply and as such the link between the HTML document and the style sheet.

For example in P {text-indent: 10pt} the selector is P and is called type selector as it matches all instances of this element type in the document.

in P, UL {text-indent: 10pt} the selector is P and UL (see grouping); in .class {text-indent: 10pt} the selector is .class (see class selector).

 

  1. What Is CSS Declaration?

Answer: CSS declaration is style attached to a specific selector. It consists of two parts; property which is equivalent of HTML attribute, e.g. text-indent: and value which is equivalent of HTML value, e.g. 10pt. NOTE: properties are always ended with a colon.

 

  1. What Is ‘important’ Declaration?

Answer: Important declaration is a declaration with increased weight. Declaration with increased weight will override declarations with normal weight. If both reader’s and author’s style sheet contain statements with important declarations the author’s declaration will override the reader’s.

BODY {background: white ! important; color: black}

In the example above the background property has increased weight while the color property has normal.

 

  1. What Is Cascade?

Answer: Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector.

Declarations with increased weight take precedence over declaration with normal weight:

P {color: white ! important} /* increased weight */

P (color: black} /* normal weight */

 

  1. Are Style Sheets Case Sensitive?

Answer: No. Style sheets are case insensitive. Whatever is case insensitive in HTML is also case insensitive in CSS. However, parts that are not under control of CSS like font family names and URLs can be case sensitive – IMAGE.gif and image.gif is not the same file.

 

86. How Do I Have A Non-tiling (non-repeating) Background Image?

Answer: With CSS, you can use the background-repeat property. The background repeat can be included in the short hand background property, as in this example:

body {

background: white url(example.gif) no-repeat ;

color: black ;

}

 

  1. Styles Not Showing?

Answer:  There are different ways to apply CSS to a HTML document with a stylesheet, and these different ways can be combined:

* inline (internal) (Deprecated for XHTML)

* embedded (internal)

* linked (external) and

* @import (external)

Note: An external stylesheet is a text file that contains only CSS Styles. HTML comments are not supposed to be in there and can lead to misinterpretation (> is the CSS “Child” selector!).

 

  1. How Do I Quote Font Names In Quoted Values Of The Style Attribute?

Answer: The attribute values can contain both single quotes and double quotes as long as they come in matching pairs. If two pair of quotes are required include single quotes in double ones or vice versa:

<P STYLE=”font-family: ‘New Times Roman’; font-size: 90%”>

<P STYLE=’font-family: “New Times Roman”; font-size: 90%’>

It’s been reported the latter method doesn’t work very well in some browsers, therefore the first one should be used.

 

  1. What Can Be Done With Style Sheets That Can Not Be Accomplished With Regular Html?

Answer: Many of the recent extensions to HTML have been tentative and somewhat crude attempts to control document layout. Style sheets go several steps beyond, and introduces complex border, margin and spacing control to most HTML elements. It also extends the capabilities introduced by most of the existing HTML browser extensions. Background colors or images can now be assigned to ANY HTML element instead of just the BODY element and borders can now be applied to any element instead of just to tables. For more information on the possible properties in CSS, see the Index DOT Css Property Index.

 

  1. What Is Property?

Answer: Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. FONT or WIDTH. There must always be a corresponing value or values set to each property, e.g. font: bold or font: bold san-serif.

  1. How Do I Write My Style Sheet So That It Gracefully Cascades With User’s Personal Sheet?

Answer: You can help with this by setting properties in recommended places. Style rules that apply to the whole document should be set in the BODY element — and only there. In this way, the user can easily modify document-wide style settings.

 

  1. How Can I Make A Page Look The Same In E.g. Ns And Msie ?

Answer:  The simple answer is, you can’t, and you shouldn’t waste your time trying to make it exactly the same. Web browsers are allowed, per definition, to interpret a page as they like, subject to the general rules set down in the HTML and CSS specifications. As a web author you can not have a prior knowledge of the exact situation and/or medium that will be used to render your page, and it’s almost always rather counterproductive to try to control that process. There is no necessity for a well-written page to look the same in different browsers. You may want to strive to ensure that it looks good in more than one browser, even if the actual display (in the case of graphical browsers) comes out a bit different. “Looking good” can be achieved by adopting sensible design and guidelines, such as not fixing the size or face of your fonts, not fixing the width of tables, etc… Don’t fight the medium; most web users only use one browser and will never know, or bother to find out, that your page looks different, or even “better”, in any other browser.

 

  1. Is There Anything That Can’t Be Replaced By Style Sheets?

Answer: Quite a bit actually. Style sheets only specify information that controls display and rendering information. Virtual style elements that convey the NATURE of the content can not be replaced by style sheets, and hyperlinking and multimedia object insertion is not a part of style sheet functionality at all (although controlling how those objects appear IS part of style sheets functionality.) The CSS1 specification has gone out of its way to absorb ALL of the HTML functionality used in controlling display and layout characteristics. For more information on the possible properties in CSS, see the Index DOT Css Property Index.

Rule of Thumb: if an HTML element or attribute gives cues as to how its contents should be displayed, then some or all of its functionality has been absorbed by style sheets.

 

  1. Can I Include Comments In My Style Sheet?

Answer: Yes. Comments can be written anywhere where whitespace is allowed and are treated as white space themselves. Anything written between /* and */ is treated as a comment (white space). NOTE: Comments cannot be nested.

 

  1. Which Characters Can CSS-names Contain?

Answer: The CSS-names; names of selectors, classes and IDs can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code. The names cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters).

 

  1. What Browsers Support Style Sheets? To What Extent?

Answer: Microsoft’s Internet Explorer version 3.0 Beta 2 and above supports CSS, as does Netscape Communicator 4.0 Beta 2 and above and Opera 3.5 and above. Take note that the early implementations in these browsers did not support ALL of the properties and syntax described in the full CSS1 specification and beyond. Later versions have been getting much closer to full CSS1 compliance, but then comes the next hurdle – CSS2…it was such a big leap over CSS1 that it has taken the browsers years to come close to supporting a majority of CSS2’s features. Mozilla and Opera’s current versions both offer excellent CSS standards compliance. The Macintosh version of Internet Explorer is said to be very impressive in its CSS capabilities as well, but PC IE lags behind these implementations. Quite a few other implementations of CSS now exist in browsers that are not as widely-used (such as Amaya, Arena and Emacs-W3), but coverage of features in these documents currently only covers Internet Explorer, NCSA Mosaic, Netscape and Opera browsers.

 

  1. Why Shouldn’t I Use Fixed Sized Fonts?

Answer: Only in very rare situations we will find users that have a “calibrated” rendering device that shows fixed font sizes correct. This tells us that we can never know the real size of a font when it’s rendered on the user end. Other people may find your choice of font size uncomfortable. A surprisingly large number of people have vision problems and require larger text than the average. Other people have good eyesight and prefer the advantage of more text on the screen that a smaller font size allows. What is comfortable to you on your system may be uncomfortable to someone else. Browsers have a default size for fonts. If a user finds this inappropriate, they can change it to something they prefer. You can never assume that your choice is better for them. So, leave the font size alone for the majority of your text. If you wish to change it in specific places (say smaller text for a copyright notice at the bottom of page), use relative units so that the size will stay in relationship to what the user may have selected already. Remember, if people find your text uncomfortable, they will not bother struggling with your web site. Very few (if any) web sites are important enough to the average user to justify fighting with the author’s idea of what is best.

 

  1. What Is Initial Value?

Answer: Initial value is a default value of the property, that is the value given to the root element of the document tree. All properties have an initial value. If no specific value is set and/or if a property is not inherited the initial value is used. For example the background property is not inherited, however, the background of the parent element shines through because the initial value of background property is transparent.

<P style=”background: red”>Hello <strong>World </strong> </P>

Content of the element P will also have red background

 

  1. How Frustrating Is It To Write A Specification Knowing That You’re At The Browser Vendors’ Mercy?

Answer: That’s part of the game. I don’t think any specification has a birthright to be fully supported by all browsers. There should be healthy competition between different specifications. I believe simple, author-friendly specifications will prevail in this environment.

Microformats are another way of developing new formats. Instead of having to convince browser vendors to support your favorite specification, microformats add semantics to HTML through the CLASS attribute. And style it with CSS.

 

  1. How Far Can Css Be Taken Beyond The Web Page–that Is, Have Generalized Or Non-web Specific Features For Such Things As Page Formatting Or Type Setting?

Answer: Yes, it’s possible to take CSS further in several directions. W3C just published a new Working Draft which describes features for printing, e.g., footnotes, cross-references, and even generated indexes.

Another great opportunity for CSS is Web Applications. Just like documents, applications need to be styled and CSS is an intrinsic component of AJAX. The “AJAX” name sounds great.

 

  1. How To Style Table Cells?

Answer: Margin, Border and Padding are difficult to apply to inline elements. Officially, the <TD> tag is a block level element because it can contain other block level elements (see Basics – Elements).

If you need to set special margins, borders, or padding inside a table cell, then use this markup:

<td>

yourtext </div></td>

to apply the CSS rules to the div inside the cell. </p>

Leave a Reply

Your email address will not be published. Required fields are marked *