Interview Questions CSS

CSS


11. What should I name my CSS style sheet file?
When you create an external style sheet for your Web pages, you should name the file following similar naming conventions for your HTML files:

Do not use special characters
You should only use the letters a-z, numbers 0-9, underscore (_), and hyphens (-) in your CSS file names. While your file system may allow you to create files with other characters in them, your server OS might have issues with special characters.
Do not use any spaces
Just like with special characters, spaces can cause problems on your Web server. It's a good idea to avoid them in your file names.
The file name should start with a letter
While this isn't an absolute requirement, some systems have trouble with file names that don't start with a letter.
Use all lower case
While this isn't required for a filename, it's a good idea, as some Web servers are case sensitive, and if you forget and reference the file in a different case, it won't load.
Keep the file name as short as possible
While there is a limit of file name size on most operating systems, it is much longer than is reasonable for a CSS file name. A good rule of thumb is no more than 20 characters for the file name not including the extension.
The Most Important Part of Your CSS File Name

The most important part of the CSS file name is not the file name itself, but the extension. Extensions are not required on Macintosh and Linux systems, but it is a good idea to include one anyway when writing a CSS file. That way you will always know that it's a style sheet and not have to open the file to determine what it is in the future.

The extension should be:

.css
CSS File Naming Conventions

If you only will ever have one CSS file on the site, you can name it whatever you like. I prefer:

styles.css
Name style sheets after their function. Since a Web page can have multiple style sheets attached to them, it helps to divide your styles into different sheets depending upon the function of that sheet and the styles within it. For example:

Layout vs Design
layout.css
design.css

Page sections
main.css
nav.css

Whole site with sub-sections
mainstyles.css
subpage.css

12. How Do you Stretch a Background Image in a Web Page?
The best way to stretch an image to fit the background of a page is to use the CSS3 property, background-size:

body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
According to caniuse.com it works in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, and on all the major mobile browsers.

13. What is CSS rule 'ruleset'?
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

14. What is CSS rule 'at-rule'?
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.

15. What is selector?
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).

16. What is CLASS selector?
Class selector is a "stand alone" class to which a specific style is declared.  Using the CLASS attribute the declared style can then be associated with any HTML element. The class selectors are created by a period followed by the class's name. The name 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, however, they cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters).It is a good practice to name classes according to their function than their appearance.

.footnote {font: 70%} /* class as selector */
<ADDRESS CLASS=footnote/>This element is associated with the CLASS footnote</ADDRESS>
<P CLASS=footnote>And so is this</P>

17. What is ID selector?
ID selector is an individually identified (named) selector  to which a specific style is declared.  Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector's name. The name 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, however, they cannot start with a dash or a digit.

#abcid {color: red; background: black}
<P ID=abcid>This and only this element can be identified as ?abcid?</P>

18. What is contextual selector?
Contextual selector is a selector that addresses specific occurrence of an element. It is a string of individual selectors separated by white space, a search pattern, where only the last element in the pattern is addressed providing it matches the specified context.

TD P CODE {color: red}
The element CODE will be displayed in red but only if it occurs in the context of the element P which must occur in the context of the element TD.

TD P CODE, H1 EM {color: red}
The element CODE will be displayed in red as described above AND the element EM will also be red but only if it occurs in the context of H1

P .footnote {color: red}
Any element with CLASS footnote will be red but only if it occurs in the context of P

P .footnote [lang]{color: red}
Any element with attribute LANG will be red but only if it is classed as "footnote" and occurs in the context of P

19. What is the Comma for in CSS Selectors?
The comma in a CSS selector is just a separator that separates multiple selectors that have the same styles.

For example, if you wrote:

th { color: red; }
td { color: red; }
p.red { color: red; }
div#firstred { color: red; }
You are saying that you want th tags, td tags, paragraph tags with the class red and the div tag with the ID firstred all to have the style color: red;.

This is perfectly acceptable CSS.

But there are two drawbacks to writing it this way:

If in the future, you decide to change the font color of these properties to blue, you have to make that change four times in your style sheet.
It adds a lot of extra characters to your style sheet that you don?t need.
Instead, you can combine all these styles into one style property, by separating the selectors with a comma:

th, td, p.red, div#firstred { color: red; }
Some people, to make the CSS more legible, separate each selector on its own line:

th,
td,
p.red,
div#firstred
{
color: red;
}
By using commas between your selectors, you create a more compact style sheet that?s easier to update in the future.

20. What is property?
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.