What is CSS?
CSS is a standard for applying style to HTML elements. This styling includes margins, positioning, fonts, colors, and so forth. The styling can apply to the complete document or be granular and apply to a specific element. Theoretically, the use of CSS promotes the separation of content and design, allowing the designer to focus on how a Web application will look while the developer(s) concentrate on the structure and functionality.
The main part of CSS is a rule. A rule consists of a selector (i.e., what will be styled) followed by a declaration (i.e., the style to be applied) that is broken into one or more properties and associated styles. In the following example, h1 is the selector, followed by the color property and the style of blue.
h1 {color: blue;}
What does the cascading portion of CSS mean?
Cascading refers to cascading order. It is a system of sorting the various CSS declarations to avoid conflicts. The process begins with a search for all declarations that apply to specific elements; it ends if no match is found. Cascading occurs if multiple styles are defined for an element. In general, values will be applied from the more specific style sheet. This could be its own article, so please refer to my CSS 101 TechRepublic post for more details.
Note: CSS properties take precedence of HTML attributes, but the HTML attributes will be used when/if a browser does not support CSS.
Is CSS case-sensitive?
The CSS standard is not case-sensitive, but if an XHTML doctype is used, then CSS class names will be case-sensitive in some browsers. In addition, items like font families, image URLs, and other direct references with the style sheet can be case-sensitive. To be safe, you should stick with lower-case to avoid confusion or unexpected problems.
What are different ways to apply styles to a Web page?
There are four ways to integrate CSS into a Web page (some consider items three and four the same):
- Inline: HTML elements may have CSS applied to them via the STYLE attribute.
- Embedded: CSS may be embedded in a Web page by placing the code in a STYLE element within the HEAD element.
- Linked: CSS may be placed in an external file (a simple text file containing CSS) and linked via the link element.
- Imported: Another way to utilize external CSS files via @import.
What is an ID selector?
An ID selector is a name assigned to a specific style. In turn, it can be associated with one HTML element with the assigned ID. Within CSS, ID selectors are defined with the # character followed by the selector name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, and so forth.
The following snippet shows the CSS example1 defined followed by the use of an HTML element's ID attribute, which pairs it with the CSS selector.
#example1: {background: blue;}
<p id="selector">...</p>
What is a class?
A class is a style (i.e., a group of CSS attributes) that can be applied to one or more HTML elements. This means it can apply to instances of the same element or instances of different elements to which the same style can be attached. Classes are defined in CSS using a period followed by the class name. It is applied to an HTML element via the class attribute and the class name.
The following snippet shows a class defined, and then it being applied to an HTML DIV element.
.classexample {font-family: Helvetica; font-size: 20; background: black;}
<div class="classexample">....</div>
Also, you could define a style for all elements with a defined class. This is demonstrated with the following code that selects all P elements with the column class specified.
p.column {font-color: black;}
What is the difference between an ID selector and CLASS?
An ID selector identifies and sets style to only one occurrence of an element, while CLASS can be attached to any number of elements.
What is contextual selector?
Contextual selector addresses specific occurrence of an element. It is a string of individual selectors separated by white space (search pattern), where only the last element in the pattern is addressed providing it matches the specified context.
What is grouping?
When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.
h1, h2, h3 {background: red;}
What are child selectors?
A child selector is used when you want to match an element that is the child of another specific element. The parent and child selectors are separated by spaces. The following selector locates an unordered list element within a paragraph element and makes a text within that element bold.
p > ul {font-weight: bold;}
What are pseudo classes?
Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. A good example is the :link and :visited pseudo classes for the HTML A element. Another good example is first-child, which finds an element's first child element.
The following CSS makes all visited links red and green, the actual link text becomes yellow when the mouse pointer is positioned over it, and the text of the first element of a paragraph is bold.
a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}
p.first-child {font-weight: bold;}
What does the following CSS do?
P {font-family: Verdana, Arial, Helvetica;}
The CSS sets the font for the P element. If available in the browser, Verdana is used. If Verdana is not available, Arial is used. If Arial is not an option, Helvetica is utilized.
How do you include comments in CSS?
Anything placed between /* and */ in CSS is considered a comment. Comments are ignored by the browser.
Have you utilized any CSS libraries or frameworks?
The answer to this question will not be standard, but it gives you an idea of a candidate's familiarity with the landscape. Possible answers include the YUI Library or YAML, but there are plenty more out there.
What do you see in the future of Web design?
This is an open-ended question that is purely subjective, but I want to hear the candidate discuss the explosion of non-standard devices such as phones, video game consoles, and so forth. These new platforms are changing how sites are designed. The candidate gets extra credit if they drop the phrase "responsive design."
Are you pro or against Flash?
The argument for and against Adobe Flash continues as HTML5 offers better and leaner ways to do the same thing, so this question allows you to hear the candidate's feeling on the subject and lets you know how well they keep up with industry buzz or trends.
CSS Question:-
1. What are different ways to integrate a CSS into a Web page?
There are three ways to integrate CSS into a Web page
a.) Inline: HTML elements may have CSS applied to them via the STYLE attribute.
b.) Embedded: By placing the code in a STYLE element within the HEAD element.
c.) Linked/ Imported: Place the CSS in an external file and link it via a link element.
2.) If background and colour should always be set together, why do they exist as separate properties?
The reasons for this are as follows:
- It increases the legibility of the style sheets. The background property is a complex property in CSS. If it is combined with color, the complexity will further increase.
- Color is inherited, but background isn’t. This can further increase the confusion.
3.) Explain external Style Sheet? How would you link to it?
- External Style Sheet can be called as a template/document/file which contains style information and can be linked with more than one HTML documents.
- Using this the entire site can be formatted and styles just by editing one file.
- The file is linked with HTML documents via the LINK element inside the HEAD element.
<HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>
4.) What are the advantages and disadvantages of External Style Sheets?
The advantages of External Style Sheets are:
- Using them, the styles of multiple documents can be controlled from one file.
- Classes can be created for use on multiple HTML element types in many documents.
- In complex situations, selector and grouping methods can be used to apply styles.
The disadvantages of External Style Sheets are:
- In order to import style information for each document, an extra download is needed.
- Until the external style sheet is loaded, it may not be possible to render the document.
- For small number of style definitions, it is not viable.
5. What are the advantages and disadvantages of Embedded Style Sheets?
The advantages of Embedded Style Sheets are:
- It is possible to create classes for use on multiple tag types in the document
- Under complex situations, selector and grouping methods can be used to apply styles.
- No extra download is required to import the information.
The disadvantages of Embedded Style Sheets are:
- It is not possible to control the styles for multiple documents from one file, using this method.
6. What are the advantages and disadvantages of Inline Styles?
The advantages of Inline Styles are:
- It is especially useful for small number of style definitions.
- It has the ability to override other style specification methods at the local level.
The disadvantages of Inline Styles are:
- It does not separate out the style information from content.
- The styles for many documents can not be controlled from one source.
- Selector grouping methods can not be used to handle complex situations.
- Control classes can not be created to control multiple element types within the document.
7. How can you eliminate the blue border around linked images on web page?
This can be done by specifying the border property for linked images in your CSS as none:
For e.g.
a img { border: none ; }
However, this makes it difficult for the users to differentiate between the clickable and non-clickable images.
8. What is CSS selector?
- Basically it is a string that identifies the elements to which a particular declaration or set of declarations will apply.
- It can also be referred to as a link between the HTML document and the style sheet.
- It is equivalent of HTML elements.
For example :
A {text-indent: 12pt}
Here, the selector is A, which is called as type selector.
9. What is Tweening?
- It is the short form for in-betweening.
- It is the process of generating intermediate frames between two images.
- It gives the impression that the first image has smoothly evolved into the second one.
- It is an important method used in all types of animations.
- In CSS3, Transforms(matrix,translate,rotate,scale etc) module can be used to achieve tweening.
10. Explain RWD.
- RWD is the abbreviation for Responsive web design.
- In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don’t need to create a different page for each device.
11. What is the use of CSS sprites?
- A web page with large number of images takes a longer time to load. This is because each image separately sends out a http request.
- The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request and hence the loading time.
CSS interview questions and answers
A stylesheet language used to describe the presentation of a document written in a markup language.................
Read answer
Inline, external, imported and embedded are the different types of style sheets...............
Read answer
CSS Background
CSS Text
CSS Font
CSS Border
CSS Outline..............
Read answer
font-style
font-variant
font-weight
font-size/line-height..................
Read answer
Inline - If only a small piece of code has to be styled then inline style sheets can be used..............
What is .rolloverfordnd?
.rolloverfordnd is a class selector to which the style gets applied. Dot(.) is used for class selector as it applies to any HTML elements that have the attribute as: class="rollverfordnd". This attribute can be added to multiple elements such that, if separate declarations are defined then the declaration with a specific selector win over any other.
Why my div are of different size in IE?
The specification which is been given for the size of div in IE is as follows:
Width of a box (i.e. a containing area) in CSS = width + border +padding (+margin).
Total box width is: 300px with a padding of 10px and a border of 5px. This requires the total area of 330px. IE5 uses different rules and out of width it subtracts the padding and border from the specific width so the total width becomes 270px. So, instead of 330px, IE uses 270px that is why the div are of different sizes.
What are the media types CSS allows?
Media is used to render the design and customize the documents. Media types allow user to load and apply their own selected style sheets. Media control is applied to external style sheets, in this way user can save time by retrieving the sheets from the network itself. Example: Speech based browsers can avoid the download of style sheets which are designed for visual rendering.
Can someone else's Style Sheet be used without their permission?
Style sheet information is written using special language syntax. Yes, someone else’s style sheet can be used without their permission, but it is not recommended, as it might overload the server. So, a local copy should be maintained, created and used instead of referencing a remote copy.
How do you override the underlining of hyperlinks?
Using CSS extra style functionality can be provided, that can control the status of underlining of hyperlinks. You can use style sheets in whatever way you want and can control the look and style of your display. The way in which it can be done is by introducing external level style sheet:
A { text-decoration: none } //within an anchor element as:
<a HREF="example.htm" STYLE="text-decoration: none">link text</a>
What is external Style Sheet? How to link it with HTML document?
External Style Sheet allows you to write the style content just like you do in a normal style sheet, but the advantage of it is that, it can be used anywhere and can be linked with HTML documents. It is very easy, convenient and portable way to use the formatting for the entire site.
External Style sheets can be linked with HTML documents by using a LINK element in HEAD area. It has the extension as .css. Example code:
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
What is imported Style Sheet? How to link it with HTML document?
Imported Style Sheet allows you to import the custom made style sheet from anywhere, in your HTML document. In this, one main sheet is made that consists of declarations applied to the whole site and other sheet is made, that consists of only specific declarations applied to specific documents. To link imported style sheet to HTML document @import is used in the STYLE element. For example:
<STYLE TYPE="text=css">
<!--
@import url(http://www.and.so.on.partial1.css);
@import url(http://www.and.so.on.partial2.css);
.... Other statements
-->
</STYLE>
How the concept of Style sheet is different from HTML?
HTML is an easy way to represent the structure, but when it comes to style then HTML becomes very hard to work with. The concept of style sheet is introduced to make the work easy for you to design without any hassles. Style sheets increases browser capabilities and allow different formatting options which have not been included in HTML.
Which style specification method should be used?
- External Style Sheets: should be used when you want to apply the same style to multiple documents.
- Embedded Style Sheets: should be used if you want to specify styles for a single document.
- Inline Styles: should be used if you want to apply style to one or few elements in a document.
What are logical and physical tags?
- Physical tags are known as presentational markup. They are used with recent versions of HTML. It suggests the visual appearance of the content. Ex: Italics, Underline, Bold
- Logical tags are not used for appearances, but they are used to show the purpose of the content written. For example em tag is used for emphasis not for any other thing.
